Website Improvement Roadmap

A structured plan to make diyazy.github.io more interesting, engaging, and cool.

Created: 2025-01-30 Status: In Progress

Table of Contents

• Current State Summary
• Phase 1: Foundation
• Phase 2: Content & Engagement
• Phase 3: About & Brand
• Phase 4: UX Enhancements
• Phase 5: Design Modernization
• Phase 6: Advanced Features
• Content Strategy
• Technical Debt

Current State Summary

Strengths

• Modern CSS Grid layout with glassmorphic effects
• Responsive design foundation (768px breakpoint)
• WebP image optimization with PNG fallbacks
• Clean Jekyll structure
• Medium sync script for content import
• Diverse content topics (tech, DIY, speculative design)

Key Issues

• Incomplete homepage with “tbd” placeholder sections
• Medium dependency (truncated posts linking to Medium)
• Sparse About page (only 2 paragraphs)
• Missing blog features (search, comments, sharing)
• No CSS variables or design system
• No dark mode support
• Missing SEO essentials (meta descriptions, Open Graph tags)

Phase 1: Foundation

Priority: High Goal: Complete the basics and fix critical gaps Status: COMPLETED

Tasks

• Remove/replace “tbd” sections on homepage
  • Removed Fishing placeholder
  • Removed Science placeholder
  • Removed empty panels
  • Added “Latest Post” and “About Me” sections
• Add essential meta tags
  • Meta descriptions for all pages
  • Open Graph tags (og:title, og:description, og:image)
  • Twitter Card tags
  • Canonical URLs
• Create 404 error page
  • Design friendly 404 page
  • Add navigation back to home
• Add sitemap.xml
  • Install jekyll-sitemap plugin
• Add robots.txt
  • Create basic robots.txt file
• Fix navigation active state
  • Highlight current page in navigation

Files Modified

• index.html - Redesigned homepage with meaningful content
• _layouts/default.html - Added meta tags, OG tags, Twitter cards
• _includes/header.html - Added active navigation state
• _config.yml - Added site metadata, author info, plugins
• assets/css/main.css - Added active nav styles
• assets/css/index-page.css - New grid layout and styles
• about.html - Added description
• blog.html - Added description
• diy.html - Added description
• Gemfile - Added jekyll-sitemap plugin
• New: 404.html
• New: robots.txt

Phase 2: Content & Engagement

Priority: High Goal: Make content more engaging and interactive Status: COMPLETED (Giscus needs configuration)

Tasks

• Resolve Medium content strategy
  • Decision: Site is primary hub, Medium for text content
  • Added “Originally published on Medium” badges with links
• Add reading time to posts
  • Calculate words / 200 wpm
  • Display in post header and blog listing
• Implement comments system
  • Choose provider: Giscus (GitHub Discussions)
  • Add to post template
  • Style to match site design
  • ACTION REQUIRED: Configure Giscus repo ID and category ID (see setup instructions below)
• Add social sharing buttons
  • Twitter/X share
  • LinkedIn share
  • Copy link button
• Create “Related Posts” section
  • Show up to 3 posts with matching tags
  • Add to bottom of post template
• Add post navigation
  • Previous post link
  • Next post link
• Display tags on posts
  • Show tags in post meta section

Giscus Setup Instructions

To enable comments, you need to:

1. Go to https://giscus.app
2. Enable GitHub Discussions on your repo (Settings > Features > Discussions)
3. Create a “Blog Comments” category in Discussions
4. Fill in the form on giscus.app with your repo details
5. Copy the data-repo-id and data-category-id values
6. Update _layouts/post.html with these values

Files Modified

• _layouts/post.html - Added all Phase 2 features
• assets/css/post.css - Styles for new features
• blog.html - Added reading time
• diy.html - Added reading time

Phase 3: About & Brand

Priority: Medium Goal: Establish personal brand and expand About page Status: COMPLETE (awaiting screenshot assets and resume PDF)

Tasks

• Expand About page
  • Professional summary/bio
  • Career timeline or milestones (6 key roles from 2013-2025)
  • Technical skills with categories (condensed from full list)
  • Education (Master’s from Tampere, Bachelor’s from EKSTU)
  • Interests and hobbies
  • Social media links (GitHub, LinkedIn, Medium, Toptal)
  • Contact method or form (can add later)
