Creating a personal portfolio website is an excellent way to showcase your projects and skills. In this post, I’ll share my experience building this portfolio site using Jekyll, a static site generator.

Why Jekyll?

Jekyll offers several advantages for a portfolio site:

  • Simplicity: No database required, just markdown files
  • GitHub Pages: Free hosting with automatic deployment
  • Customization: Full control over design and functionality
  • Performance: Static sites are fast and secure
  • Markdown: Write content in a simple, readable format

Project Structure

The site is organized into several key components:

  • _config.yml: Main configuration file
  • _layouts: HTML templates for different page types
  • _projects: Collection of project descriptions
  • _posts: Blog posts (like this one!)
  • assets: CSS, images, and JavaScript

Key Features

Project Showcase

The projects section uses Jekyll collections to organize and display projects by category (robotics, software engineering, machine learning) and type (personal vs. team projects).

Responsive Design

The site uses CSS flexbox and grid for a responsive layout that works on mobile, tablet, and desktop devices.

Easy Maintenance

Adding a new project is as simple as creating a new markdown file in the _projects directory with appropriate front matter.

Next Steps

I plan to continue enhancing the site with:

  • Project filtering by technology stack
  • Case study deep-dives
  • Technical blog posts
  • Performance optimizations

Stay tuned for more updates!