Today marked a huge leap forward in transforming my portfolio from a basic desktop-only layout into a modern, responsive web experience. The upgrades focused on dark mode, mobile optimization, and a more professional, maintainable codebase.

This was more than a design refresh — it was a complete rethinking of how users interact with the site across different devices, light preferences, and screen sizes.

🌙 Dark Mode / Light Mode Toggle

One of the most impactful features added today was a fully functional theme switcher, allowing users to toggle between light and dark modes with smooth transitions and persistent settings.

Key Features:

  • Dual themes:
    • Light: Warm cream backgrounds with golden/brown accents
    • Dark: Deep backgrounds with gold highlights
  • Smooth transitions between modes using CSS animations
  • localStorage integration to remember the user’s preferred theme
  • Final design: Pill-shaped toggle with icon + label (e.g., “Dark Mode”)

This was implemented with minimalism in mind: accessible, visible, and clean across all breakpoints.

📱 Full Mobile Optimization

The site now adapts beautifully across devices — from small phones to wide desktop monitors. It’s no longer “mobile accessible”; it’s mobile first.

Breakpoints included:

  • Small phones (<480px): single-column stack layout, centered elements
  • Medium tablets/landscape phones: balanced, adaptive layout
  • Large screens: full-width grid and multi-column formats

Mobile Features:

  • Hero section now resizes profile image and adjusts badge layout dynamically
  • Section headers scale for readability without losing visual impact
  • Navigation, footers, and content cards all reposition cleanly on smaller screens
  • Lab grid transforms into a vertical stack for touch navigation

🎨 UI & UX Refinements

This wasn’t just about technical function — today was also about visual polish and usability.

  • Theme toggle UI evolution:
    • Started in corner → moved to top center → redesigned as a pill toggle with label
  • Responsiveness for key content areas:
    • Certifications now use responsive column count
    • Labs display as adaptive cards
    • Hero content, badges, and banners flow more intuitively on mobile

Design Aesthetic:

  • Maintained brand feel with a dark tech theme and warm mustard/gold highlights
  • Smoothed transitions and minimized shadows for a more modern UI
  • Consistent banner headers and section styling across all breakpoints

🔧 Codebase Improvements

Beyond the visuals, the code was completely refactored for structure, speed, and maintainability.

Architecture Changes:

  • Inline styles removed → moved to centralized, mobile-responsive CSS
  • Created reusable class structures
  • Improved cross-browser behavior and ARIA compatibility
  • Added media query architecture for true mobile-first development

This makes the code easier to maintain, extend, and understand going forward — especially with future features like animations or analytics.

🧪 Testing & Validation

Every improvement was tested:

  • On mobile, tablet, desktop
  • In landscape and portrait modes
  • Across dark/light toggle states
  • With varying content widths and section stacks

Adjustments were made iteratively based on real-time feedback and scaling behaviors.

✅ Summary

This update transformed the portfolio from a static desktop page into a polished, modern, and responsive web platform:

  • Dark/light mode switcher with persistent preference
  • Mobile-first layout with tested breakpoints
  • Code cleanup for performance and maintainability
  • Professional UX polish for hiring visibility

🔭 Next Features Under Consideration

  • Interactive Skills in Use panel
  • Embedded Forage internship section
  • Animated section headers or progress badges
  • Basic SEO enhancements + performance tracking
  • A responsive contact form for future networking

This wasn’t just a visual upgrade — it was a shift in how I build. The result is a portfolio that not only reflects the projects I’ve done but also shows the level of care, skill, and attention to detail I bring to every aspect of cybersecurity and presentation.

Built by Steven Loucks — cybersecurity student, veteran, and builder of bold things.