Home

Brett Whitson Portfolio

GitHub Pages JSDoc BuilderJS

A modern, data-driven portfolio site with contemporary design, featuring light/dark themes and built with vanilla JavaScript and custom BuilderJS library.

📝 TODOs

  • [ ] Portfolio content refactoring - Update and restructure portfolio sections and data architecture

🚀 Quick Links

Link Description
Portfolio Live portfolio site
API Docs JSDoc documentation
Changelog Version history

✨ Latest Updates (v3.0.0)

  • 🎨 Complete style overhaul - Modern, clean design system with professional aesthetics
  • 🌙 Light/Dark theme system - Automatic system detection with manual override
  • 📱 Responsive design - Mobile-first approach with CSS Grid and Flexbox
  • 📄 Interactive resume - Toggle-able PDF preview with download options
  • 🏗️ Modular SCSS architecture - Organized, maintainable styling system
  • ⚡ Enhanced animations - Smooth, contemporary transitions

🎨 Design Features

  • Theme System: Light/dark modes with system preference detection
  • Modern UI: Clean typography, professional color palette, card-based layouts
  • Responsive: Mobile-first design with smooth breakpoint transitions
  • Accessibility: ARIA labels, keyboard navigation, high contrast support
  • Performance: CSS custom properties, optimized animations, minified assets

🛠️ Tech Stack

  • Frontend: Vanilla JavaScript (ES6+)
  • DOM Library: BuilderJS v0.0.3
  • Styling: SCSS with modular architecture
  • Icons: DevIcon library
  • Documentation: JSDoc 4.0.3
  • Deployment: GitHub Pages

📁 Architecture

Key Files

  • javascript/main.js - PortfolioController and ThemeController classes
  • data/data.json - Content data source
  • styles/scss/ - Modular SCSS architecture
    • abstracts/ - Variables, mixins, functions
    • base/ - Reset, typography, utilities
    • layout/ - Header, main, footer
    • components/ - Buttons, cards, navigation

Design System

  • CSS Custom Properties - Dynamic theming support
  • Component Library - Reusable UI components
  • Utility Classes - Flexible layout and spacing
  • Responsive Mixins - Consistent breakpoint handling

📝 Changelog

[3.0.0] - 2025-10-07

  • Complete style overhaul with modern design system
  • Light/dark theme system with automatic detection
  • Modular SCSS architecture and responsive design
  • Interactive resume preview functionality
  • Enhanced ThemeController and event handling patterns

Full changelog

🎯 Projects

BuilderJS

Repository | Showcase

Modern DOM manipulation library for clean, readable JavaScript without navigation complexity.

javascript/main.js

This file contains the PortfolioController class which manages the entire portfolio site lifecycle including data loading, DOM manipulation, and responsive behavior. Built with vanilla JavaScript and the custom BuilderJS DOM manipulation library.

Version:
  • 1.0.0
Since:
  • 1.0.0
Author:
  • Brett Whitson
License:
  • MIT
See:

Example

// Initialize the portfolio controller
const portfolio = new PortfolioController({
  debug: true,
  dataUrl: "./data/data.json"
});

// Initialize the portfolio
await portfolio.init();

Requires

  • module:BuilderJS