Why a Personal Website in the Modern Era
A personal website serves multiple purposes in today's digital landscape. It’s a space for authentic self-expression beyond social media templates, a professional platform to showcase work and connect with others, and, most importantly, it’s simply great fun to build and customize.
Starting Point: The Basic Approach
I started with basic web development knowledge but no professional experience. My initial tech stack consisted of static HTML, CSS, and JavaScript, deployed via GitHub Pages and Spaceship, with Google Analytics for tracking.
Challenges appeared quickly. UI and UX adjustments across different devices and browsers required extensive manual testing. Communicating design ideas with AI assistants was inefficient without proper technical vocabulary, making iteration slow and sometimes frustrating.
For example, building a responsive navigation menu required writing multiple media queries and testing across browsers. A simple layout change could easily break the mobile view, leading to hours of debugging.
Learning Modern Web Development with AI
Researching current technologies took time but proved invaluable. I explored various design and development tools to find the right fit:
- Lovable: Great for quick prototypes but limited in customization
- Framer: Excellent for design inspiration with rich component libraries
- Figma AI: Helpful for design assistance, though it required some learning investment
I also evaluated different AI coding assistants:
- Cursor: Feature-rich but a bit expensive for regular use
- GitHub Copilot: Good for code suggestions but limited in project context
- Trae: Offered the best balance between features and affordability but recently banned for Claude Code model
To understand modern frameworks and workflows, I followed the Next.js official tutorial and studied reusable components and examples on GitHub.
Modern Approach with Handy Tools
After thorough research, I rebuilt the website using a modern stack:
- Framework: Next.js 14 with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui + Radix UI
- Animation: Framer Motion
- Deployment: Vercel
This approach greatly improved scalability, maintainability, and performance. My better understanding of web concepts also made communication with AI assistants more effective.
When designing a dynamic landing page layout, using CSS Grid with Tailwind, I created a responsive system that adapts to different screen sizes while maintaining visual hierarchy. The component-based architecture made it easy to reuse layout patterns across the site.
What I Have Learned
This journey taught me lessons that go beyond technical skills:
- Learn by doing. Rapid iteration with quick feedback makes development more engaging. Using platforms that support continuous deployment keeps motivation high and progress visible.
- Collaboration matters. Discussing ideas with others leads to better solutions. Teaching concepts and learning from peers deepen understanding. (Thanks to my friend Xiaoye for the great discussions.)
- Research pays off. Investing time to understand the landscape before starting saves effort later.
- Master the fundamentals. Solid foundational knowledge changes how you approach problems, choose tools, and communicate with AI.
- Leverage existing tools. Starting with established design systems and component libraries saves countless hours. They handle complex styling and accessibility, letting you focus on what makes your project unique — no need to reinvent the wheel.