A minimal, high-performance portfolio and blog built with Next.js 16 (App Router), Tailwind CSS v4, and Shadcn UI. It showcases my work as a Frontend Developer, featuring a clean design, dark mode support, and a fully functional MDX blog.
Built with the latest web technologies for optimal performance and developer experience.
| Category | Technology | Description |
|---|---|---|
| Framework | Next.js 16 | App Router, Turbopack, Server Components |
| Styling | Tailwind CSS v4 | Utility-first CSS framework |
| UI Library | shadcn/ui | Accessible & customizable components |
| Animation | Motion | Declarative animations (formerly Framer Motion) |
| Content | Fumadocs | MDX-based content management |
| State | Nuqs & Jotai | URL state & atomic state management |
| Database | PostgreSQL & Prisma | Relational database & ORM |
| Auth | Better Auth | Secure, self-hosted authentication |
| Analytics | Google Analytics | Product analytics & insights |
| Deployment | Vercel | Edge network deployment |
- 🎨 Modern Aesthetic: Minimalist design with a focus on typography and whitespace.
- 🌗 Dark Mode: Seamless theme switching with system preference detection.
- ⚡ High Performance: Optimized Core Web Vitals, fast LCP/FCP using Next.js 16.
- 📝 MDX Blog: Write content in Markdown/MDX with syntax highlighting and custom components.
- 🔎 Smart Search: Client-side fuzzy search with keyword highlighting.
- 🔐 Secure Authentication: Google & GitHub providers via Better Auth.
- 💬 Interactive Comments: Nested threads, likes/dislikes, and real-time updates.
- 📊 Analytics & Engagement: View counters, reaction emojis, and detailed tracking.
- 📱 Responsive: Fluid layouts that adapt perfectly to mobile, tablet, and desktop.
- 🔍 SEO Ready: JSON-LD schema, dynamic sitemap, robots.txt, and Open Graph tags.
Follow these steps to run the project locally.
- Node.js 20+ installed
- npm or pnpm (recommended)
-
Clone the repository
git clone https://github.com/hiretimsf/hiretimsf.com.git cd hiretimsf.com -
Install dependencies
npm install # or pnpm install -
Configure Environment
Copy the example to create your local environment file:
cp .env.example .env.local
Open
.env.localand add your environment variables:DATABASE_URL="postgresql://..." BETTER_AUTH_SECRET="your-secret-here" # Add other keys (e.g., Resend, Google/GitHub Client IDs)
-
Start the Development Server
npm run dev
The site should be live at http://localhost:3000 (or the port shown in your terminal).
| Command | Description |
|---|---|
npm run dev |
Starts the development server with Turbopack |
npm run build |
Builds the application for production |
npm run start |
Starts the production server |
npm run lint |
Runs ESLint checks |
npm run format:write |
Formats code using Prettier |
npm run validate-seo |
Validates SEO configuration |
A quick look at the top-level directory structure:
hiretimsf.com/
├── actions/ # Server actions for mutations/data
├── app/ # Next.js App Router (pages & layouts)
├── components/ # React components (atomic: ui, common, layout)
│ ├── common/ # Reusable business components (cards, icons)
│ ├── layout/ # Structural components (Header, Footer)
│ ├── ui/ # Shadcn UI primitives
│ └── mdx/ # MDX-specific components
├── config/ # Static configuration (site, nav, SEO)
├── features/ # Feature-based modules (blog, projects, home)
│ ├── blog/ # Blog logic, components, and content
│ ├── projects/ # Portfolio projects data and components
│ └── home/ # Landing page sections
├── hooks/ # Custom React hooks (useMedia, useDebounce)
├── lib/ # Shared utilities (utils, config)
├── public/ # Static assets (images, fonts)
├── styles/ # Global styles & Tailwind setup
└── types/ # TypeScript type definitions
A history of my portfolio evolution:
- v3 (2024): Live Demo - Next.js 16, Motion
- v2 (2023): Live Demo - Next.js 15, Framer Motion
- v1 (2022): Live Demo - Next.js 13, Basic Tailwind
- v0 (2021): Live Demo - HTML, CSS, jQuery
This project is open source and available under the MIT License.
Special thanks to the open-source community and the creators of these tools:
- Fumadocs for the amazing documentation framework.
- shadcn/ui for the beautiful component primitives.
- Lucide for the crisp icon set.
