Code Meets Design — Portfolio Site & Brand Identity for Danielle Heberling
A custom portfolio website, logo, and brand identity for a developer colleague — built with hand-coded HTML, CSS, and JavaScript animations to showcase her newly acquired development skills and help her stand out in the job market.
A developer who needed a designer — and a designer who needed to learn web animation.
This project started as a course requirement at Portland Community College — CAS 175E, focused on web animation using Adobe Edge Animate — and turned into something genuinely useful for a real person. The assignment called for a fully functional website with animations that enhanced the content rather than distracted from it. Rather than build a fictional site, I reached out to Danielle Heberling, a developer colleague, and proposed designing her actual portfolio. It was a natural fit: she needed a site that showcased her coding skills and helped her stand out when applying for developer roles, and I needed a real project to push the work beyond a classroom exercise. We collaborated closely throughout — her feedback shaped the design, and the result was something we were both proud of.
The Assignment
A developer entering the job market with no portfolio site and no brand.
Danielle had the skills — she needed the presentation. A developer portfolio has to do two things well: showcase the work clearly and demonstrate enough design sensibility to signal that the person behind it takes their craft seriously. Starting from scratch meant building both a brand and a site simultaneously, with animations that felt purposeful rather than decorative.
A brand built first, a site built around it, and three animations that earned their place.
The process started with the logo and identity — establishing a visual language before a single page was designed. From there the site took shape around Danielle's projects and personality, with animations added as genuine enhancements rather than decoration. Each animation served a specific purpose: one for navigation, one as a slideshow, and one that gave the site a personal touch.
Site Design
HTML CSS jQueryThe portfolio was designed to present Danielle's development projects cleanly and confidently — a layout that felt polished enough to reflect well on her design sensibility while keeping the focus firmly on her code.
Animations
Adobe Animate Adobe After Effects JavaScriptThree animations were required — a slideshow, a navigation element, and a personality piece. The personality animation featured Ernie, Danielle's dog, giving the site a human and memorable touch that set it apart from a standard developer portfolio.
A classroom project that became a real deliverable for a real person.
Turning a course requirement into an actual client project was one of the better decisions I made at PCC. Working with a real collaborator raised the stakes in all the right ways — Danielle's feedback was honest and constructive, and designing for someone who understood both development and design pushed the work to a higher standard than a fictional brief ever could. The animations were a particular challenge — Edge Animate was a new tool, and making the animations feel purposeful rather than gratuitous required genuine creative problem-solving. Ernie the dog remains one of my favorite portfolio moments. The brand work that accompanied the site — logo, letterhead, business cards — meant Danielle walked away with a complete professional identity, not just a website.
"Meghan designed a portfolio site for me to showcase some of my web development projects. Not only was she extremely knowledgeable about design and using the Adobe Creative suite, she patiently listened to my needs and translated them into a clean, elegant design. Her professionalism and passion for creating beautiful things has not only produced an amazing product for myself, it has also inspired me to learn more about different design practices."