Building My Personal Portfolio with Jekyll

Introduction

This post is a summary of my personal portfolio project journey. From initial conception through design iterations to the current state, I document the decisions made, technologies chosen, and the ongoing development of this Jekyll-based portfolio site.

Project Genesis

I decided to build a personal portfolio to showcase my work across three main areas:

• Legal technology projects and insights
• Software development learning and projects
• Cybersecurity studies and progress

A static site generator made sense for simplicity, performance, and version control friendly content.

Technology Stack

Core Technology:

• Jekyll for static site generation
• SCSS for styling and design system
• Gulp for build automation and asset compilation
• GitHub Pages for hosting and deployment

Design Approach:

• Dark theme with neon green accents for visual identity
• Responsive mobile-first design
• Clean, minimal typography
• Focus on readability and content hierarchy

Site Structure

The portfolio is organized into several key sections:

1. Homepage - Hero section with tagline, learning card, featured projects
2. About - Personal background and career transition narrative
3. Portfolio - Showcase of completed projects and work samples
4. Projects - Detailed project pages with descriptions and outcomes
5. Blog - Posts organized by category (Legal Tech, Software Development, Cybersecurity, Tech Projects, Portfolio Posts)
6. Contact - Ways to get in touch and social links

Current Version Status

Completed Features

• Responsive homepage with hero section and learning card grid
• Project listing with card-based layout and detail pages
• Blog page with category-based filtering and jump links
• Footer with social media links
• Dark theme with consistent color palette
• Mobile-friendly navigation and layout

Recent Improvements

• Fixed blog category filtering to use post categories instead of tags
• Added new blog categories (Tech Projects, Portfolio Posts)
• Created project detail pages for Home Lab and Private AI Workstation
• Unified typography and spacing across all pages
• Enforced neon green accent color throughout design

Known Upcoming Work

• Expand blog content with more posts in each category
• Add more project showcase pages
• Implement analytics and SEO optimization
• Create automated deployment pipeline
• Add dark/light theme toggle (future enhancement)

Design Decisions

Dark Theme: Chosen for reduced eye strain and modern aesthetic appeal.

Category-Based Blog: Allows readers to filter content by their interest area (legal tech, coding, security).

Project Cards: Provides quick overview with links to detailed project pages.

Static Generation: Ensures fast load times, easy version control, and minimal hosting complexity.

Lessons Learned

• Jekyll Liquid templating is powerful but requires careful attention to variable scope
• SCSS organization with partial imports keeps stylesheets maintainable
• Responsive design requires testing on multiple device sizes
• Clear front matter structure (categories, tags) is essential for content organization

Next Steps

1. Continue expanding blog content with detailed posts
2. Add more project showcase pages as work progresses
3. Optimize images and assets for better performance
4. Implement comment system for blog posts (optional)
5. Create a projects archive or timeline view
6. Add search functionality for blog posts

Reflection

Building this portfolio has been a valuable exercise in web development fundamentals. It serves as both a showcase of my work and a learning project where I can experiment with design and layout decisions. The modular structure makes it easy to add new content and iterate on the design as my skills grow.

This site is a living document of my transition from law to technology, and I plan to continue evolving it as my projects and skills develop.