Building My Personal Website: A Journey with Next.js and TypeScript
I recently built my personal website from scratch, and I wanted to share the experience and the technologies I used. It's been an exciting journey exploring modern web development tools and creating something that truly represents my professional journey.
The Tech Stack
I chose a modern, performant stack for this project:
- Next.js 15 - For the framework and App Router
- TypeScript - For type safety and better development experience
- Tailwind CSS - For styling and responsive design
- Vercel - For deployment and hosting
Key Features
1. Timeline Design
One of the highlights is the professional experience timeline that showcases my work history and projects. The split design allows visitors to see both my professional work and personal achievements side by side.
2. Admin Dashboard
I built a comprehensive admin dashboard that allows me to:
- Edit work experience and project details
- Reorder items with drag-and-drop functionality
- Manage blog posts with Markdown support
- Upload and insert images seamlessly
3. Blog System
The blog system supports:
- Markdown content with full formatting
- Image uploads and paste functionality
- Automatic sorting by date
- SEO-friendly URLs
The Development Process
Planning Phase
I started by sketching out the design and planning the user experience. The goal was to create something clean, professional, and easy to navigate.
Implementation
The development process involved:
- Setting up the Next.js project with TypeScript
- Creating the main layout and components
- Implementing the timeline design
- Building the admin dashboard
- Adding the blog functionality
- Deploying to Vercel
Challenges and Solutions
Challenge: Creating a responsive timeline that works on all devices Solution: Used CSS Grid and Flexbox with careful breakpoint management
Challenge: Implementing drag-and-drop reordering Solution: Used HTML5 Drag and Drop API with React state management
Challenge: Image upload and paste functionality Solution: Built a custom API route that handles both file uploads and clipboard paste events
What I Learned
This project taught me a lot about:
- Modern React patterns and hooks
- TypeScript best practices
- Next.js App Router and server components
- File-based content management
- Responsive design principles
Future Enhancements
I'm planning to add:
- Dark mode support
- More interactive animations
- Portfolio project showcases
- Newsletter subscription
- Comment system for blog posts
Conclusion
Building this website has been a rewarding experience. It's not just a portfolio—it's a living project that I can continue to improve and expand. The combination of Next.js, TypeScript, and Tailwind CSS made development enjoyable and efficient.
If you're thinking about building your own personal website, I'd highly recommend this tech stack. The developer experience is excellent, and the performance is outstanding.
What's your experience with personal websites? I'd love to hear about your projects and any tips you might have!