Back to projects
Personal Portfolio Website (Next.js + Tailwind)

Personal Portfolio Website (Next.js + Tailwind)

Yurii Vychivskii/June 11, 2025

✨ Project Overview

This is my personal portfolio website, built using modern web technologies like Next.js 14 (App Router) and Tailwind CSS.
It represents me as a developer, showcases my projects (including Nimble), and allows recruiters or collaborators to learn more about my skills and contact me easily. I designed it with clarity, performance, and accessibility in mind — both for desktop and mobile users.

⚙️ Tech Stack

Next.js 14 (App Router)

A modern React framework that offers:

  • server-side rendering (SSR),
  • file-based routing with the app directory,
  • support for persistent layouts and nested routes.

React 18

A library for building dynamic user interfaces:

  • component-based architecture,
  • built-in state and lifecycle management,
  • support for modern features like Concurrent Mode.

Tailwind CSS

A utility-first CSS framework that helps:

  • build responsive UIs quickly,
  • avoid writing custom styles,
  • customize your design via configuration.

TypeScript

A strongly-typed superset of JavaScript that brings:

  • static typing during development,
  • better editor support and autocompletion,
  • improved code reliability and maintainability.

Contentlayer + MDX

A powerful combo for working with content:

  • MDX — Markdown with embedded JSX components,
  • Contentlayer — generates types and content sources automatically,
  • ideal for blogs, portfolios, or documentation.

📐 Features

  • Clean and modern responsive design
  • Projects page with detailed cards
  • Blog with MDX posts
  • Integrated contact form
  • Dynamic routing for blog/project posts
  • SEO and meta tags
  • Smooth animations and transitions
  • Light/Dark mode support (optional)

📸 Pages

  • / — Homepage
  • /projects — All pet projects
  • /projects/[slug] — Single project page (like this one)
  • /blog — Blog index
  • /blog/[slug] — Individual post
  • /#contact — Scroll to contact section

🧱 Folder Structure

portfolio/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── projects/
├── components/
├── content/
│   ├── posts/
│   └── projects/
├── public/
├── styles/
├── tailwind.config.ts
└── ...

🧠 Why I Built This

After building Nimble, I wanted a space to present my projects and skills professionally.
This portfolio site became a way to:

  • Apply and solidify my Next.js and Tailwind knowledge
  • Practice component-based architecture
  • Learn how to work with MDX and content-driven pages
  • Polish the UI/UX and write clean, production-ready code

🔍 Future Improvements

  • Add filter/search by tech stack or tags
  • Use CMS like Notion or Sanity for live content
  • Support i18n (English/Ukrainian switch)
  • Add testimonials and timeline
  • More advanced animations and micro-interactions

🔗 Related Links

Thanks for reading! Feel free to explore my other projects or get in touch if you’d like to collaborate 👋