Modern Design Updates - Compact Pastel Green Theme

Summary of Changes

I’ve modernized your academic website with a clean, compact design using a pastel green theme. Here are the key improvements:

1. Removed Large Purple Hero Section

• Removed the large “Building Efficient AI Systems” header block
• Returned to a cleaner, more traditional academic layout
• Content now starts immediately after the page title

2. Pastel Green Color Scheme

• Primary color: #22c55e (vibrant green)
• Secondary color: #16a34a (darker green)
• Background colors: Light mint green gradients (#f0fdf4, #dcfce7)
• Links: Green tones instead of purple

3. Compact Design Elements

• Research Interest Cards: Smaller padding (1rem instead of 2rem), tighter spacing
• Publications: Reduced padding to 1rem, smaller badges, compact button sizing
• Experience Timeline: Smaller badges (2.4rem instead of 3.5rem), tighter spacing
• Updates Section: Compact design with smaller date badges

4. Fixed Sidebar

• Removed the glassmorphism effect that was causing display issues
• Returned to clean, simple sidebar design
• Maintained responsive behavior

5. Typography

• Modern font stack with Inter and Fira Code
• Slightly reduced font sizes for more compact look
• Better line-height for readability (1.4-1.65 instead of 1.75-1.8)

6. Updated Files

• _pages/about.md - Removed hero section, cleaner structure
• _sass/_custom.scss - New compact pastel green components
• _sass/_variables.scss - Updated colors to green theme
• _sass/_sidebar.scss - Fixed sidebar styling
• _sass/_masthead.scss - Removed blur effects
• _sass/_base.scss - Added smooth scrolling
• _includes/head.html - Added Google Fonts (Inter, Fira Code)
• assets/js/custom.js - Added smooth scroll animations

7. Responsive Design

• Mobile-optimized layouts
• Flexible grid systems
• Touch-friendly button sizes

8. Interactive Elements

• Subtle hover effects with green color transitions
• Smooth transforms on cards (translateY(-3px) instead of larger movements)
• Better focus states for accessibility

How to Test

1. Run the development server:

   ./run-docker.sh
   

2. Open your browser to http://localhost:4000

3. Check:
   • Homepage looks clean without large purple block
   • Green color scheme throughout
   • Compact, professional appearance
   • Sidebar displays correctly
   • Mobile responsiveness

Backup

A backup of your previous custom styles has been saved to: _sass/_custom.scss.backup

Customization

To adjust colors, edit _sass/_variables.scss:

• $primary-color: Main green color
• $link-color: Link colors
• Other theme colors

To adjust spacing/sizing, edit _sass/_custom.scss:

• Card padding
• Font sizes
• Margin/spacing values