██╗ ██████╗ ██╗  ██╗███╗   ██╗███████╗
     ██║██╔═══██╗██║  ██║████╗  ██║██╔════╝
     ██║██║   ██║███████║██╔██╗ ██║███████╗
██   ██║██║   ██║██╔══██║██║╚██╗██║╚════██║
╚█████╔╝╚██████╔╝██║  ██║██║ ╚████║███████║
 ╚════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═══╝╚══════╝
███╗   ███╗ ██████╗ ███╗   ███╗ ██████╗ ██████╗ ███████╗██████╗ ███╗   ██╗
████╗ ████║██╔═══██╗████╗ ████║██╔═══██╗██╔══██╗██╔════╝██╔══██╗████╗  ██║
██╔████╔██║██║   ██║██╔████╔██║██║   ██║██║  ██║█████╗  ██████╔╝██╔██╗ ██║
██║╚██╔╝██║██║   ██║██║╚██╔╝██║██║   ██║██║  ██║██╔══╝  ██╔══██╗██║╚██╗██║
██║ ╚═╝ ██║╚██████╔╝██║ ╚═╝ ██║╚██████╔╝██████╔╝███████╗██║  ██║██║ ╚████║
╚═╝     ╚═╝ ╚═════╝ ╚═╝     ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═══╝
██████╗  ██████╗ ██████╗ ████████╗ ██████╗ ███████╗ ██████╗ ██╗     ██╗ ██████╗
██╔══██╗██╔═══██╗██╔══██╗╚══██╔══╝██╔═══██╗██╔════╝██╔═══██╗██║     ██║██╔═══██╗
██████╔╝██║   ██║██████╔╝   ██║   ██║   ██║█████╗  ██║   ██║██║     ██║██║   ██║
██╔═══╝ ██║   ██║██╔══██╗   ██║   ██║   ██║██╔══╝  ██║   ██║██║     ██║██║   ██║
██║     ╚██████╔╝██║  ██║   ██║   ╚██████╔╝██║     ╚██████╔╝███████╗██║╚██████╔╝
╚═╝      ╚═════╝ ╚═╝  ╚═╝   ╚═╝    ╚═════╝ ╚═╝      ╚═════╝ ╚══════╝╚═╝ ╚═════╝

Testing Grounds

---

What is this? 😎

This is the second version of my personal website, a showcase of my projects and my art. There's lots of little things that you can interact with, so please give it a try here.

Explore my previous website here.

---

How was this built? 🛠️

This website was designed with heavy influence from the idea of modern smooth and sleek:

• Next.js: For optimized server-side rendering and seamless routing.
• React.js: To build dynamic and reusable UI components.
• Tailwind CSS: For fast and efficient styling.
• TypeScript: Adding type safety and maintainability.
• Three.js: To create personalized 3D visuals and animations.

And deployed with Vercel! 🚀

---

Key Features 🌟

• Interactive Design: I wanted much of my website to be played with, and I hope it translates through design.
• 3D Animations: Built with Three.js, I wanted something sleek and smooth.
• Optimized Performance: Utilizing Next.js and Tailwind to ensure fast loading and beautiful layouts, though I'm sure I missed optimizations somewhere.
• Showcase of Work: A curated portfolio of my favorite projects and art pieces.

---

Roadmap 🗺️

Planned Enhancements:

• Additional Animations: I want to transition my dark and light mode smoothly.
• Loading Screen: Right now the 3D scenes are slower to load than the rest of the website, I'd like to change that.
• Optimizations: The iframe I use to load my resume reloads often, and should be fixed.

---

About Me 👨‍💻

Hellooo, I’m John Zhou, a passionate developer, designer, artist, and student. I’m love everything graphics related and was really into Arcane and Elden Ring around the time of making this ReadME.

• Education: Pursuing a B.S. in Mathematics - Computer Science at UC San Diego and a minor in Engineering Mechanics.
• Interests: Creative programming, 2D/3D art, and web development.
• Goal: To mix/blend art and technology in my work.

---

Acknowledgements 🤓

Thanks to everyone that gave me suggestions and pointers, they were very crucial to the intiutiveness and feel of the website :>>

• Angie Le
• Ethan Schwartzman
• Ivy Hu
• Jasmine Vodhanel
• Olivier Larose (Lots of inspiration from this channel :))

---

Thanks for Visiting!

John Zhou