Professional Portfolio & Blog Platform

Project Overview

This portfolio website serves as both a showcase of my work and a platform for sharing technical insights through blog posts. Built with the latest Next.js features, it emphasizes performance, accessibility, and developer experience.

Design Philosophy

The design follows these core principles:

Minimalism: Clean, distraction-free layout that puts content first
Performance: Optimized for fast load times and smooth interactions
Accessibility: WCAG 2.1 AA compliant for inclusive user experience
Responsive: Seamless experience across all device sizes
Dark Mode: System-aware theme switching

Key Features

Blog System

MDX Support: Write blog posts with React components embedded in Markdown
Syntax Highlighting: Beautiful code highlighting with sugar-high
Reading Time: Automatic calculation of estimated reading time
Tag System: Organize posts by topics and technologies
Search Functionality: Client-side search across posts
Related Posts: AI-powered related content suggestions

Portfolio Showcase

Project Gallery: Filterable showcase of development work
Case Studies: Detailed project breakdowns with technical insights
Technology Tags: Filter projects by tech stack
Live Demos: Direct links to deployed projects
Source Code: GitHub repository links

User Experience

Theme Toggle: Smooth dark/light mode switching with persistence
Smooth Animations: Subtle transitions using Framer Motion
Progressive Enhancement: Works without JavaScript
RSS Feed: Subscribe to blog updates via RSS
Share Buttons: Easy social media sharing

Technical Implementation

Next.js App Router

Leveraging Next.js 15's latest features:

// app/posts/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getAllPosts()
  return posts.map(post => ({
    slug: post.slug
  }))
}

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPostBySlug(params.slug)

  return {
    title: post.metadata.title,
    description: post.metadata.summary,
    openGraph: {
      title: post.metadata.title,
      description: post.metadata.summary,
      images: [post.metadata.image]
    }
  }
}

MDX Content Pipeline

Custom MDX setup for blog posts:

// lib/post.ts
import fs from 'fs'
import matter from 'gray-matter'
import path from 'path'

export async function getPostBySlug(slug: string): Promise<Post | null> {
  try {
    const filePath = path.join(process.cwd(), 'content', 'posts', `${slug}.mdx`)
    const fileContents = fs.readFileSync(filePath, 'utf8')

    const { data, content } = matter(fileContents)

    return {
      metadata: { ...data, slug },
      content
    }
  } catch (error) {
    return null
  }
}

MDX Components

Custom components for rich content:

// components/mdx-content.tsx
import { MDXRemote } from 'next-mdx-remote/rsc'
import { highlight } from 'sugar-high'

const components = {
  pre: ({ children, ...props }) => {
    const code = children.props.children
    const highlighted = highlight(code)
    return (
      <pre {...props}>
        <code dangerouslySetInnerHTML={{ __html: highlighted }} />
      </pre>
    )
  },
  img: ({ src, alt }) => (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={400}
      className="rounded-lg"
    />
  )
}

export default function MDXContent({ source }) {
  return <MDXRemote source={source} components={components} />
}

Styling Architecture

Tailwind CSS v4

Using the latest Tailwind features:

/* app/globals.css */
@import 'tailwindcss';

@theme {
  --color-primary: #3b82f6;
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Playfair Display', serif;
}

@layer utilities {
  .title {
    @apply font-serif text-4xl font-bold tracking-tight;
  }
}

Theme System

Dark mode implementation with next-themes:

// components/providers.tsx
'use client'

import { ThemeProvider } from 'next-themes'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  )
}

Performance Optimizations

Image Optimization

Using Next.js Image component:

<Image
  src={post.image}
  alt={post.title}
  width={1200}
  height={630}
  priority={isFeatured}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
/>

Font Loading

Optimized font loading strategy:

// app/layout.tsx
import { Inter, Playfair_Display } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-sans',
  display: 'swap'
})

const playfair = Playfair_Display({
  subsets: ['latin'],
  variable: '--font-serif',
  display: 'swap'
})

export default function RootLayout({ children }) {
  return (
    <html className={`${inter.variable} ${playfair.variable}`}>
      <body>{children}</body>
    </html>
  )
}

SEO Optimization

Metadata Configuration

Comprehensive SEO setup:

// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL('https://yourportfolio.com'),
  title: {
    default: 'Your Name - Full Stack Developer',
    template: '%s | Your Name'
  },
  description: 'Portfolio and blog of a full-stack developer...',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://yourportfolio.com',
    siteName: 'Your Name Portfolio'
  },
  robots: {
    index: true,
    follow: true
  }
}

Structured Data

JSON-LD for better search engine understanding:

// components/structured-data.tsx
export function BlogPostStructuredData({ post }) {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.summary,
    author: {
      '@type': 'Person',
      name: post.author
    },
    datePublished: post.publishedAt,
    image: post.image
  }

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
    />
  )
}

Accessibility Features

Semantic HTML: Proper heading hierarchy and landmarks
ARIA Labels: Descriptive labels for interactive elements
Keyboard Navigation: Full keyboard accessibility
Focus Management: Visible focus indicators
Color Contrast: WCAG AA compliant contrast ratios
Screen Reader: Optimized for screen reader users

Analytics & Monitoring

// lib/analytics.ts
export function trackPageView(url: string) {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('config', 'GA_MEASUREMENT_ID', {
      page_path: url
    })
  }
}

export function trackEvent(event: string, params?: Record<string, any>) {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', event, params)
  }
}

Content Management

Writing Workflow

Simple file-based workflow:

Create MDX file in content/posts/
Add frontmatter metadata
Write content with MDX
Commit and deploy

Frontmatter Schema

---
title: 'Blog Post Title'
summary: 'Brief description of the post'
author: 'Your Name'
publishedAt: '2024-01-15'
image: '/images/blog/post-image.jpg'
tags: ['Next.js', 'TypeScript', 'Web Development']
readTime: 5
---

Deployment

Vercel Configuration

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "installCommand": "pnpm install"
}

Environment Variables

NEXT_PUBLIC_SITE_URL=https://yourportfolio.com
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

Performance Metrics

Lighthouse scores (mobile):

Performance: 99
Accessibility: 100
Best Practices: 100
SEO: 100

Core Web Vitals:

LCP: 1.2s (Good)
FID: 8ms (Good)
CLS: 0.01 (Good)

Lessons Learned

Static Generation: Using SSG for blog posts dramatically improves performance
Type Safety: TypeScript catches errors early in development
Component Reusability: shadcn/ui components provide consistency
Content Strategy: File-based MDX is simple yet powerful

Future Improvements

[ ] Add comments system (with Giscus)
[ ] Newsletter subscription
[ ] Advanced search with Algolia
[ ] Reading progress indicator
[ ] View counter for posts
[ ] Interactive code playgrounds

Conclusion

This portfolio demonstrates modern web development best practices with Next.js 15. It showcases my commitment to performance, accessibility, and clean code architecture.