nicholasoglo.github.io

Personal site for Nicholas Oglo — B.A. double major in History and Political Science, Florida State University, and incoming FSU MBA student (Fall 2026).

Themed in FSU garnet (#782F40) and gold (#CEB888).

Live at https://nicholasoglo.github.io

Screenshots

Hero — animated star field with the Big Dipper drawn in the gap beside the name.

Experience — timeline of roles, with Cassiopeia's W in the left margin.

Education

Skills & honors

Mobile — 390 × 844

Stack

No build step, no dependencies, no framework. Three files:

File	What it does
index.html	All content — hero, experience timeline, education, leadership, skills, contact
styles.css	Layout, dark theme (FSU garnet + gold), responsive breakpoints, reveal animations
main.js	Star field + constellations canvas, scroll reveals, counters, nav

The background

A single full-viewport <canvas> behind the page, drawn in two layers.

Star field — sparse drifting stars that link to nearby neighbours, twinkle independently, drift gently away from the cursor, and parallax against scroll. Star count scales with viewport area and is capped so phones stay smooth; the loop pauses when the tab is hidden.

Constellations — six real, well-known figures, positioned down the page in the margins so they sit behind the content rather than across it:

Ursa Major	the Big Dipper — hero
Orion	the Hunter, with belt and Rigel
Cassiopeia	the W
Cygnus	the Northern Cross
Leo	sickle and hindquarters
Lyra	Vega and the parallelogram

Each is stored as normalised star coordinates following the real sky pattern, plus a relative brightness per star (which sets its dot size) and an index list of the lines making up the conventional stick figure. Figures fade in as they enter the viewport.

Other animation

• Scroll reveals — IntersectionObserver fades sections in with a staggered sibling cascade, with a geometry-based fallback sweep if the observer doesn't fire.
• Counters — the hero stats count up on first view with a cubic ease-out.
• Cursor glow — cards track the pointer with a radial highlight.

Everything respects prefers-reduced-motion: reduce — the canvas renders a single static frame (redrawn on scroll) and counters jump to their final value.

Editing

• Content lives in index.html — plain semantic HTML, edit it directly.
• Photo: replace assets/portrait.jpg. If the file is missing the portrait falls back to monogram initials automatically.
• Colors: CSS custom properties at the top of styles.css (--gold, --garnet, --bg, --ink).
• Constellations: the CONSTELLATIONS array at the top of main.js. px/py place the figure (fraction of viewport width, fraction of full page height).

Push to main and GitHub Pages redeploys in about a minute.