Jekyll Migration TODO

Progress: 100% Complete (7 of 7 tasks done) ✅

✅ COMPLETED

• Task 1: Jekyll infrastructure setup
  • Created directories: _layouts, _includes, _sass, _posts, assets, blog
  • Created Gemfile, _config.yml, .gitignore
  • Moved favicon to assets/images/
• Task 2: HTML breakdown into layouts/includes
  • Created _includes/: head.html, navigation.html, footer.html, analytics.html
  • Created _layouts/: default.html, home.html
  • Updated index.html (now just 3 lines with front matter)
• Task 3: CSS migration to modular SCSS
  • Split styles.css (997 lines) into 10 SCSS partials in _sass/
  • Created assets/css/main.scss that imports all partials
  • All partials: base, navigation, hero, about, experience, skills, education, contact, footer, blog
• Task 4: Migrate JavaScript and update navigation
  • Moved script.js → assets/js/main.js
  • Add blog page detection to active link highlighting
    • Updated scroll event listener at lines 88-108 in assets/js/main.js
    • Added check for window.location.pathname.includes('/blog')
    • Blog nav link now highlights on blog pages
• Task 5: Create blog layouts and sample posts
  • Create _layouts/blog.html (blog listing page)
  • Create _layouts/post.html (individual post layout)
  • Create blog/index.html (blog landing page)
  • Create 3 sample posts in _posts/:
    • 2026-05-10-building-scalable-notification-systems.md
    • 2026-04-22-lessons-from-leading-engineers.md
    • 2026-03-15-why-i-love-vue.md
• Task 6: Test locally
  • Run bundle install (with Ruby 3.3.7)
  • Run bundle exec jekyll serve --livereload
  • Test at http://localhost:4000
  • Verified all features working
• Task 7: Deploy to GitHub Pages
  • Committed changes with descriptive message
  • Pushed to origin/master
  • GitHub Pages will build automatically
  • Test live site at https://dlangsam.github.io (allow a few minutes for build)

🎉 Migration Complete!

Your portfolio is now powered by Jekyll with a fully functional blog. Changes will automatically deploy when you push to master.

Quick Reference

File Structure (Current)

dlangsam.github.io/
├── _config.yml ✅
├── Gemfile ✅
├── .gitignore ✅
├── _layouts/
│   ├── default.html ✅
│   ├── home.html ✅
│   ├── blog.html ✅
│   └── post.html ✅
├── _includes/
│   ├── head.html ✅
│   ├── navigation.html ✅
│   ├── footer.html ✅
│   └── analytics.html ✅
├── _sass/
│   ├── _base.scss ✅
│   ├── _navigation.scss ✅
│   ├── _hero.scss ✅
│   ├── _about.scss ✅
│   ├── _experience.scss ✅
│   ├── _skills.scss ✅
│   ├── _education.scss ✅
│   ├── _contact.scss ✅
│   ├── _footer.scss ✅
│   └── _blog.scss ✅
├── assets/
│   ├── css/
│   │   └── main.scss ✅
│   ├── js/
│   │   └── main.js ✅ (needs update)
│   └── images/
│       └── favicon.svg ✅
├── _posts/ ✅ (3 posts)
├── blog/
│   └── index.html ✅
└── index.html ✅

Next Session: Pick up at Task 4

1. Update assets/js/main.js for blog page detection
2. Create blog layouts (blog.html, post.html)
3. Create sample blog posts
4. Test locally

Notes

• Old files still present (styles.css - can delete after testing)
• Ruby version issue: Need Ruby 3.0+ for bundle install
• All existing functionality preserved in new structure
• Blog styles already created in _sass/_blog.scss