$ D. Kyriakidis

Building My Developer Portfolio: A Journey with Next.js and Modern Web Technologies

5 min read

A deep dive into how I built my portfolio website using Next.js, TypeScript, Tailwind CSS, and other modern web technologies, with a focus on creating a terminal-inspired design.

Building My Developer Portfolio: A Journey with Next.js and Modern Web Technologies

Creating a developer portfolio is both an exciting and challenging endeavor. It's not just about showcasing your work — it's about demonstrating your technical skills, design sensibilities, and attention to detail. In this post, I'll walk you through how I built my portfolio website, the technologies I chose, and the decisions I made along the way.

The Vision: A Terminal-Inspired Design

From the beginning, I wanted my portfolio to reflect my passion for development and command-line interfaces. I decided on a terminal-inspired theme that would give the site a unique, developer-centric aesthetic while maintaining professionalism and readability.

Technology Stack

After considering various options, I settled on a modern tech stack that would provide excellent performance, developer experience, and scalability:

Core Framework: Next.js 15

I chose Next.js as the foundation for several reasons:

  • Server-Side Rendering (SSR) for better SEO and performance
  • App Router for modern routing capabilities
  • Built-in optimization for images, fonts, and assets
  • Excellent TypeScript support
  • Easy deployment on Vercel

Styling: Tailwind CSS v4

For styling, I went with Tailwind CSS:

  • Utility-first approach for rapid development
  • Consistent design system with predefined spacing and colors
  • Responsive design made simple
  • Small bundle size through purging unused styles
  • Dark theme support perfect for the terminal aesthetic

Language: TypeScript

TypeScript was a natural choice for several benefits:

  • Type safety to catch errors early
  • Better IDE support with autocomplete and refactoring
  • Improved code documentation through type definitions
  • Enhanced maintainability for long-term development

Content Management: Markdown with Gray Matter

For blog posts and content, I implemented:

  • Markdown files for easy content creation
  • Gray Matter for frontmatter parsing
  • Remark for markdown processing
  • Syntax highlighting with Highlight.js

Key Features Implementation

1. Blog System

I built a custom blog system that:

  • Parses markdown files from the content/ directory
  • Extracts metadata using frontmatter
  • Generates static pages for each post
  • Supports syntax highlighting for code blocks

2. Project Showcase

The projects section features:

  • Dynamic project cards with hover effects
  • GitHub integration for live repository links
  • Responsive grid layout
  • Technology tag system

3. Contact Form

I implemented a functional contact form using:

  • Nodemailer for email functionality
  • API routes in Next.js for backend logic
  • Form validation and error handling
  • Responsive design for all devices

4. Terminal Theme

The terminal aesthetic includes:

  • Monospace font (Roboto Mono) for authentic feel
  • Dark color scheme with green accent colors
  • Terminal-like components and animations
  • Consistent branding throughout the site

Performance Optimizations

Font Optimization

I leveraged Next.js font optimization:

import { Roboto_Mono } from 'next/font/google'
const robotoMono = Roboto_Mono({ subsets: ['latin'] })

Analytics Integration

Added Vercel Analytics for:

  • Performance monitoring
  • User behavior insights
  • Core Web Vitals tracking

Image Optimization

Utilized Next.js Image component for:

  • Automatic WebP conversion
  • Lazy loading
  • Responsive images
  • Blur placeholders

Development Workflow

Project Structure

I organized the project with a clear structure:

app/
├── page.tsx          # Home page
├── about/            # About page
├── blog/             # Blog pages with dynamic routes
├── projects/         # Projects showcase
├── contact/          # Contact form
└── components/       # Reusable UI components

components/           # Shared components
content/             # Markdown blog posts
lib/                 # Utility functions
public/              # Static assets

Development Scripts

The package.json includes optimized scripts:

  • npm run dev with Turbopack for faster development
  • npm run build for production builds
  • npm run lint for code quality

Challenges and Solutions

1. Markdown Processing

Challenge: Rendering markdown with syntax highlighting
Solution: Combined remark, remark-html, and highlight.js for robust markdown processing

2. Dynamic Routing

Challenge: Creating dynamic blog post routes
Solution: Used Next.js App Router with [slug] dynamic routes

3. Email Functionality

Challenge: Implementing contact form without exposing credentials
Solution: Created API routes with Nodemailer and environment variables

4. Type Safety

Challenge: Maintaining type safety across the application
Solution: Created comprehensive TypeScript interfaces and types

Deployment and Hosting

I deployed the portfolio on Vercel for:

  • Automatic deployments from GitHub
  • Edge network for global performance
  • Built-in analytics and monitoring
  • Zero configuration deployment

Lessons Learned

  1. Start with a clear vision: Having a terminal theme in mind guided all design decisions
  2. Choose tools wisely: The tech stack should align with project goals
  3. Performance matters: Users expect fast, responsive websites
  4. Type safety is crucial: TypeScript prevented many runtime errors
  5. Content strategy: Plan for easy content updates from day one

Future Enhancements

Looking ahead, I plan to add:

  • Search functionality for blog posts
  • Tag-based filtering for projects
  • Dark/light theme toggle
  • More interactive elements and animations
  • Progressive Web App features

Conclusion

Building this portfolio was an incredible learning experience that allowed me to explore modern web technologies while creating something uniquely mine. The combination of Next.js, TypeScript, and Tailwind CSS provided a solid foundation for both development speed and long-term maintainability.

The terminal-inspired design not only reflects my personality as a developer but also creates a memorable user experience. Most importantly, this project serves as a living showcase of my skills and continues to evolve as I grow as a developer.

Whether you're building your first portfolio or redesigning an existing one, remember that the best portfolio is one that truly represents you and demonstrates your passion for development.

Feel free to explore the source code and reach out if you have any questions about the implementation!

Back to Blog