Background.
Designed and Developed by JYC - Jared Yeung Creative
Welcome to my blog/personal website/portfolio, a project that I pursued for self-fulfillment. After seeking advice from ChatGPT and Poe ( refer to this ), I incorporated their suggestions to enhance the skills utilized in this website.
I ventured into new territory while creating this website, pushing myself to explore fresh ideas and concepts.
Technical skill points:
- HeadlessCMS: Leveraged the power of Sanity CMS, known for its high satisfaction score within the Jamstack Community.
- ReactJS (NextJS): Employed ReactJS to build a dynamic and responsive user interface.
- JavaScript (ReactJS): Effectively utilized useRef and useState hooks for optimized state management and interactivity.
- Tailwind CSS: Utilized Tailwind CSS to streamline the layout, enabling efficient styling for containers, columns, rows, and adapting to different media devices.
- Customized CSS: Employed custom CSS to elevate the design and bring to life the prototype inspired by the design mood board.
- Framer Motion: Implemented Framer Motion library to enhance the scrolling experience with smooth and engaging scroll triggers.
- Github: Leveraged Github for effective version control, enabling seamless collaboration and efficient management of codebase.
- NPM: Demonstrated proficiency in managing packages using NPM, ensuring the smooth integration of third-party libraries.
- Node: Developed JSON API routes and utilized .env files for secure and efficient data handling.
- Adobe: Utilized Adobe tools for design and photo retouching, ensuring visually appealing and polished aesthetics.
Website: JYC - Jared Yeung Creative
Design - Color Scheme
![JYC - Moodboard - Color Scheme - 1](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F9cbeb3df6d3cc20de6ed44e94fd0a571bcbf32ed-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Moodboard - Color Scheme - 1
![JYC - Moodboard - Color Scheme - 2](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F1b4fd58f9647452d508f5b054f8b78405932ea5d-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Moodboard - Color Scheme - 2
![JYC - Moodboard - Color Scheme - 3](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F42b8f71f2640829ea9969a96e0da2398af7eae61-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Moodboard - Color Scheme - 3
Logo - Letter Form
![JYC - Logo Variation - Letter Form - 1](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F6922d6c6eef157427da2bcb2fe5ac5b06f3b3992-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Logo Variation - Letter Form - 1
![JYC - Logo Variation - Letter Form - 2](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F1b7bb258082b274441f0c07dcec0264e311baef8-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Logo Variation - Letter Form - 2
![JYC - Logo Variation - Letter Form - Color](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fd44dbd4508ee093970da501fd5319ea9b3279c1c-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Logo Variation - Letter Form - Color
![JYC - Logo Variation - Letter Form - Final](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F6f41a2de1bdf3e046f3ea82e5a94762f6db65e36-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Logo Variation - Letter Form - Final
Typeface - Text
![JYC - Typeface Comparison - EN - Light](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F39b36481f0bbf959c078724887740c834e31032f-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Typeface Comparison - EN - Light
![JYC - Typeface Comparison - EN - Dark](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F6e267b3fbf6092e29e3af8314c74c64623acdf26-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Typeface Comparison - EN - Dark
![JYC - Typeface Comparison - EN - Final - Light](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fc3270768703969a0c1cd3426232a8e0bfc0a6072-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Typeface Comparison - EN - Final - Light
![JYC - Typeface Comparison - EN - Final - Dark](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fbaf87ecd0c889b820664f470d0ba90a68e1a1753-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Typeface Comparison - EN - Final - Dark
![JYC - Typeface Comparison - TC - Light](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fedd267d750668bea88f3a2db13753a9f14495624-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Typeface Comparison - TC - Light
![JYC - Typeface Comparison - TC - Dark](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fdc82bc6539524a97e3a47087343e85823cc26aab-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Typeface Comparison - TC - Dark
![JYC - Typeface Comparison - TC - Final - Light](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F5ef6866c68133dba254356c004999d47bff6696b-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Typeface Comparison - TC - Final - Light
![JYC - Typeface Comparison - TC - Final - Dark](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fa284b3010a2be31f949fc7dd7b37296c50ef79b3-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
JYC - Typeface Comparison - TC - Final - Dark
Logo - Icon
![Logo Variation - Icon - Light](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F056ff3a411e5bd162aceac5deeccd52c2e40a9ed-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Logo Variation - Icon - Light
![Logo Variation - Icon - Dark](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F9ef7596c0808a9259a91e3167ec6d3a87c41bd05-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Logo Variation - Icon - Dark
![Logo Variation - Icon - Final - Light](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F7c256623e530d647de471a8f69a922783814145e-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Logo Variation - Icon - Final - Light
![Logo Variation - Icon - Final - Dark](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fe225942d59cd00e9eff5f832bc4ab67ed0860699-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Logo Variation - Icon - Final - Dark
Logo Transition
![Logo Transition - 1 - Light](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F9b17a9a28f6e4c71836ec8532b58e52414f7dc55-3334x2085.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Logo Transition - 1 - Light
![Logo Transition - 1 - Dark](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2F426ff8c4af5efaa0639c4cb34f3d9deccb43481c-3334x2085.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Logo Transition - 1 - Dark
Monogram
![Monogram - Light](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Ff0bc60462679154893e1ada2acf69d4a07204ed3-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Monogram - Light
![Monogram - Dark](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fe456513a207bec0f4402e46e21b5722e3fd8ecf3-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Monogram - Dark
Favicon
![Favicon - Light](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fc761cbab4b6623859d8259345a993cf5afcc8dc3-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Favicon - Light
![Favicon - Dark](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fe8b4ba360f8a27f3cec5de12e3497e54514ef8d1-3334x2084.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Favicon - Dark
Figma (Hi-Fid Prototype)
![Figma Hi - Fid Prototype](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fmrzc8peh%2Fproduction%2Fbc952d81ec5301d332e92d0c9e339aaac24a7709-8000x4500.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Figma Hi - Fid Prototype
Index Link: Figma Original
First Draft
HTML CSS JS Static Source Code:
Final Source Code
Hosting: Vercel
Analytics: Vercel
Framework: ReactJS (NextJS)
CMS: Sanity CMS
CSS Styling: Tailwind CSS
Motion: Framer