Web & Graphic Desing

Responsive Web Design Projects

Five hands-on projects from FreeCodeCamp’s certification, built with HTML/CSS. Each exercise challenged me to balance aesthetics with clean, semantic code.

A survey form, a tribute page, a technical documentation page, a product landing page, and a portfolio landing page. Click the image to see them.

My Personal Branding

My logo is a minimalist owl’s head, crafted from a hidden M (for Maloney). The arches of the "M" form the eyes and beak, while the negative space gives it life. Owls embody qualities I value - patience, precision, and impeccable vision - mirroring the focus needed in photography and design.

The eyes deliberately resemble camera lenses, with a glint to add warmth and approachability (a trick borrowed from animation and portraiture). Without it, they’d feel soulless; with it, they invite collaboration.

Originally, the owl had a full body: the head held the "M," while the wing formed a "D" (for Dominic). Though I loved the concept, the silhouette became too tall and complex at smaller sizes. The head alone proved more versatile - cleaner at a distance, bolder in thumbnails, and perfectly rounded for social profiles.

The red is Canon’s signature shade, a nod to my photography roots. It’s bold without overpowering, and tests well across backgrounds.

Why It Works

Hidden meaning: A logo should reward a second look. The "M" is subtle but intentional.
Function first: Simplified for scalability, yet detailed enough to feel handcrafted.
Emotion: The lens-like eyes and glint make it feel alive, not corporate.

Studio Title Animation

A simple but effective logo animation created for a first-year university film project. The magnifying glass effect playfully enlarges the "21," reinforcing the detective theme of the film. Though early in my design journey, this project taught me the value of using motion to enhance branding - even with minimal elements. Click the image to watch.

Page updated

Google Sites

Report abuse