Architecture
Content concentrated on one page, accumulated resources and rules, and a language strategy with more than one approach.
Case study · Web development · Personal brand
Active and evolving
Multipage professional portfolio
The evolution of a static portfolio into a bilingual multipage site with a visual identity, accessible navigation, and interactive components built with native web technologies.
Context
A functional base that needed integration
The project base already included a Spanish home page, an English version, profile, capabilities, projects, and contact sections, as well as custom CSS, modular JavaScript, a dark theme, and animated elements.
The opportunity was not to replace it without a reason, but to turn existing pieces into a coherent experience. The review focused on reducing technical inconsistencies, temporary content, and out-of-sync behavior.
Problem
Five areas to stabilize before growing
The work grouped findings to improve the base without losing ideas that already added value.
Functionality
Residual HTML, inconsistent contact data, an external form without complete configuration, and an out-of-sync technology wheel.
Accessibility
Mobile navigation relied on :target and needed clearer controls, states, keyboard behavior, and focus.
Content
Generic or temporary professional messages that did not explain Alfredo's approach clearly.
Design
The wheel effect existed, but needed a clearer relationship with the photo and the hero hierarchy.
My role
Decisions, implementation, and validation
Alfredo took part in defining goals, reviewing the project, making visual and technical decisions, adjusting HTML, CSS, and JavaScript, organizing the multipage structure, selecting content, and iterating on the wheel.
He also coordinated route, responsive behavior, and navigation checks, prioritizing staged changes instead of an unnecessary rewrite.
Artificial intelligence tools were used to speed up audits, propose implementations, and review code. Decisions, constraints, tests, and final approval remained Alfredo's responsibility.
Constraints
Visual ambition within technical limits
- Keep native HTML, CSS, and JavaScript.
- Do not migrate to a framework or replace the whole project without reason.
- Keep static hosting, Spanish, and English.
- Avoid automatic Git and deployment actions during the process.
- Work in stages and validate before moving forward.
- Maintain performance and accessibility with an ambitious visual direction.
Process
From audit to a base ready to grow
Full audit
Structure, content, links, styles, and modules were reviewed to separate confirmed issues from later improvements.
Technical stabilization
Routes, residual behavior, markup, and dependencies were prioritized before building on the base.
Multipage architecture
Content moved into sections and English was organized inside
/en/, with anindex.htmldocument for each route.Navigation and theme
Real document links, a keyboard-friendly mobile menu, and a persistent theme preference were consolidated.
New visual identity
The hero became the main professional introduction, with semantic colors and a clearer visual hierarchy.
3D wheel
The orbit was split into back and front layers to connect icons with the photo and suggest depth.
Personal brand strategy
Home and Profile were focused on web applications, processes, data, and engineering experience.
Project hierarchy
The Projects page changed from an exercise catalog into evidence organized by maturity and context.
Manual validation
Route, interaction, screen-size, and reduced-motion reviews guide adjustments before each next stage.
Technical decisions
Simple components, clear responsibilities
Multipage architecture
Folders by section, English inside /en/, one document per route, and relative links compatible with subdirectories.
Language
Two sets of real pages. The selector goes to the equivalent document without dynamic DOM replacement.
Navigation
A real mobile button with aria-expanded, Escape closing, focus return, and aria-current for the active section.
Theme
data-theme, system preference, and persistence of an explicit choice in localStorage.
Wheel
Back layer, photo, and front layer. Angular position determines visibility, scale, opacity, and rotation; it pauses on hidden tabs and uses a static reduced-motion composition.
CSS and JavaScript
Semantic variables, encapsulated components, and modules by responsibility. No animation library, WebGL, or artificial scrolling.
/projects//projects/portfolio//en/projects/portfolio/Visual evolution
More narrative, less accumulation
This comparison describes an evolution of structure and purpose; it does not simulate screenshots of earlier versions.
Before
- Single-page portfolio.
- Concentrated content.
- Wheel as a separate effect.
- Temporary professional messages.
After
- Multipage site with narrative hierarchy.
- Clear visual identity in dark and light themes.
- Hero-led presentation and photo-integrated orbit.
- Projects organized by maturity and more precise content.
Before
/index.htmlConcentrated contentAfter
/Content organized by routes/profile//capabilities//projects//services//contact/
/en/Equivalent routes in EnglishCurrent outcome
A static base with room for stronger documentation
The base structure brings together twelve static section routes in Spanish and English; this case adds one route per language. Navigation is responsive, the theme persists, the Projects page is structured, and the main content is available directly in HTML.
The site uses an architecture ready for more case studies, an identity that adapts to both themes, and a technology orbit with visual depth instead of a simple row of icons.
Lessons learned
Integration matters as much as code
Architecture
Not all functional code is integrated correctly; structure shapes maintenance.
Design
Visual effects add more when they have a narrative purpose and do not compete with content.
Accessibility
Controls, their states, and keyboard behavior need attention from the beginning of interaction.
Content and AI
Professional content needs evidence. AI adds more value when it works under constraints and human validation.
Next steps
Go deeper where evidence already exists
- Complete case studies for authorized projects.
- Update Capabilities and Services.
- Prepare a development-focused CV.
- Improve international SEO.
- Optimize images and fonts.
- Validate performance with real metrics.
- Publish applied projects when authorized.
Next exploration