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 one of the following commands in the root directory of the project:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOnce the server is running, open http://localhost:3000 in your browser to view the homepage.
Planned improvements and current/future features:
- 🖥️ Create pages for:
- Home
- Work
- Projects
- Blog
- 📺 Add UI components/elements for:
- Header with navigation
- Footer
- Home page with a hero section
- 📄 Enable MDX for:
- Individual Work pages
- Blog post pages
- Project detail pages
- 👨🏻💻 MDX Syntax Highlighting for code blocks
- 🌙 Add light/dark mode support
- 🖼️ Add a Carousel component to display images/highlights of individual:
- Project pages
- Work Items
- Blog posts
- 🔍 Improve content structure, accessibility, and SEO
- 🧪 Add tests and linting support for better maintainability
- ❔ Add guides (i.e., READMEs) for creating blog/project/work pages
- 🔢 Add sorting/filtering functionality for:
- Work items
- Projects
- Blog posts
- 🖼 Add theme customization options:
- Color palette
- Layout options
- 📄 Add recommended similar blog posts items to the bottom of each blog post
- 📄 Add blog post categories pages
- 📄 Add pagination to blog posts
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
- 🌎 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.
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. Even GitHub Pages is a viable option, but it requires the use of a static export, see Next.js docs for that.
This project uses:
- ⚛️ Next.js – React-based framework
- 💅 Tailwind CSS - Utility-first CSS framework
- 🧱 TypeScript – Static typing
Got suggestions, issues, or ideas for improvement? Feel free to open an issue or submit a pull request — contributions are always welcome!