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:

1. HeadlessCMS: Leveraged the power of Sanity CMS, known for its high satisfaction score within the Jamstack Community.
2. ReactJS (NextJS): Employed ReactJS to build a dynamic and responsive user interface.
3. JavaScript (ReactJS): Effectively utilized useRef and useState hooks for optimized state management and interactivity.
4. Tailwind CSS: Utilized Tailwind CSS to streamline the layout, enabling efficient styling for containers, columns, rows, and adapting to different media devices.
5. Customized CSS: Employed custom CSS to elevate the design and bring to life the prototype inspired by the design mood board.
6. Framer Motion: Implemented Framer Motion library to enhance the scrolling experience with smooth and engaging scroll triggers.
7. Github: Leveraged Github for effective version control, enabling seamless collaboration and efficient management of codebase.
8. NPM: Demonstrated proficiency in managing packages using NPM, ensuring the smooth integration of third-party libraries.
9. Node: Developed JSON API routes and utilized .env files for secure and efficient data handling.
10. 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

JYC - Moodboard - Color Scheme - 2

JYC - Moodboard - Color Scheme - 3

Logo - Letter Form

JYC - Logo Variation - Letter Form - 1

JYC - Logo Variation - Letter Form - 2

JYC - Logo Variation - Letter Form - Color

JYC - Logo Variation - Letter Form - Final

Typeface - Text

JYC - Typeface Comparison - EN - Light

JYC - Typeface Comparison - EN - Dark

JYC - Typeface Comparison - EN - Final - Light

JYC - Typeface Comparison - EN - Final - Dark

JYC - Typeface Comparison - TC - Light

JYC - Typeface Comparison - TC - Dark

JYC - Typeface Comparison - TC - Final - Light

JYC - Typeface Comparison - TC - Final - Dark

Logo - Icon

Logo Variation - Icon - Light

Logo Variation - Icon - Dark

Logo Variation - Icon - Final - Light

Logo Variation - Icon - Final - Dark

Logo Transition

Logo Transition - 1 - Light

Logo Transition - 1 - Dark

Monogram

Monogram - Light

Monogram - Dark

Favicon

Favicon - Light

Favicon - Dark

Figma (Hi-Fid Prototype)

Figma Hi - Fid Prototype

Index Link: Figma Original

First Draft

HTML CSS JS Static Source Code:

First Draft

Final Source Code

Github

Hosting: Vercel

Analytics: Vercel

Framework: ReactJS (NextJS)

CMS: Sanity CMS

CSS Styling: Tailwind CSS

Motion: Framer