• Create project showcase
  • Design project cards
  • Add 3-5 notable projects (TopTop.dev, EuroJackpotStats, iot-edge, + 3 coming soon)
  • Include screenshots/images (placeholders ready, awaiting assets)
  • Link to repos or live demos
• Personal branding
  • Create simple logo or wordmark (“diyaz.” with gold accent)
  • Define brand colors (primary: #2a2521, accent: #c9a227 gold)
  • CSS variables design system created
  • Consistent visual identity across pages
• Add downloadable resume/CV
  • Create PDF version (awaiting file from user)
  • Add download button on About page

Files Modified

• about.html - Complete redesign with skills, expertise, experience timeline, education, resume download, social links
• _config.yml - Added LinkedIn profile, updated site title to “diyaz”
• _includes/header.html - Updated to “diyaz.” brand logo
• _data/navigation.yml - Added Projects page
• _layouts/default.html - Added variables.css
• New: projects.html - Projects showcase page
• New: assets/css/projects.css - Project cards styling
• New: assets/css/about.css - About page styles including timeline, education, resume sections
• New: assets/css/variables.css - Brand design system (colors, spacing, typography)
• New: assets/images/projects/ - Directory for project screenshots

Phase 4: UX Enhancements

Priority: Medium Goal: Improve navigation and content discovery Status: COMPLETE

Tasks

• Add search functionality
  • Implement Simple-Jekyll-Search
  • Create search UI component in header
  • Index all posts with search.json
• Tag filtering UI on blog page
  • Display all tags as clickable buttons
  • Filter posts client-side
• Add breadcrumb navigation
  • Show path: Home > Blog > Post Title
  • Style consistently
• Improve blog listing
  • Add post thumbnails/featured images
  • Show tags on listing
  • Better excerpt display
  • Client-side pagination (5 posts per page)
• Add table of contents for long posts
  • Auto-generate from h2 headings
  • Collapsible TOC at top of post
• Keyboard navigation
  • Arrow keys for prev/next post
  • Slash key to focus search

Files Modified

• blog.html - Tag filter, thumbnails, pagination
• _layouts/post.html - Breadcrumbs, TOC, keyboard nav
• _layouts/default.html - Search CSS/JS
• _includes/header.html - Search component
• assets/css/blog.css - Tags, pagination, thumbnails
• assets/css/main.css - Breadcrumbs
• assets/css/post.css - TOC styles
• New: _includes/search.html - Search UI
• New: _includes/breadcrumbs.html - Breadcrumb nav
• New: _includes/toc.html - Table of contents
• New: assets/js/search.js - Search functionality
• New: assets/css/search.css - Search styles
• New: search.json - Search index

Phase 5: Design Modernization

Priority: Medium Goal: Create cohesive, modern design system Status: COMPLETE

Tasks

• Create CSS custom properties (variables)
  • Color palette (primary, secondary, accent, text, background)
  • Spacing scale (4px, 8px, 16px, 24px, 32px, etc.)
  • Typography scale
  • Border radius values
  • Shadow definitions
• Implement dark mode
  • Detect system preference with prefers-color-scheme
  • Add manual toggle button
  • Store preference in localStorage
  • Dark variants for all colors
  • Giscus comments theme sync
• Improve typography
  • Clear heading hierarchy (h1 > h2 > h3)
  • Better line height and letter spacing
  • Consistent font weights
  • Font smoothing for better rendering
• Add animations and transitions
  • Hover effects on links, buttons, and cards
  • Smooth scroll behavior
  • Interactive element transitions
  • Focus states for accessibility
• Responsive improvements
  • Added tablet breakpoint (~1024px)
  • Improved mobile touch targets (44px minimum)
  • Fixed mobile layouts across all pages
  • Small mobile breakpoint (~480px)
• Consolidate and organize CSS
  • Created utility classes (sr-only, text-center, text-muted, font-mono)
  • All files using CSS variables consistently
  • Removed hardcoded colors

Files Modified

• All CSS files in assets/css/ updated with variables
• _layouts/default.html - Added dark mode toggle script
• _includes/header.html - Theme toggle button
• assets/css/variables.css - Complete design system
• assets/js/theme-toggle.js - Theme switching logic

Phase 6: Advanced Features

Priority: Low (nice to have) Goal: Add sophisticated features for growth

Tasks

• Newsletter signup (deferred)
  • Choose provider:
    • Buttondown (recommended) - Free 100 subs, developer-friendly, Markdown
    • EmailOctopus - Free 2,500 subs, generous tier
    • ConvertKit - Free 1,000 subs, creator-focused
  • Sign up and get embed form code
  • Add form to footer or dedicated section
  • Example embed:

    <form action="https://buttondown.email/api/emails/embed-subscribe/USERNAME" method="post">
      <input type="email" name="email" placeholder="Your email">
      <button type="submit">Subscribe</button>
    </form>
    

• Analytics (deferred)
  • Choose provider:
    • GoatCounter (recommended) - Free, simple, no cookie banner needed
    • Umami - Free self-host (HomeLab!) or $9/mo cloud
    • Plausible - $9/mo or self-host, privacy-friendly
    • Cloudflare Analytics - Free if using Cloudflare DNS
  • Sign up and get tracking script
  • Add to _includes/analytics.html and include in default.html
  • Example (GoatCounter):

    <script data-goatcounter="https://YOURSITE.goatcounter.com/count"
            async src="//gc.zgo.at/count.js"></script>
    

• RSS feed improvements
  • Full content in feed (content:encoded)
  • Feed autodiscovery link in head
  • RSS link in footer with icon
• Performance optimization
  • Native lazy loading for images (loading=”lazy”)
  • Async image decoding (decoding=”async”)
  • Preload hints for critical CSS and JS
  • Optimize and compress images (manual task)
  • Add service worker for offline support (optional)
• Accessibility audit
  • Proper alt text handling for decorative images
  • ARIA landmarks (banner, navigation, main, contentinfo)
  • Skip navigation link
  • Focus-visible styles for keyboard navigation
  • Proper button types and labels
  • Test with screen reader (manual task)
  • Verify color contrast (manual task)
• Structured data (SEO)
  • JSON-LD for WebSite (all pages)
  • JSON-LD for BlogPosting (post pages)
  • Author information included

Files to Modify

• _layouts/default.html
• _layouts/post.html
• _includes/footer.html
• _config.yml
• New: _includes/newsletter.html
• New: _includes/analytics.html
• New: feed.xml (improve existing)

Content Strategy

Decisions to Make

• Primary vs Secondary Platform
  • Is this site primary or is Medium primary?
  • Should full content live here or on Medium?
• Content Pillars (pick 2-3 focus areas)
  • Technical tutorials (.NET, C#, React)
  • DIY/Maker projects
  • Speculative design
  • Career/professional insights
  • Other: _______
• Posting Schedule
  • Weekly
  • Bi-weekly
  • Monthly
  • Other: _______

Content Ideas

• Create a “Start Here” or “Best Of” page
• Write a detailed “About My Setup” post (HomeLab)
• Create series/collections (e.g., “DIY Furniture Series”)
• Add case studies for projects
• Write “lessons learned” retrospectives

Technical Debt

Code Quality

• Consolidate layouts
  • post.html duplicates HTML structure from default.html
  • Refactor to extend default layout
• CSS organization
  • Multiple CSS files without clear structure
  • Consider SCSS with partials
• Remove unused code
  • Audit for dead CSS
  • Remove placeholder content

Configuration

• Enhance _config.yml
  • Add author information
  • Add social links
  • Configure plugins
  • Set up collections if needed
• Standardize frontmatter
  • Create template for new posts
  • Document required fields

Progress Log

Resources

Tools

• Lunr.js - Client-side search
• Giscus - GitHub-based comments
• Plausible - Privacy-friendly analytics
• Buttondown - Simple newsletter

Inspiration

• Jekyll Themes - Design inspiration
• Minimal Mistakes - Feature-rich Jekyll theme
• Personal Site Examples - GitHub collection

Documentation

• Jekyll Docs
• Liquid Template Language
• GitHub Pages