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
Keep the public story focused while the evidence grows.
- Photography-led homepage preserved until the broader evidence threshold is met.
- Multidisciplinary pages separated from the homepage for clearer visitor intent.
- Explicit translated route pairs instead of inferred locale paths.
- Typed multidisciplinary content model for status, claims and publication boundaries.
- Reusable Astro components with readable no-JavaScript content.
- Progressive enhancement for motion, contact, map and gallery behaviour.
- Reduced-motion and static fallbacks remain part of the design contract.
Technical implementation
Static architecture with careful front-end layers.
Current verified outcome
What exists and can be verified now.
The verified result is not a claimed ranking, score or conversion lift. It is a working bilingual static portfolio with preserved photography routes and a stronger multidisciplinary structure.
- Bilingual static portfolio.
- Photography routes preserved.
- Multidisciplinary route foundation for Projects, Websites, Automation, Expertise and Experience.
- Contact flow with Formspree integration.
- Address and map support for the contact experience.
- Documented evidence and claim boundaries.
- Responsive static page system.
What I would improve next
The next layer can become sharper and more tangible.
- Add a dated Lighthouse, accessibility and performance snapshot when fresh measurements are available.
- Capture richer case-study imagery and build-process screenshots.
- Archive dated design decisions and breakpoint comparisons as future iterations evolve.
- Clarify service packaging for selected website commissions.
- Add real client case studies when permission and evidence exist.