A motion-driven personal portfolio showcasing my work across web development, digital experience, UX, analytics, accessibility, and digital product development.
Built as both a professional portfolio and an interactive front-end experiment, the site uses GSAP, custom JavaScript, and playful interaction patterns to make the experience feel less like a traditional résumé and more like something worth exploring.
I'm Derrick Ottenbreit, a Web & Digital Experience Manager, front-end developer, and digital product builder based in British Columbia, Canada.
I work across:
- Front-end development
- Digital experience strategy
- UI / UX
- WordPress and CMS architecture
- Accessibility
- SEO
- GA4 and analytics
- Web performance
- Digital governance
- Marketing technology
- Interactive development
My approach is simple:
Turn messy digital problems into clear experiences people actually want to use.
This portfolio is intentionally more interactive than a traditional personal site.
It combines professional work, project case studies, career experience, and technical capabilities with motion and interaction throughout the experience.
- Animated loading experience
- GSAP-powered page transitions and reveals
- Scroll-triggered animation
- Custom cursor interactions
- Animated typography
- Interactive project board
- Draggable project cards
- Free and tidy project-board modes
- Project detail modals
- Image galleries
- Animated statistics
- Interactive skill terminal
- Horizontal scrolling sections
- Marquee animation
- Responsive navigation
- Reduced-motion support
The portfolio includes a mix of professional digital experience work and independent product development.
Website strategy, UX, campaign landing pages, analytics, SEO, accessibility, content architecture, and digital optimization for a multi-campus university.
Focus: Digital Experience · WordPress · UX · GA4 · SEO · Accessibility
A baseball team management platform designed to help coaches manage rosters, lineups, player usage, game-day decisions, and team administration.
Tech: PHP · MySQL · JavaScript · CSS
A responsive recipe management application for organizing, searching, and maintaining a personal recipe collection.
Tech: PHP · MySQL · JavaScript · CSS
A GA4-friendly campaign URL builder for creating clean and consistent campaign tracking links.
Tech: HTML · CSS · JavaScript · GA4 · GSAP · Canvas Confetti
A playful, customizable browser-based QR code generator with custom colours, module styles, finder eyes, logos, error correction, and high-resolution PNG exports.
Tech: HTML · CSS · JavaScript · QR Code Styling · GSAP · Canvas Confetti
A browser-based Open Graph and social preview builder for creating polished 1200 × 630 social sharing images.
Customize layouts, colours, patterns, backgrounds, logos, and typography, then export a PNG and generate matching Open Graph and X meta tags.
Tech: HTML · CSS · JavaScript · GSAP · html2canvas · Canvas Confetti
HTML · CSS · JavaScript · GSAP · ScrollTrigger · Responsive Design
PHP · MySQL · REST APIs
WordPress · Git · GitHub · GitHub Pages
UX · Accessibility · SEO · Information Architecture · Web Performance
GA4 · Google Tag Manager · UTM Strategy · Conversion Tracking
Motion is a major part of the portfolio experience.
The site uses GSAP and ScrollTrigger to create purposeful movement throughout the interface, including:
- Entrance sequences
- Scroll-based reveals
- Typography animation
- Horizontal scrolling
- Interactive project transitions
- Card movement
- Modal animations
- Marquees
- Micro-interactions
The goal is not animation for animation's sake. Motion is used to create hierarchy, feedback, pacing, and personality.
The portfolio includes accessibility considerations such as:
- Semantic HTML
- Keyboard-accessible controls
- Visible interactive states
- Responsive layouts
- Reduced-motion support through
prefers-reduced-motion - Accessible navigation patterns
- Readable typography and contrast considerations
The experience is highly animated, so reduced-motion support is particularly important.
The portfolio uses Google Analytics 4 to understand how visitors interact with the site and its content.
Analytics help inform future improvements to:
- Project discovery
- Content engagement
- Navigation
- Portfolio performance
- User journeys
The portfolio is built around a few principles:
Complexity belongs behind the interface, not inside it.
If people cannot use it, the design is not finished.
Fast is not polish. Fast is part of the experience.
The best systems survive the next person who has to use them.
The portfolio is a lightweight front-end project built without a JavaScript framework.
A simplified structure looks like:
portfolio/
├── index.html
├── css/
│ └── port-styles.css
├── js/
│ └── port-script.js
├── images/
└── README.md
Clone the repository:
git clone https://github.com/dottDesign/portfolio.gitMove into the project:
cd portfolioYou can open index.html directly or run a lightweight local server:
python3 -m http.server 8000Then visit:
http://localhost:8000
The portfolio is deployed using GitHub Pages.
Live site:
https://dottdesign.github.io/portfolio/
Repository:
https://github.com/dottDesign/portfolio
A portfolio should demonstrate the work, not just describe it.
Rather than creating a static collection of screenshots and résumé entries, I wanted the site itself to demonstrate how I think about:
- Interaction design
- Front-end development
- Motion
- UX
- Responsive behaviour
- Accessibility
- Performance
- Content architecture
It is intentionally a little overbuilt.
Because making the web feel alive is half the fun.
I also build independent tools and applications through dottDesign, usually starting with a repetitive, frustrating, or unnecessarily complicated workflow and turning it into a focused digital product.
Explore more projects:
👨💻 GitHub Profile
Derrick Ottenbreit
Web & Digital Experience Manager · Front-End Developer · Digital Product Builder
British Columbia, Canada
This repository contains my personal portfolio design, content, and project presentation.
If you would like to reuse portions of the code, please review the repository license or contact me first.
Strategy · Design · Code · Motion · Analytics · Accessibility
dottDesign