DEV Community: Du-Hyeon, Kim

Spectrum-Eager: A Minimal Jekyll Theme for Your Personal Site

Du-Hyeon, Kim — Fri, 19 Dec 2025 16:56:12 +0000

Introduction

I'm excited to share Spectrum-Eager, a minimal and elegant Jekyll theme I've been working on for personal websites and blogs. If you're looking for a clean, modern theme with a focus on content and user experience, this might be perfect for you!

What Makes Spectrum-Eager Special?

🎨 Section-Based Layout

The theme uses a unique section-based approach that makes content organization intuitive and visually appealing. Each section flows naturally into the next, creating a smooth browsing experience.

🌓 Dark/Light Mode

Built-in theme toggle that respects user preferences and provides a seamless transition between modes.

⚡ Fast & Lightweight

No heavy frameworks or dependencies. Just clean, efficient code that loads quickly.

🚀 Easy Setup

Get started in minutes with remote-theme support. One command and you're ready to go:

curl -fsSL https://raw.githubusercontent.com/dudududukim/spectrum-eager/theme/setup-remote-theme.sh | bash

📱 Fully Responsive

Looks great on all devices - from mobile phones to desktop monitors.

Perfect For

Personal portfolios
Tech blogs
Project showcases
Academic profiles

Get Started

Demo: https://dudududukim.github.io/spectrum-eager/

Repository: https://github.com/dudududukim/spectrum-eager

The theme is MIT licensed and completely free to use. I'd love to hear your feedback and see what you build with it!

What's Next?

I'm actively working on improvements and would love to hear what features you'd like to see. Feel free to open issues or contribute to the project.

Happy building! 🎉

Appendix: Visual Showcase of My Jekyll Theme - Gallery Features & File Explorer Navigation

Du-Hyeon, Kim — Mon, 22 Sep 2025 04:59:00 +0000

Appendix: Visual Showcase of My Jekyll Theme

Hey everyone! 👋

Following up on my previous post about the Jekyll theme, I wanted to share a visual appendix showcasing the key features and design elements. Sometimes seeing is believing, right?

🖼️ Visual Showcase

Here's a comprehensive look at the theme in action:

Homepage Gallery Track	Tech Bites Section

About Page	Tech Article (Dark Theme)

Image Section

What You're Seeing

🗂️ File Explorer Navigation

Notice the cute file path UI in the top-left corner? It shows your current location like a file explorer, making navigation intuitive and fun.

Dynamic Gallery Features

The gallery track automatically scrolls through images - perfect for developers who also enjoy photography as a hobby.

🎨 Clean Design Language

From the homepage to individual articles, the theme maintains a consistent, clean aesthetic that works well for both technical content and visual showcases.

🌙 Theme Switching

The dark theme example shows how the design adapts while maintaining readability and visual hierarchy.

Quick Links

** Live Demo:** https://dudududukim.github.io/spectrum/

💻 GitHub Repository: https://github.com/dudududukim/spectrum

Perfect For Photography Enthusiasts

If you're a developer who also loves photography, this theme's gallery features make it easy to showcase your work alongside your technical content. The dynamic scrolling and clean layout let your images speak for themselves.

Technical Details

Jekyll 4.4+ with modern SCSS
Mobile-first responsive design
GitHub Pages ready with automated deployment
Light & dark theme support
SEO optimized with proper meta tags

What's Next?

I'm always looking for feedback and suggestions. What features would you like to see? Any improvements to the gallery system? Let me know in the comments!

Previous Post: Building a Jekyll Theme with File Explorer Navigation

Built with ❤️ and Jekyll

This appendix showcases the visual elements that make the theme special - from the intuitive file explorer navigation to the dynamic gallery features perfect for photography enthusiasts.

Building a Jekyll Theme with File Explorer Navigation - Perfect for Students, Researchers & Hobbyists

Du-Hyeon, Kim — Sun, 21 Sep 2025 15:37:41 +0000

Building a Jekyll Theme with File Explorer Navigation

Hey Dev.to community! ��

I've been working on a Jekyll theme for the past few months and wanted to share it with you all. The inspiration came from wanting something that works well for different types of users - from undergrads documenting their projects to researchers sharing papers, and even hobbyists building their portfolios.

Live Demo & Source Code

�� Live Demo: https://dudududukim.github.io/spectrum/

💻 GitHub Repository: https://github.com/dudududukim/spectrum

The Problem I Was Trying to Solve

Most Jekyll themes are either blog-focused OR portfolio-focused, but I needed something that could handle both academic work and personal projects. I also wanted navigation that felt more intuitive than the typical menu systems.

What Makes This Theme Different

🗂️ Path-Finder Inspired Navigation

The nav bar shows your current location like a file explorer:

Home > Tech Bites > Specific Article
Home > Films > Photo Gallery

I found this really helpful for users to understand where they are on the site, especially when dealing with multiple content types.

🎨 Primary Color Customization

Easy to match your brand or personal style with a simple config change in _config.yml. One color change transforms the entire site's appearance.

📱 Dynamic Gallery Scrolling

The gallery track automatically scrolls through images, which works great for showcasing projects or photography without manual navigation.

🎯 Multi-Purpose Design

Works for:

Academic portfolios - Research papers, project documentation
Personal blogs - Tech insights, tutorials, life updates
Creative showcases - Photography, art, design work
Student projects - Course work, side projects, learning notes

Technical Stack

Jekyll 4.4+ - Latest stable version
SCSS with CSS custom properties - For theming flexibility
Vanilla JavaScript - No framework dependencies
GitHub Pages ready - Includes workflow file
Mobile-first responsive design

Key Features

✅ Responsive Design - Works from mobile to desktop
✅ Light & Dark Theme - Automatic system preference detection
✅ SEO Optimized - Proper meta tags and structured data
✅ Accessibility - ARIA attributes and keyboard navigation
✅ Fast Loading - Optimized CSS/JS and image handling
✅ Easy Setup - Clone, configure, deploy

Quick Start

# Clone the repository
git clone https://github.com/dudududukim/spectrum.git
cd spectrum

# Install dependencies
bundle install

# Configure your site
# Edit _config.yml to update site details and colors

# Run locally
bundle exec jekyll serve

# Visit http://localhost:4000

What I Learned

Building this theme taught me a lot about:

Jekyll's flexibility with liquid templating
CSS custom properties for dynamic theming
Mobile-first responsive design principles
GitHub Actions for automated deployment

Questions for the Community

What navigation patterns do you find most intuitive?
Are there any Jekyll limitations you've run into with custom themes?
What features would make Jekyll themes more accessible to non-developers?
How do you handle multi-content-type sites in your projects?

Contributing

This is completely free and open source. If you find it useful or have suggestions for improvements, feel free to:

⭐ Star the repository
🍴 Fork and submit pull requests
🐛 Report issues
💬 Share feedback

Final Thoughts

I built this because I believe there's room for more diverse Jekyll themes in the ecosystem. Most themes focus on a single use case, but I wanted something flexible enough for the varied needs of students, researchers, and creators.

The file explorer navigation might not be for everyone, but I've found it really helpful for sites with multiple content types. What do you think about this approach?

Built with ❤️ and Jekyll

This is completely free to use, modify, and distribute. I'm not selling anything - just sharing something I built that others might find useful.