yauyenching / portfolio-site

yauyc.com Personal Portfolio

My personal portfolio site coded in React.js and TypeScript. Built with Chakra UI and Next.js, and hosted with Netlify.

💡 Motivation

I always found that a 1-page resume could never fit everything I wanted to say about myself. So I wanted to build a portfolio site, so that I had full freedom over the presentation of my narrative. I also saw it as a great way to exercise my design and technical chops!

✨ Preview

🔗 Check out the live site at yauyc.com

⭐ Features

• Light and dark mode toggle (follows system default)
• Responsive design (fits all viewport sizes including desktop, tablet, mobile)
• Sliding navigation link highlight based on current section in viewport using Intersection Observer API

📝 License

This project is licensed under the MIT License - see the LICENSE file for details. This means you can fork this repo and use this code for your own personal/commerical uses, but please provide attribution!

⚙️ Building this Project

1. First, run

   npm install
   

   to install project dependencies.

2. Then, run the development server:

   npm run dev
   # or
   yarn dev

3. Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

📖 Documentation

📂 File Structure

components/                     # React components
pages/
    sections/                   # component for each site section
    index.tsx                   # root React element
public/                         # static assets
styles/                         # global styles and component theming

🤔 Future

The following is a list of features to implement:

• Design cards overhaul: redesign cards and add description text
• Design cards overhaul: add Modal content for each project
• Hover animations
  • Drop shadows
  • Buttons
  • [optional] Gradient text
• Link tooltips
• Accessibility: Link aria labels
• Optimization: preload fonts and images
  • Preload fonts
  • [] Images
• [optional] Scroll animations (must be performant)

🙌🏻 Acknowledgements

Thank you to the Brittany Chiang, Leonard Tng, and Hana Nabilah whose personal sites I referenced when designing my site.