Skip to content

jaredycw/jyc-nextjs-sanity-blog

Repository files navigation

JYC Nextjs Sanity Blog

Here is my Blog and Portfolio / Personal Website.

👉 https://www.jaredyeung.com/

Preface

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.

BTW: This repo is for my learning purpose.

This is my first time to handle ReactJS / Nextjs / Sanity CMS / JSON / API, I will try my best to make it better for disclosing the source code, and the projects.

Technical

I'm too lazy, Vercel hosting and Sanity CMS save a lot of time.

I will add database later on my website.

Hosting: Vercel

Analytics: Vercel

Framework: ReactJS (NextJS)

CMS: Sanity CMS

CSS Styling: Tailwind CSS

Motion: Framer

Comment: Disqus

Technical Details

  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.

Features

  • Dark/ Light Mode
  • Random Quote (Author description above)
  • Loading effect
  • Preloading
  • Motion (Scroll trigger)
  • Contact Me Form
  • Sitemap
  • 404 page link
  • Post
  • Archive list (categories, skills, industries, posts, works, experiments)
  • Fetching Weather
  • Fetching Spotify (My top tracks, Artists, curreny listening, latest albums in local market)
  • Fetching The New York Times (Book list, Top Articles, Movie Reviews)
  • Fetching RSS (Coursera, Open Culture, Codeacdemy, BBC)

Design

Color Scheme

Logo

Typeface

Icon

Figma

Releases

No releases published

Packages

No packages published

Languages