NGO Homepage — Self-Taught HTML/CSS Rebuild

A responsive, single-page reconstruction of the Agenda Geek homepage, hand-coded in HTML and CSS from a team Figma file and deployed to GitHub Pages. Built as a self-taught learning project in May 2023 when the winning competition design had no path to code — marking the exact moment I pivoted from pure designer to design engineer. The first lines of code I ever wrote.

Self-directed learning roughly one year after the 'Desafio Ajude uma ONG' hackathon concluded. There was no client, no contract, and no commercial commission: the NGO lacked resources to hire developers, so the winning 8-screen platform design was never built. I decided to learn front-end development by independently coding the homepage screen. While the visual design was co-created live on call with my hackathon teammates, the code is mine alone across nine commits.

The pivot: Why I learned to build

My design-engineer positioning starts from a simple premise: I spent two years on products that never shipped, because no-code tools and dev handoffs could not execute the designs, so I learned to build. Agenda Geek is the timestamped receipt for that statement. In 2022, our design won 1st place out of 14 teams in a national NGO competition, complete with a gamified e-waste collection system, school rankings, and an extensive token system. But like dozens of student and junior concepts, it stalled because the organization could not find developers willing to code an 8-screen platform for free.

A year later, tired of watching designs languish in Figma, I opened a code editor, read web development documentation, and spent two weeks manually translating the team's Home screen into HTML and CSS. It was not commissioned work; it was a deliberate personal bridge into software engineering.

⏱️2 weeks

of self-taught study & initial build (May 2023)

📱5 breakpoints

responsive coverage from 320px to >1700px

📄485 lines

of semantic HTML written from scratch

💎100% durable

still live on GitHub Pages after 3 years

The technical anatomy of a first build

The repository reflects the raw, unvarnished discipline of someone learning fundamental web technologies without starter templates or automated CLI generators:

• Responsive Discipline — Five explicit CSS media queries (320px, 600px, 768px, 1440px, and min-width 1700px), ensuring the interface holds together on small mobile screens and ultra-wide desktop monitors alike.
• Layout Mechanics — 77 flexbox declarations handling vertical rhythm, card grids, and navigation items without relying on CSS Grid or modern clamp() functions.
• Vanilla DOM Manipulation — A single 12-line JavaScript event listener that toggles expanded view states on article cards and animates chevron rotation.
• Deliberate Syntax Experimentation — Two weeks after the initial deployment, a single follow-up commit introduced CSS :is() pseudo-class selectors — concrete evidence of reading CSS specifications and testing new learnings in git.
• Asset Hygiene — 27 vector and raster assets hand-exported from Figma, mapped directly to design system color tokens (including Inter 300 typography).

Durability: Surviving when client domains vanish

Across agency portfolios, client projects frequently vanish when domains expire, hosting subscriptions lapse, or businesses shut down. Agenda Geek represents the complete inverse. Because it was published directly to GitHub Pages on my personal account, it carries zero hosting bills and zero agency dependencies. Three years later, both the GitHub Pages deploy and my self-hosted mirror serve byte-identical (sha256-matched) responses with zero maintenance.

What this is not

• Not the NGO's official product. The Agenda Geek platform was never built; this is my own recreation of one screen.
• Not my sole design. The Home screen was designed collaboratively by three team members during the hackathon. My contribution was coding it alone.
• Not client or paid work. It was a self-directed educational project undertaken a year after the competition ended.
• Not advanced software engineering. It contains beginner markup patterns (href='#' navigation, div-heavy containers) and no modern component frameworks.
• Not a 28-month build. Commits span two weeks in May 2023; a cosmetic username update in 2025 does not represent ongoing engineering.
• Not evidence of user traction. It had zero users and zero analytics — kept purely as biographical origin evidence.

The receipt of the origin

Every design engineer has a starting point. Showing Agenda Geek alongside production Next.js architectures like Celus or AllPrice is not an apology; it is a demonstration of trajectory. It proves that my instinct to cross the disciplinary boundary between design and code is not a marketing posture — it was born years ago, out of the necessity to bring an abandoned design to life.

Evidence

Shipped to GitHub Pages in May 2023 and preserved across two independent, byte-identical origins (juansilvadesign.github.io/Agenda-Geek-homepage and agendageek.juanpablosilva.com.br). Three years later, it remains the most durable artifact in the portfolio, answering HTTP 200 without third-party hosting dependencies. It had no users and was never used by the NGO — its value is honest biographical proof of the transition from mockups to code.