A playful one-page application microsite built as an interactive job application for Nozomio. The page uses scroll-driven storytelling, a canvas frame sequence, and a kinetic call-to-action to turn a simple application into a memorable product-style experience.
Live demo: https://aizakmi08.github.io/nozomio-application/
- Scroll-based narrative with full-viewport panels and progressive reveal states.
- Canvas-rendered WebP frame sequence for a lightweight animation sequence.
- Responsive layout tuned for desktop and mobile browser viewports.
- Interactive offer section with a mailto call-to-action and animated alternate action.
- Static deployment through GitHub Pages with no backend dependency.
- HTML5
- CSS3
- Vanilla JavaScript
- Canvas API
- GitHub Pages
.
|-- index.html # Page markup and content sections
|-- styles.css # Responsive layout, animation states, visual system
|-- script.js # Scroll progress, frame loading, canvas rendering, CTA behavior
|-- assets/ # Favicons and visual assets
`-- assets/frames/cook/ # WebP animation frame sequence
Because this is a static site, it can be opened directly in a browser. For local testing with a development server:
python3 -m http.server 8000Then open http://localhost:8000.
The animation is implemented as a preloaded frame sequence rather than a video so the page can bind visual progress directly to scroll position. The JavaScript keeps track of the desired frame, resizes the canvas for the current device pixel ratio, and draws only when a new frame is ready.
The project is deployed and available as a public GitHub Pages site.
- CI verifies static entry files, favicon assets, canvas hooks, and the WebP animation frame sequence.
CONTRIBUTING.mddocuments the expected validation path for static assets and scroll-driven behavior.SECURITY.mdcaptures expectations for static deployment, external links, and future third-party scripts.