Website Redesign Implementation Plan

Overview

Transform the current academic Jekyll site into a minimalist, blog-focused personal website inspired by dbreunig.com.

Target Design Characteristics

• Minimalist aesthetic: Clean typography, generous whitespace, neutral color palette
• Text-first approach: Remove visual clutter, focus on readability
• Blog-centric: Recent writing and featured articles prominently displayed
• Simple navigation: Clean header without heavy sidebar
• Professional but personal: Showcase work while maintaining approachable tone

Phase 1: Layout & Structure Redesign ✅ COMPLETED

1.1 Create New Minimalist Homepage Layout ✅

Files: _layouts/home.html, _layouts/default-minimal.html (new)

Completed Changes:

• ✅ Created completely new homepage layout without sidebar
• ✅ Structure includes:
  • Optional hero image header
  • Brief bio/introduction (condensed to 2 paragraphs)
  • Link section (Publications, Resume, GitHub, Twitter)
  • Recent blog posts (10 most recent)
• ✅ Created minimal default layout without navigation header

Results: Clean, Drew-style homepage with no sidebar or navigation clutter.

1.2 Simplify Main Layout ✅

Files: _layouts/default-minimal.html, _includes/masthead-minimal.html (new)

Completed Changes:

• ✅ Created new minimal default layout
• ✅ Created minimal masthead with just site name
• ✅ No navigation menu (just name/home link)
• ✅ Removed sidebar completely
• ✅ Removed author profile boxes

Results: Bare bones layout focusing entirely on content.

1.3 Create Clean Blog Post Layout ✅

File: _layouts/minimal.html (new)

Completed Changes:

• ✅ Created minimal layout for pages/posts
• ✅ Uses minimal default (no sidebar)
• ✅ Clean typography with optimal reading width
• ✅ Minimal metadata display (just date)
• ✅ No sidebar, no author profile

Results: Reading-focused layout without distractions.

1.4 Homepage Styling ✅

File: _sass/_home.scss (new)

Completed Changes:

• ✅ Custom styles for homepage
• ✅ Hero image support
• ✅ Post list styling
• ✅ Minimal navigation styles
• ✅ Responsive design

Results: Polished, professional homepage styling.

Phase 2: Visual Design & Styling ✅ COMPLETED

2.1 Typography Overhaul ✅

File: _sass/_variables.scss

Completed Changes:

• ✅ Increased base font size: 16px → 18px
• ✅ Body font: Georgia serif for readable, literary feel
• ✅ Headings: Clean sans-serif for contrast
• ✅ Simplified type scale (more restrained sizing)
• ✅ Line height: 1.7 for body, 1.3 for headings
• ✅ Max content width: 720px for optimal reading

Results: Text is significantly more readable with classic serif body font and generous spacing.

2.2 Color Scheme Simplification ✅

File: _sass/_variables.scss

Completed Changes:

