Building My Personal Blog: Art, Code, and Clean Design
Over the last few weeks, I’ve been building a personal blog and portfolio site from scratch using Jekyll, GitHub Pages, and a lot of experimentation. My goal? A clean, dark-mode site where I can share my tech posts, generative art experiments, and a bit about who I am — without sacrificing simplicity or aesthetics.
Why Jekyll?
I chose Jekyll because it’s lightweight, flexible, and works natively with GitHub Pages. No databases, no complex frameworks — just Markdown files, layouts, and a few smart configurations. It fits perfectly with how I like to work: direct, efficient, and version-controlled.
The Design Vision
The vibe I wanted was simple but thoughtful:
- Dark mode by default
- A semi-transparent header with clean spacing
- A central background image (a torus knot from one of my artworks!)
- Minimal, readable typography
- Responsive layout for both art and code readers
To avoid clutter, I split my SCSS into modular files:
_variables.scss_header.scss_gallery.scss_blog.scss_layout.scss
Then I bundled everything via assets/src/style.scss using front matter and imported it properly.
Gallery Page: CNC Meets Code
I create generative art using torus knots, CNC plotters, and acrylic. For the gallery, I wanted to:
- Display artwork in a clean grid
- Include details like size, medium, and title
- Load content dynamically from
_data/artworks.yml - Avoid hardcoding image tags in HTML
Each piece has its own YAML entry, and the page loops through those to build a responsive layout. I added hover effects, subtle shadows, and a scroll-fix to avoid jank from multiple scroll containers.
Blog Setup and Structure
The blog follows a card-based layout with:
- Title
- Excerpt
- Post date
- Tags
- Optional preview image (shown on the right)
The entire card is clickable, and blog posts are written in plain Markdown under _posts/. For clean URLs, I added this to _config.yml:
```yaml permalink: /blog/:title/