This is a custom personal website theme built using Next.js, bootstrapped with
create-next-app. It’s designed as a minimal,
performance-focused starting point for showcasing your work, writing, and projects.
Note: This theme is generally aimed at developers and designers who want to create a personal website quickly and easily. Yes, I'm aware there are many other templates and themes available—you can literally find them all over the internet. The personal goal of building this theme was to get familiar with Next.js, and improve skills in React and TypeScript. I also wanted to create a starter template for myself, since none of the existing templates met my exact design and functionality needs, without requiring extensive modifications. So...here we are! Feel free to use this as a starting point for your own personal website, or as a reference for doing the same thing I did: building your own custom theme!
The site is organized around the following main routes/pages:
- 🏠 Home –
/ - 💼 Work –
/work - 🛠️ Projects –
/projects - ✍️ Blog –
/blog
Each page is intentionally simple and clean, making it easy to customize and build upon.
To start your development environment locally, after cloning the repository, run the following command in the root directory of the project:
npm run devOnce the server is running, open http://localhost:3000 in your browser to view the homepage. Running this command starts the app in development mode with hot-reloading enabled, so any changes you make to the code will automatically reflect in the browser without needing to restart the server.
You can also build the project for production using:
npm run buildAnd then start the production server with:
npm start- Main dashboard (Home page), with
/work,/projects, and/bloglinks - MDX support for blog posts, projects, and work items
- Syntax highlighting for code blocks in MDX files
- Light/dark mode toggle
- Responsive design for mobile and desktop
- SEO-friendly structure and metadata
- SSR support for pagination, sorting, and filtering of blog posts, projects, and work items
- Similar blog posts recommendations
- Blog post categories pages
Planned improvements and current/future features:
- 🖼 Add theme customization options:
- Color palette
- Layout options
- Consistent color scheme across pages in tailwind.config.js
- 🧪 Add tests and linting support for better maintainability
- ❔ Add guides (i.e., READMEs) for creating blog/project/work pages
Want to dig deeper into Next.js, or other resources, and see how this theme works?
- 📘 Next.js Documentation: Core concepts and API
- 🎓 Learn Next.js: Interactive tutorial
- 🔗 GitHub – Next.js: Source code and community discussion
- 📖 React Documentation: Learn React
- 🎨 Tailwind CSS Documentation: Utility-first CSS framework
- 🌎 MDN Web Docs: Comprehensive web development resources
The fastest way to deploy this app is via Vercel — the platform made by the creators of Next.js.
For more detailed instructions, check out the Next.js deployment guide. If you do decide to use Vercel, this repository includes by default Analytics and Speed Insights integration.
Note: This does not mean you have to use Vercel. You can deploy this app on any platform that supports Node.js, such as Netlify, Render, AWS Amplify, or much more.
This project uses:
- ⚛️ Next.js – React-based framework
- 💅 Tailwind CSS - Utility-first CSS framework
- 🧱 TypeScript – Static typing
This project follows best practices for code quality and style:
- Consistent code formatting using Prettier
- Linting with ESLint to ensure code quality
- Modular and reusable (React) components
Note: For prettier, you can run
npx prettier --check .to check formatting, andnpx prettier --write .to automatically format the code.
This project is licensed under the MIT License.
Got suggestions, issues, or ideas for improvement? Feel free to open an issue or submit a pull request. Contributions are always welcome! Please see the CONTRIBUTING.md file for more details.