DERRICK / O.
InteractiveGSAPUXFront-End
Digital Experience Leader
British Columbia, Canada
17+ years / 200+ websites
Design + Code + Strategy

DerrickOttenbreit

I build digital experiences.
Web experience leader, front-end developer and digital strategist. This portfolio is intentionally overbuilt because making the web feel alive is half the fun.
About / Approach

I turn messy digital problems into clear experiences people actually want to use.

I work across front-end development, UI/UX, CMS architecture, accessibility, analytics, SEO and digital governance.

My strongest projects usually start with complexity, competing priorities and multiple stakeholders.

The goal is always the same: make the experience clearer, faster, more useful and easier to maintain.

STRATEGY DESIGN CODE MOTION ANALYTICS ACCESSIBILITY STRATEGY DESIGN CODE MOTION ANALYTICS ACCESSIBILITY
Capabilities / 04

What I actually d.o.

01 / Experience

Digital Experience

Strategy, content architecture, conversion thinking, analytics and continuous improvement.

02 / Build

Front-End Development

Responsive, accessible interfaces with HTML, CSS, JavaScript, GSAP and WordPress.

03 / Systems

UI / UX Systems

Reusable components, design systems, user journeys and interaction patterns that scale.

04 / Direction

Web Strategy

SEO, GA4, governance, CMS planning, experimentation and stakeholder alignment.

Project Lab / Drag things around

Touch the work.

Click to explore. Drag to rearrange. Double-click to bring forward. Reset if chaos wins.

Numbers,
but make them fun.

Tap the buttons
0Years experience
0Websites delivered +
0Cups of caffeine
0Lines of code
Experience / Stacked

Built over time.

2009 — Now
dottDesign

Web Consultant / Front-End Developer

Independent work across responsive websites, UI development, WordPress, optimization, SEO, reusable components and digital consulting.

2024 — Now
Adler University

Web Content + Digital Experience Manager

Lead the strategy, management and optimization of Adler University’s digital web experience, overseeing UX, content architecture, accessibility, SEO, analytics and website performance. Partner with Marketing, Admissions, academic programs and university leadership to translate institutional and enrollment goals into effective digital experiences, while developing campaign landing pages, improving user journeys and guiding the evolution of the University’s web presence.

2018 — 2024
Jobvite

UI Developer / Project Manager

Designed and developed responsive, accessible user interfaces for enterprise recruitment technology, translating complex requirements and designs into polished digital experiences. Collaborated with designers, QA teams, developers and stakeholders to deliver projects within tight timelines while maintaining WCAG accessibility and front-end quality standards. Frequently worked across both development and project management, coordinating scope, timelines, client communication and delivery while mentoring developers and improving reusable front-end practices.

2009 — 2018
myRealPage

Front-End Developer

Designed and developed front-end experiences for a large-scale real estate website platform, creating responsive, user-friendly interfaces for agents and their customers. Worked across UI/UX, front-end development, performance optimization and product improvements while collaborating with cross-functional teams to address customer needs and improve usability. Also developed and maintained the company’s corporate website and built an extensive WordPress-based training and support library containing more than 200 resources.

2011 — 2012
Fourcross

Lead Front-End Developer

Led front-end development for client websites and digital projects, transforming creative concepts into responsive, accessible and production-ready experiences. Collaborated closely with designers, back-end developers and project stakeholders to deliver consistent interfaces across devices while improving performance and maintainability. Established reusable UI patterns, development standards and code-quality practices that helped streamline production and create a more scalable front-end workflow.

Skill Terminal

Click a skill to inspect how it fits into the kind of work I do.

derrick@portfolio:~$skills --interactive
Select a capability below.
> Waiting for input...
Operating principles / Horizontal scroll
01 / Simplicity
Complexity belongs behind the interface, not inside it.
02 / Accessibility
If people cannot use it, the design is not finished.
03 / Performance
Fast is not polish. Fast is part of the experience.
04 / Strategy
A beautiful page without a purpose is just a very expensive poster.
Optional chaos
YOU PRESSED IT.
GOOD. CURIOSITY MATTERS.
Let's build something

Make the web feel
alive.

You can stop scrolling now.
Seriously.
There is nothing down here.
...why are you still scrolling?
Fine.
You earned this.
Derrick.exe / Secret unlocked

BUG
HUNTER.

Move the " < />" left and right and catch:
HTML / CSS / UX / GSAP / WCAG / PHP / SEO

while avoiding:
404 / BUG / 500 / IE6 / !important / DIV DIV DIV

SCORE: 000 LIVES: 3
</>