Portfólio
Personal project + front-end built from scratch | HTML, CSS and JavaScript
- Platform
- HTML, CSS and JavaScript
- Period
- Aug 2024 to Jul 2025
- Stack
- HTML
- CSS
- JavaScript
- JSON
- Git
Overview
My personal portfolio is a personal project created to represent my visual identity and professional journey as a front-end developer with precision. The concept goes beyond showcasing work: it was designed as a personal brand experience, with a modern, creative, and professional aesthetic based on an orange and gray palette.
Context and objective
The development spanned about 11 months, balancing my Systems Analysis and Development studies with real freelance deliveries. The objective was to build a showcase that communicates technical maturity, visual consistency, and execution capability, delivering a smooth and engaging navigation experience from start to finish.
The challenge
The main challenge was balancing strong visual personality with clarity and performance, without relying on frameworks. It was necessary to maintain rhythm, readability, and responsiveness across every section, while supporting a dynamic experience with animations and interactions without sacrificing lightness, code organization, or aesthetic consistency.
The strategy
Structure the portfolio as a navigation narrative, where each section reinforces a stage of my professional identity. Color alternation and content hierarchy were planned to create visual rhythm and guide the user naturally, keeping reading predictable and attention focused on the most important points.
What was implemented
Front-end built from scratch:
- HTML, CSS and vanilla JavaScript: full structure without frameworks to keep total control over performance, responsiveness, and visual customization.
- Visual standardization: consistent typography, sizing, spacing, and contrast definitions to maintain readability and cohesion.
- Rhythm-based navigation: color alternation between sections to create a more engaging scrolling experience.
Interactions and dynamic experience:
- Dynamic loading and behavior: implementation of flows that make the experience more responsive and alive.
- Animations and microinteractions: visual effects designed to reinforce modern feel without compromising performance.
- Modals and action buttons: modal triggers, CTA interactions, and responsive behaviors integrated into the layout.
AI support and complementary structure:
- OpenAI Codex: using the agent to generate the back-end foundation based on technical prompts written with precision.
- Front-end integration and logic: implementing the necessary connections to ensure integrated and consistent functionality.
Result
The result is a portfolio that works both as a showcase and as a product, communicating identity, consistency, and technical execution. It represents what I can build today and how I continuously evolve, as a living project that is constantly refined, following my professional journey and drive to innovate.
