zoe-alessandro.com portfolio system
A bilingual static portfolio designed to preserve a photography-led commercial site while adding a clear foundation for websites, automation and professional experience.
Overview
A portfolio that carries both image-making and technical work.
The site is both the public portfolio and the first documented website case study. It brings together visual direction, information architecture, bilingual content, front-end implementation, contact handling and static deployment.
- Photography remains the public homepage lead and established commercial practice.
- New multidisciplinary pages create space for websites, automation and experience without diluting the homepage.
- The portfolio website itself becomes the first real website case study.
Website build sequence
One structure, refined into a finished website.
This portfolio was built from the content outward. Select a stage to see the same page move from intent and information order into a responsive editorial system.
-
Purpose · proof · action
Content hierarchy
The page starts as a content map. Purpose, selected work and the next action receive a deliberate order before layout decisions begin.
- Define the page purpose and audience
- Sequence explanation, evidence and action
- Keep useful routes visible
-
Proportion · rhythm · order
Responsive wireframe
The same blocks become a working composition. The wireframe tests reading rhythm, image weight and how proof follows the opening statement.
- Establish desktop and mobile proportions
- Reserve stable space for copy and media
- Test hierarchy without decoration
-
Type · spacing · material
Visual system
Typography, restrained colour and image treatment are applied to the proven structure. Tokens create consistency while the composition stays editorial.
- Editorial type scale and line lengths
- Bone, ink, brass and slate tokens
- Consistent component and image rhythm
-
Desktop · tablet · mobile
Finished responsive result
The final interface adapts its composition rather than simply shrinking. Desktop, tablet and mobile preserve the same accessible order with different spatial emphasis.
- Purpose-built layouts at each breakpoint
- Keyboard, touch and no-JavaScript readability
- Static Astro output with progressive enhancement
The visual language changes; the accessible source order and purpose do not.
Role
Direction, structure, implementation and delivery.
- Product direction and project management.
- Visual direction, page composition and content hierarchy.
- Information architecture, UX decisions and bilingual route planning.
- Front-end implementation with Astro, TypeScript and Tailwind CSS.
- Localisation, technical SEO foundations, accessibility implementation and deployment.
Constraints
A premium site within a strict static boundary.
- Static Cloudflare Pages deployment.
- Complete EN/NL route parity with explicit translated paths.
- Existing photography URLs and commercial positioning preserved.
- No runtime backend, database or public AI feature.
- Performance, ranking and business-result claims require dated measurements before publication.
Decisions
A system designed to grow without losing focus.
- A photography-led homepage creates a focused first impression.
- Dedicated multidisciplinary routes let each visitor follow a clear intent.
- Explicit translated route pairs instead of inferred locale paths.
- Typed project and publication model.
- Reusable Astro components with readable no-JavaScript content.
- Progressive enhancement for motion, contact and gallery behaviour.
- Reduced-motion and static fallbacks remain part of the design contract.
Technical implementation
Static architecture with careful front-end layers.
Delivered system
What the portfolio does today.
The result is a working bilingual static portfolio with preserved photography routes, multidisciplinary information architecture, responsive interactions and Cloudflare Pages deployment.
- Bilingual static portfolio.
- Photography routes preserved.
- Multidisciplinary route foundation for Projects, Websites, Automation, Expertise and Experience.
- Contact flow with Formspree integration.
- Intent-led contact flow across five inquiry types.
- Typed project and publication model.
- Responsive static page system.
Iteration principles
Improve without losing the core.
- Keep the visual system recognisable while allowing each discipline its own rhythm.
- Prefer clear static content, then add interaction only where it improves understanding.
- Preserve bilingual parity at the level of routes, metadata and visitor tasks.
- Treat accessibility, performance and technical SEO as design constraints.