• ✅ Neutral palette implemented:
  • Background: Clean white (#fff)
  • Text: Dark gray (#2a2a2a)
  • Muted text: Medium gray (#5a5a5a)
  • Borders: Light gray (#e0e0e0)
• ✅ Links: Dark gray (subtle, no bright blue)
• ✅ Removed box shadows (set to none)
• ✅ Kept brand colors for compatibility

Results: Professional, minimalist palette that puts content first.

2.3 Layout & Spacing Updates ✅

Files: _sass/_page.scss, _sass/_masthead.scss, _sass/_sidebar.scss

Completed Changes:

• ✅ Content max-width: 900px (increased from 720px for better readability)
• ✅ Increased margins: 3em top, 4em bottom
• ✅ Increased padding: 2em horizontal
• ✅ Paragraph spacing: 1.5em
• ✅ Heading spacing: 2em top, 0.75em bottom
• ✅ Masthead: Cleaner, aligned with content width
• ✅ Sidebar: Removed completely from all pages (CV, publications, blog posts)
• ✅ Avatar: Subtle rounded corners (not circles)
• ✅ Removed Susy grid constraints - replaced with simple width: 100% rules
• ✅ CV/Publications pages: Wider layout (900px) via .main--wide class

Results: Generous whitespace throughout, comfortable reading width across all pages.

2.4 Remove Visual Clutter ✅

Files: _sass/_footer.scss, _sass/_buttons.scss, _sass/_sidebar.scss, _sass/_page.scss, _sass/_home.scss

Completed Changes:

• ✅ Links: Subtle bottom border instead of underline
• ✅ Links hover: Light blue background (#e3f2fd) for visual feedback
• ✅ Removed box shadows everywhere
• ✅ Footer: White background, minimal styling
• ✅ Buttons: Outline style, not filled
• ✅ Author profile: Removed from all pages
• ✅ Navigation: Less bold, subtle colors
• ✅ Social sharing: Removed from blog posts
• ✅ Related posts: Removed from blog posts

Results: Clean, refined look without visual distractions.

Build Status ✅

• ✅ Site builds successfully: bundle exec jekyll build
• ✅ All SCSS compiles without errors
• ✅ No breaking changes

Phase 3: Content Reorganization

3.1 Simplify Navigation ✅

Files: _data/navigation.yml, _includes/masthead.html, _pages/blog.md

Completed Changes:

• ✅ Reduced to essential links: Home and Blog only
• ✅ Homepage has no navigation header (only Recent Writing section)
• ✅ Blog posts, CV, and publications pages use unified navigation (Home/Blog)
• ✅ Created blog archive page at /blog/
• ✅ Added “All posts →” link on homepage for blog access
• ✅ Updated minimal.html layout to use standard masthead

Results: Clean, simple navigation structure focused on content.

3.2 Create Unified Work/Research Page

File: _pages/work.md (new)

Changes:

• Combine publications, projects, portfolio into single page
• Sections:
  • Featured work (2-3 highlights)
  • Publications (chronological list)
  • Projects (select interesting ones)
• Clean, scannable format

Dependencies: None

3.3 Redesign About Page ✅

File: _pages/about.md

Completed Changes:

• ✅ Condensed to 2 concise paragraphs
• ✅ More narrative, less CV-like
• ✅ Links to Publications, Resume, GitHub, Twitter
• ✅ Uses new home layout
• ✅ Removed job search notice (can be updated)

Results: Clean, professional intro that gets straight to the point.

3.4 Set Up Blog Collections ✅

File: _config.yml

Completed Changes:

• ✅ Configured posts to use single layout with author_profile: false
• ✅ Disabled share buttons on blog posts (share: false)
• ✅ Disabled related posts section (related: false)
• ✅ Posts now display with clean, minimal layout

Results: Blog posts focus entirely on content without distractions.

Phase 4: Technical Cleanup

4.1 Remove Unused Collections ✅

File: _config.yml

Completed Changes:

• ✅ Removed _teaching collection (collection and directory deleted)
• ✅ Removed _talks collection (collection and directory deleted)
• ✅ Kept _portfolio collection for future use
• ✅ Kept _publications collection
• ✅ Kept _posts for blog
• ✅ Removed collection defaults for teaching and talks from _config.yml

Results: Cleaned up unused collections while preserving portfolio for flexibility.

4.2 Clean Up Unused Templates ✅

Files: _includes/, _layouts/

Completed Changes:

• ✅ Removed unused layouts:
  • archive-taxonomy.html (deleted)
  • talk.html (deleted - talks collection removed)
  • splash.html (deleted - not used)
• ✅ Kept archive.html layout (needed by several pages)
• ✅ Kept all include files for potential future expansion
• ✅ Site builds successfully without warnings

Results: Removed truly unused templates while keeping flexibility for future needs.

4.3 Optimize Assets

Files: assets/, _sass/vendor/

Changes:

• Remove unused vendor CSS (Susy grid, etc.)
• Simplify Font Awesome or replace with SVG icons
• Optimize images
• Remove unnecessary JavaScript

Dependencies: Phase 2

4.4 Update Site Configuration

File: _config.yml

Changes:

• Update site description
• Update author bio (shorter)
• Configure new navigation
• Update social links (minimal set)
• Remove unused plugin configurations

Dependencies: All previous phases

Phase 5: Content Migration & Polish

5.1 Migrate Existing Blog Posts

Files: _posts/

Changes:

• Review and update frontmatter
• Ensure consistent formatting
• Add categories/tags
• Write excerpts if missing
• Update image paths if needed

Dependencies: Phase 1, Phase 3

5.2 Create Featured Content

Changes:

• Select 2-3 featured publications/projects for homepage
• Write brief descriptions
• Ensure good mix of work types

Dependencies: 3.2

5.3 Polish and Test

Changes:

• Test responsive design on mobile
• Check all internal links
• Verify GitHub Pages compatibility
• Test build locally
• Review typography and spacing

Dependencies: All previous phases

Implementation Order

1. Phase 2 (Visual Design) - Start with typography and colors as foundation
2. Phase 1 (Layouts) - Build new layouts with updated styles
3. Phase 3 (Content) - Reorganize content structure
4. Phase 4 (Cleanup) - Remove unused code and optimize
5. Phase 5 (Polish) - Final touches and testing

Key Files to Create/Modify

New Files ✅

• ✅ _layouts/home.html - New homepage layout
• ✅ _layouts/default-minimal.html - Minimal layout without header
• ✅ _layouts/default-noheader.html - Layout for homepage
• ✅ _layouts/minimal.html - Clean layout for CV/publications
• ✅ _includes/masthead-minimal.html - Minimal masthead
• ✅ _pages/blog.md - Blog archive page
• ✅ _sass/_home.scss - Homepage specific styles
• ✅ REDESIGN_PLAN.md - This document

Major Modifications ✅

• ✅ _config.yml - Site configuration (disabled sidebar, share, related posts)
• ✅ _sass/_variables.scss - Typography (Lora serif, 18px base, 900px width) and colors
• ✅ _sass/_page.scss - Page layout (removed Susy grid, added wider CV/publications layout, link hover effects)
• ✅ _sass/_home.scss - Homepage styles (hero image, post list, navigation)
• ✅ _pages/about.md - About page rewrite (condensed to 2 paragraphs)
• ✅ _data/navigation.yml - Simplified navigation (Home and Blog only)

Files to Consider Removing

• Most of _sass/vendor/ (Susy, Breakpoint - if not needed)
• Unused collection templates in _layouts/
• Complex archive templates
• Unused includes

Design Decisions to Confirm

1. Font choices: System fonts vs. web fonts?
2. Featured content: Which 2-3 works to highlight?
3. Blog categories: How to organize posts?
4. Navigation: Keep 3-4 main links, which ones?
5. Social links: Which platforms to include?
6. CV: Separate detailed page or PDF download?

Success Criteria

• Homepage loads with clean, minimalist design
• Blog posts display with excellent readability
• Navigation is simple and intuitive (2 links: Home and Blog)
• Sidebar removed from all pages (homepage, blog posts, CV, publications)
• Consistent 900px width for all content
• Light blue hover effects on all links
• No social sharing or related posts sections
• Mobile-responsive design works well (needs testing)
• All existing content is accessible
• Design feels cohesive and professional
• GitHub Pages builds successfully