# Horizonte Institucional

Canonical page: https://www.buildwithcarlos.dev/projects/horizonte-institucional/

I reconstructed a complete institutional experience connecting personal, business and editorial journeys through human-led layouts, diagonal reveals and a shared visual language.

Status: Previous frontend work, reconstructed

Scope: Institutional page families, editorial content, responsive navigation, finite motion and local interactions

## Where this started

An institutional frontend I previously implemented in collaboration with designers brought together a broad range of audiences and content. This reconstruction revisits that work with the shared Horizonte. identity and a connected set of page families.

Keep a large information architecture understandable without flattening every page into the same template. Navigation, editorial structure, human photography and motion needed to feel related across personal, business and institutional journeys.

## My part

- Implemented: I implemented the earlier frontend and its interaction behavior in collaboration with designers. The reconstruction preserves the layout relationships and interaction intent without claiming sole authorship of the original visual design.

- Reconstructed: The shared Horizonte. identity, new generated photography, rewritten content and safe local states adapt the earlier implementation for this portfolio.

## Decisions

### A shared structure, distinct journeys

The home, institutional timeline, personal and business sections, Private experience, article pages and practical resources retain their own composition while sharing navigation and visual rules.

### People within the geometry

Diagonal image reveals and offset visual planes preserve a defining part of the earlier frontend. Newly generated photographs replace the original imagery and keep people at the center of the experience.

### Motion with a readable final state

Finite CSS transitions, synchronized timeline controls and native scrolling rails replace the original animation dependencies. Reduced-motion preferences and pre-rendered content preserve access when effects are disabled.

### A complete demonstration, safely local

Forms display local confirmation states, documentation describes the demonstration, and every public route is generated as HTML. Original integrations, contacts and tracking are not carried into this version.

## Evidence

- [Institutional home with a diagonal portrait and violet headline area](https://www.buildwithcarlos.dev/cases/horizonte-institucional/home-hero-desktop.jpg)

  Live reconstruction: institutional home, desktop.

  [Source](https://www.buildwithcarlos.dev/demos/horizonte-institucional/)

- [Interactive timeline with the first chapter selected](https://www.buildwithcarlos.dev/cases/horizonte-institucional/about-desktop.jpg)

  Live reconstruction: synchronized institutional timeline.

  [Source](https://www.buildwithcarlos.dev/demos/horizonte-institucional/sobre-nos/#trajetoria)

- [Business journey with two people collaborating beside the ivory headline area](https://www.buildwithcarlos.dev/cases/horizonte-institucional/business-desktop.jpg)

  Live reconstruction: business journey, desktop.

  [Source](https://www.buildwithcarlos.dev/demos/horizonte-institucional/para-sua-empresa/)

## Looking back

A large frontend becomes coherent through relationships: between pages, between information and action, and between motion and the content it reveals. Rebuilding this earlier work made those relationships explicit and testable.

## Project note

This is a reconstruction of a real earlier frontend project, implemented by me in collaboration with designers. Identity, imagery and content are adapted for the portfolio using a fictional presentation layer. It is not a financial institution and offers no real accounts, products or operations. No business results, sole visual-design authorship or unsupported dates are claimed.

## Related links

- [Explore the institutional reconstruction](https://www.buildwithcarlos.dev/demos/horizonte-institucional/)