Building this website
One suggestion. A site I kept making my own.
01 / OVERVIEW
The idea behind it.
My portfolio started with a suggestion from my professor, Dr. Steelman: get my own domain. I bought antonioiglio.com and began building a place to share my work. That gave me an address; deciding what belonged there became a project of its own. I wanted my engineering studies, AI experiments, and Scouting experience to feel connected. The site grew through repeated passes on the typography, 5,100 moving particles, project gallery, and opening screen. Each version gave me something concrete to check, adjust, and build on.
02 / THE APPROACH
An address became a project of its own.
Start with a place to share the work
The first saved build, from September 7, 2026, gave my projects, coursework, résumé, and Scouting experience a home. It was a starting point I could open, use, and react to. Having my own domain made the portfolio something I could keep developing alongside the work it showed.
Find a visual voice
I kept revisiting the layout and typography. The early design gave way to condensed headings, a quieter palette, and more deliberate spacing. Comparing saved versions helped me see the effect of each pass. “Process Driven” became a useful way to describe both the site and how I was making it.
Build a background with movement
The background became one of my biggest visual experiments. I tried several approaches before arriving at a Canvas animation with 5,100 moving particles tracing orbital paths. The details mattered: how trails build up, how the scene responds to different screen sizes, and when to pause work in a hidden browser tab. Reduced-motion preferences also needed a considered experience.
Give the projects evidence and room
I added real supporting material: a Worklog demonstration and photographs of my Eagle Scout project before, during, and after the renovation. The project section grew into a horizontal gallery with a stacked opening reveal. Dedicated pages gave each project room for its idea, approach, media, and reflection, so a card could lead into the story behind the work.
Make the motion something I could refine
Working on the gallery taught me to pay closer attention to timing, spacing, and easing. I slowed the reveal and built controls for replaying it, adjusting the movement, and pausing along its timeline. Visitors can try those controls too. Preferences stay temporary unless someone explicitly chooses to remember them in their own browser.
Design the first moment, then the handoff
The opening screen started with an “A” cycling through typefaces, followed by “AI” expanding into my full name. I then refined how it meets the real page: matching the heading’s geometry and gradient, bringing stars in from outside the screen, and tuning their entry, fading, and slowdown. The early red opening became a dark sky that continues into the orbital background. Skip, Escape, and reduced-motion behavior were part of that work, alongside the intro tuning controls.
Keep the system understandable
I built with React and TypeScript, exported static pages, and served them through a small Node server on Railway. The portfolio has its own repository and service, separate from the Worklog application it showcases. I also added cookieless analytics to understand which pages, links, and videos people explore, with session recording and person profiles disabled and local previews excluded.
Built with
- React
- TypeScript
- Canvas animation
- Railway
03 / A CLOSER LOOK
Watch the site take shape.
The film follows the saved designs from September 7 through October 17, 2026. It includes the first loading screen and the later orbital handoff; that chapter begins at 1:01. The historical pages are fresh captures reconstructed from their saved source, recorded in October 2026. Dates identify the versions shown, rather than when the recordings were made.
04 / REFLECTION
What I’m taking forward.
Building the portfolio gave me a place to practice the whole process: shape an idea, implement it, use it, notice the rough edges, and make another pass. A scene that moves is only a starting point; the timing, controls, and transition into the page decide how it feels. Keeping earlier versions made those changes easier to see. The site now gives my projects more room to speak for themselves, while remaining a project I can keep learning from. “Process Driven” fits that ongoing cycle of building and refinement.
