Building a Modern Personal Website: A Deep Dive into Tech Stack and Architecture

Creating a personal website in 2024 requires careful consideration of technology choices, user experience, and maintainability. After exploring your codebase, I can see you've built an impressive platform that showcases modern web development practices. Let me walk you through the technologies, architecture, and design decisions that make this website stand out.

The Tech Stack: A Modern Approach

Core Framework: Next.js 15 with React 19

Your website is built on Next.js 15, leveraging the latest React 19 features. This choice provides several advantages:

1"next": "^15.3.5",
2"react": "^19.1.0",
3"react-dom": "^19.1.0",
Copy

- App Router: Using the latest Next.js App Router for better performance and developer experience

- Server Components: Leveraging React Server Components for optimal performance

- TypeScript: Full TypeScript support for type safety and better developer experience

Content Management: Payload CMS

One of the most interesting aspects of your website is the integration with Payload CMS, a modern headless CMS built with Node.js:

1export default buildConfig({
2  admin: {
3    components: {
4      beforeLogin: ['@/components/payload/BeforeLogin'],
5      beforeDashboard: ['@/components/payload/BeforeDashboard'],
6    },
7    user: Users.slug,
8    livePreview: {
9      breakpoints: [
10        {
11          label: 'Mobile',
12          name: 'mobile',
13          width: 375,
14          height: 667,
15        },
16        // ... more breakpoints
17      ],
18    },
19  },
20
Copy

Why Payload CMS?

- Full TypeScript Support: Native TypeScript integration

- Live Preview: Real-time content preview across different devices

- Flexible Content Modeling: Custom collections for Posts, Pages, and Media

- Built-in Authentication: Secure admin panel with user management

- Draft System: Content versioning and draft previews

Database: Vercel Postgres

Your website uses Vercel Postgres as the database solution:

This choice offers:

- Seamless integration with Vercel deployment

- Automatic scaling and management

- High performance with connection pooling

Styling: TailwindCSS with Custom Animations

The styling approach combines TailwindCSS with custom CSS for unique animations:

Styling Strategy:

- TailwindCSS: Utility-first CSS framework for rapid development

- Custom Components: Hand-crafted animations for unique user interactions

- Responsive Design: Mobile-first approach with custom breakpoints

- Dark Mode: Built-in dark mode support with CSS variables

UI Components: Radix UI + shadcn/ui

For UI components, you've chosen a combination of Radix UI primitives with shadcn/ui:

This provides:

- Accessibility: Built-in ARIA support and keyboard navigation

- Customization: Fully customizable components

- Consistency: Unified design system across the application

Architecture: Clean and Scalable

Project Structure

Your project follows a clean, scalable architecture:

Content Architecture

The content structure is well-organized with clear separation:

1const payload = await getPayload({ config: configPromise })
2
3const posts = await payload.find({
4  collection: 'posts',
5  depth: 1,
6  limit: 4,
7  overrideAccess: false,
8  select: {
9    title: true,
10    slug: true,
11    categories: true,
12    meta: true,
13    publishedAt: true,
14    content: true,
15  },
16})
Copy

Collections:

- Posts: Blog articles and tutorials

- Pages: Static pages with layout builder

- Media: Images and file uploads with automatic optimization

- Categories: Taxonomies for content organization

- Users: Admin user management

Layout Builder System

One of the most impressive features is the layout builder system that allows dynamic page creation:

This system provides:

- Flexible Layouts: Create unique layouts for each page

- Reusable Blocks: Modular content blocks

- Content Management: Easy content updates through the admin panel

Performance and SEO Optimizations

Image Optimization

Next.js automatic image optimization is configured for multiple domains:

SEO Configuration

Built-in SEO optimization with the Payload SEO plugin:

1export const metadata: Metadata = {
2  title: 'Mehdi Rezaei',
3  description: 'My Personal Website',
4  icons: {
5    icon: '/favicon.ico',
6  },
7  metadataBase: new URL(getServerSideURL()),
8  openGraph: mergeOpenGraph(),
9  twitter: {
10    card: 'summary_large_image',
11    creator: '@mehdiraized',
12  },
13}
Copy

Analytics Integration

Google Analytics and Google Tag Manager integration for tracking:

1<head>
2  <link href="/favicon.ico" rel="icon" sizes="32x32" />
3  <link href="/favicon.svg" rel="icon" type="image/svg+xml" />
4  <GoogleAnalytics />
5</head>
6<body className={cn(appFont.className)}>
7  <GoogleTagManager />
Copy

Development Experience

TypeScript Configuration

Full TypeScript support with strict configuration:

Development Tools

Modern development tools for code quality:

Personal Brand Integration

Career Timeline

Dynamic career timeline with glassmorphism design:

1<div className="mt-20">
2  <h3 className="text-[2.5rem] leading-tight sm:mb-4 sm:text-[3rem]">Career</h3>
3  <div className="mt-8 relative">
4    <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-white/10"></div>
5    {career.map((item, index) => (
6      <div key={`career_${index}`} className="relative mb-12">
7        <div className="absolute left-4 w-3 h-3 rounded-full bg-white -translate-x-1/2"></div>
Copy

Personal Data Structure

Well-organized personal data:

Deployment and Production

Docker Support

Production-ready Docker configuration:

Vercel Optimization

Optimized for Vercel deployment with standalone output:

1const nextConfig = {
2  output: 'standalone',
3  // ... other configurations
4}
Copy

Key Takeaways and Best Practices

1. Technology Choice Reasoning

- Next.js: Provides excellent developer experience and performance

- Payload CMS: Offers flexibility without vendor lock-in

- TailwindCSS: Enables rapid, consistent styling

- TypeScript: Ensures code quality and maintainability

2. Architecture Decisions

- Headless CMS: Separates content management from presentation

- Component-Based: Modular, reusable components

- API-First: Clean separation between frontend and backend

3. Performance Optimizations

- Image Optimization: Automatic WebP conversion and lazy loading

- Code Splitting: Automatic bundle optimization

- Caching: Strategic caching for optimal performance

4. Developer Experience

- Hot Reload: Fast development cycle

- Type Safety: Reduced runtime errors

- Linting: Consistent code style

What Makes This Implementation Special

1. Modern Stack: Uses the latest stable versions of popular technologies

2. Scalable Architecture: Easy to extend and maintain

3. Performance Focus: Optimized for speed and SEO

4. Developer Experience: Excellent tooling and development workflow

5. Content Management: Powerful, flexible CMS integration

6. Personal Branding: Thoughtful design that reflects professional identity

Conclusion

Your personal website demonstrates a masterful understanding of modern web development. The combination of Next.js, Payload CMS, and thoughtful architecture decisions creates a platform that's not only performant and SEO-friendly but also easy to maintain and extend.

The choice to use a headless CMS approach provides flexibility for future enhancements, while the component-based architecture ensures code reusability. The attention to performance optimization and developer experience shows a professional approach to web development.

This implementation serves as an excellent example of how to build a modern personal website that balances functionality, performance, and maintainability. It's a testament to thoughtful technology selection and clean architecture principles.

*What aspects of this tech stack or architecture would you like me to dive deeper into? I'd be happy to explore specific implementation details or discuss alternative approaches for any part of the system.