Alex Zhao's Portfolio Website

Welcome! This is my personal portfolio, built to showcase my journey as an engineer, developer, and musician. Here you'll find my academic and professional projects, my music adventures, and a bit about who I am.

Tech Stack

• Next.js (React, TypeScript)
• CSS Modules & custom CSS
• Swiper for image galleries
• Deployed on Vercel

Design & Features

• Dual Themes: Switch between "Academic Projects" and "Music Journey" for two sides of my story.
• Interactive Cards: Projects and bands are displayed as cards with image sliders, tags, and external links.
• Accessible & Responsive: Works great on any device, with keyboard navigation and semantic HTML.
• SEO & Performance: Optimized for fast loading and discoverability.

How to Navigate

• Home: Quick intro and links to everything else.
• About: My background, education, and a summary of key projects (including this website!).
• Projects:
  • Use the toggle at the top to switch between Academic and Music views.
  • Academic: See my engineering/software projects. Click the notice button on a card to view demos or code.
  • Music: Explore my bands and performances. Click a band card for details, or the notice button for external links.
• Band Detail: Each band has its own page with event galleries and stories.
• Contacts: All my contact info, social links, and a like button. You can even copy my email or scan my WeChat QR.

Special Touches

• Tags are clickable for quick Google searches.
• Video links are clearly marked with a play icon.
• Like button on the Contacts page (because why not?).

Want to Tweak or Contribute?

• Projects and bands are managed in src/pages/projects.tsx and src/content/bands.ts.
• Styles are in src/styles/globals.css and CSS modules in each page/component.
• Deploys automatically with Vercel when you push to GitHub.

---

Thanks for stopping by! If you have feedback or want to connect, check out the Contacts page.