Midnight Blue & Silver Theme Update

Overview

Successfully implemented a sophisticated Midnight Blue & Silver theme across the entire academic portfolio website, replacing the previous Ocean Blue theme with a more elegant, tech-forward design.

Color Palette

Primary Colors

• Midnight Blue: #1e293b - Main accent color
• Navy: #0f172a - Deep accent
• Slate: #334155, #475569 - Secondary accents
• Silver/Sky: #94a3b8, #38bdf8 - Highlight accents

Background Colors

• White: #ffffff
• Light Slate: #f8fafc, #f1f5f9
• Medium Slate: #e2e8f0

Text Colors

• Primary: #1e293b
• Secondary: #475569, #64748b
• Muted: #94a3b8

Updated Components

1. Homepage (_pages/about.md)

• Research Interest Cards: Midnight blue gradient top border, silver hover effects
• Publication Cards: Midnight blue featured badge, sophisticated shadows
• Experience Timeline: Midnight-to-slate gradient timeline, midnight blue badges
• Updates Section: Slate background with midnight blue accents
• Buttons: Midnight blue gradients with enhanced hover states

2. Publications Page (_pages/publications.md)

✨ Completely Redesigned

Structure

• Page Intro: Research focus statement with slate gradient background
• Featured Work: Highlighted NeurIPS 2025 Polar Sparsity paper
• Conference Publications: ISMM 2024 paper
• Journal Publications: Journal of Supercomputing paper
• Preprints: arXiv papers

Design Features

• Modern card-based layout
• Section headings with icons (⭐, 📚, 📖, 🔬)
• Publication type badges (Conference, Journal, Preprint)
• Venue badges with midnight blue featured styling
• Paper summaries for context
• Primary and secondary button styles
• Sophisticated hover effects with lift animations

3. CV Page (_pages/cv.md)

✨ Completely Redesigned

Sections

1. Header: Centered with tagline and download button
2. Education: Cards with institution, degree, thesis info
3. Professional Experience: Highlighted NVIDIA and Samsung positions
4. Patents: Compact cards with patent details
5. Technical Skills: 4-column grid with categorized skills
   • Systems & Performance
   • Machine Learning
   • Development & Tools
   • Specialized
6. Honors & Awards: Icon-based grid layout

Design Features

• Card-based layout with consistent styling
• Highlight cards for key positions (NVIDIA internships)
• Achievement badges
• Skill tags with hover effects
• Location indicators with 📍 icon
• Quantified achievements in bold
• Professional color scheme throughout

4. Navigation (_sass/_navigation.scss)

• Updated hover gradient: Midnight blue to navy
• Gradient underline on active links
• Modern button styling for dropdowns

5. Custom Styles (_sass/_custom.scss)

Added 600+ lines of new CSS:

Publications Page Styles

• .publications-modern-page
• .page-intro
• .pub-section
• .modern-pub-card (with .featured-pub variant)
• .pub-header, .pub-venue, .pub-title, .pub-authors
• .pub-summary, .pub-actions, .pub-btn

CV Page Styles

• .cv-modern-page
• .cv-header, .btn-cv-download
• .cv-section, .cv-card (with .highlight and .compact variants)
• .cv-institution, .cv-role, .cv-date
• .cv-highlights, .cv-achievements
• .skills-grid, .skill-category, .skill-tags
• .honors-grid, .honor-item

Responsive Design

• Mobile-optimized layouts (< 768px)
• Stacked buttons on mobile
• Single-column grids
• Adjusted padding and font sizes

Design Philosophy

Sophistication

• Professional midnight blue palette conveys authority
• Silver/slate accents add modern, tech-forward feel
• Clean typography with proper hierarchy

User Experience

• Clear visual hierarchy with section icons
• Hover effects provide interactive feedback
• Card-based layouts for easy scanning
• Responsive design for all devices

Academic Credibility

• Structured publication organization
• Quantified achievements highlighted
• Professional terminology and formatting
• Clean, distraction-free layouts

Key Features

Visual Enhancements

1. Gradient Buttons: Midnight blue gradients with smooth transitions
2. Card Elevation: Subtle shadows that lift on hover
3. Border Accents: Midnight blue left borders for emphasis
4. Icon Integration: Contextual icons throughout (🎓, 💼, 🔬, etc.)
5. Badge System: Color-coded badges for venues, roles, achievements

Interactive Elements

1. Lift Animations: Cards translate up on hover
2. Color Transitions: Smooth color changes on interactions
3. Shadow Depth: Dynamic shadow increases on hover
4. Button States: Clear primary/secondary button hierarchy

Content Organization

1. Sectioned Layout: Clear divisions between content types
2. Grid Systems: Flexible grids for skills and honors
3. Timeline Design: Professional experience timeline
4. Featured Content: Visual emphasis on key achievements

Files Modified

Core Files

1. _sass/_custom.scss - Added 600+ lines of modern styling
2. _sass/_navigation.scss - Updated navigation colors
3. _pages/publications.md - Complete redesign
4. _pages/cv.md - Complete redesign
5. _pages/about.md - Color updates (already done)

Backup Files Created

• _pages/cv-old-backup.md - Original CV for reference

Browser Compatibility

• Modern browsers (Chrome, Firefox, Safari, Edge)
• CSS Grid and Flexbox for layouts
• CSS gradients and transforms
• Responsive design with media queries

Performance

• Lightweight CSS (no external dependencies)
• Efficient selectors
• Hardware-accelerated transforms
• Minimal repaints on hover

Future Enhancements (Optional)

• Add dark mode toggle
• Implement print-specific styles
• Add animation on scroll
• Create downloadable CV in PDF format
• Add Google Scholar integration
• Implement citation count badges

Accessibility

• Semantic HTML structure
• Sufficient color contrast ratios
• Focus states for keyboard navigation
• Readable font sizes
• Screen reader friendly

Theme: Midnight Blue & Silver
Status: ✅ Complete
Last Updated: November 12, 2025
Design Style: Elegant, Professional, Tech-Forward