About Section
Homepage about block: bio, expertise badges, recent experience rows, and a portrait photo. All copy is driven by the i18n translation keys under `about.*` and `skill.*`.
Live Preview
Meet Gabriel
Product Designer (UX/UI) with 8+ years of experience designing production-ready interfaces grounded in strategic UX thinking, front-end/coding knowledge and a strong visual design background. I leverage AI tools across the design lifecycle to accelerate exploration and delivery.
Areas of expertise
Product Design
UX Design
UI Design
Design Systems
Figma
Claude Code
AI Design
My recent experience
FreelanceGH Product DesignCurrently
Specialist UI DesignerCommonwealth Bank2022–25
Translation keys used
about.heading, about.bio, about.expertise, about.recentExp, about.moreAboutMe, about.imageAlt, about.freelance, about.specialistUI, about.currentlyskill.productDesign, skill.uxDesign, skill.uiDesign, skill.designSystems, skill.figma, skill.claudeCode, skill.aiDesignLayout
Mobile
Circle portrait on top, then bio, expertise badges, experience list, and CTA stacked vertically.
Desktop (lg+)
Two-column: content on the left, 370px portrait image on the right. Uses FadeIn / FadeInStagger animations per section.
Import
tsx
import { AboutSection } from '@/components/sections/AboutSection'