Dima Markus

Product-minded engineer, designer, and builder

Project2023Sep 1, 2023

Portfolio Site

A modern portfolio site built around local MDX content, strong SEO defaults, and a clean App Router architecture.

Next.jsTypeScriptTailwind CSSMDX

Portfolio Site

This project is a modern, responsive portfolio site built to showcase work, writing, and technical depth without burying the content under unnecessary architecture.

Project Goals

The main goals for this project were:

  1. Create a modern, responsive design that works well on all devices
  2. Showcase my projects and skills in a clean, organized way
  3. Keep publishing simple with local-first MDX content and typed metadata
  4. Optimize for performance and SEO to ensure good visibility and user experience

Technical Implementation

The website is built with Next.js 15 using the App Router, which provides several benefits:

  • Server Components for improved performance and SEO
  • Server Actions for form handling and data mutations
  • Static Site Generation for fast page loads

The styling is done using Tailwind CSS, which allows for rapid development and consistent design. Content is authored locally in MDX so the publishing workflow stays versioned, predictable, and easy to evolve.

Key Features

  • Responsive design that works on all devices
  • Dark/light mode toggle for user preference
  • Project showcase with filtering capabilities
  • Blog section with MDX support for rich content
  • Contact form with server-side validation
  • SEO optimization with Next.js metadata API

Challenges and Solutions

One of the main challenges was keeping the site maintainable as the amount of content and presentation logic grew. The solution was to keep the content model simple, rely on typed metadata, and make each route read from a single local source of truth.

Results

The final product is a fast, responsive portfolio website that effectively showcases my work and skills. The site achieves perfect Lighthouse scores for performance, accessibility, best practices, and SEO.