Portfolio
UX-Driven Front-End Engineer
This repository contains my personal portfolio website. It is intentionally built as a product artifact, not a visual experiment — designed to demonstrate frontend engineering judgment, UX decision-making, and scalable architecture.
The goal of this portfolio is not to showcase every skill I have, but to clearly communicate:
- How I structure frontend systems
- How I make trade-offs under real constraints
- How I think about UX, performance, and maintainability
- How I present complex work in a clear, recruiter-friendly way
🌐 Live: https://www.giselepecapedra.com
Core
- Next.js (App Router)
- React
- TypeScript
UI & Styling
- Tailwind CSS
- shadcn/ui
- Custom design tokens and variants
Motion
- Intersection Observer–based reveal animations
- Subtle, performance-safe transitions
Tooling
- ESLint
- Prettier
- Vercel (deployment)
- UX-focused hero with clear positioning
- Featured projects with strong visual hierarchy
- Scalable case study system
- Reusable button and interaction patterns
- Responsive, accessible layouts
- Performance-aware animations
- Reviewers scan quickly
- Case studies matter more than visual effects
- Clarity beats feature completeness
- Accessibility and performance are baseline expectations
Decision
All project content lives in a structured data file (projects.ts).
Why
- Enforces consistency across case studies
- Makes projects easy to add, reorder, or remove
- Avoids duplicated layouts and logic
Trade-off
- Slight upfront structure cost
- Intentional for long-term maintainability
Decision
Use one dynamic route to render all case studies.
Why
- Guarantees narrative consistency
- Keeps the codebase small and readable
- Prevents layout divergence over time
Trade-off
- Less freedom for one-off layouts
- Chosen deliberately to protect clarity
Decision
Animations are minimal and purpose-driven.
Why
- Motion supports hierarchy, not decoration
- Reduces cognitive load
- Keeps performance predictable
Trade-off
- Less visually flashy
- Stronger signal for senior, product-focused roles
Short-term
- Analytics for engagement signals
- Keyboard navigation audit
- Optional project filtering
Mid-term
- MDX support for richer storytelling
- Persisted theme preferences
- Deeper experience timeline
Long-term
- Internationalization
- Writing / blog section
- Content versioning
This repository is meant to answer one question clearly:
“How would this person design and build frontend systems on a real product team?”
Everything here — structure, scope, and omissions — is intentional.
This project is under the MIT license. See the LICENSE for more information.
Made with ♥ by Gisele Pecapedra 👋 Get in touch!