Portzen is a ten-page portfolio site that shows a photographer's work and makes it easy to hire them. The design is built on the Home hero: a full-screen portrait with the name set in huge condensed type, a fixed "Portzen" header with a hamburger menu, and a short info row (email, years of work, local time). The same visual language runs through every page, so the site feels like one piece.

What visitors can do

• Browse the Home hero and open the menu from the hamburger button. The dropdown lists every page, with Project Details and Blog Details nested under Projects and Blog.
• Read the About page: an introduction with animated counters, an arch-shaped portrait, services, collaborations, experience, awards and client recommendations with photos.
• Explore Projects, a staggered grid of ten projects, each opening a case study with the brief, process timeline, results with count-up numbers, a quote from the client, a gallery with a full-screen preview, tools and a colour palette.
• Read the Blog, a journal of seven posts. Posts can be filtered by category and searched live, and shown as a grid or a list. Each post has a sticky side panel with a contents list, a reading-progress counter and copy-link and back-to-top buttons, plus a key-points box, an inline photograph and related posts.
• Send an enquiry from the Contact page. The form checks each field, shows how many of the six questions are answered, and opens the visitor's email app with a message already written. Questions about booking are answered in an expandable FAQ.
• Change the accent colour for the whole site from a small settings panel; the choice is remembered on the visitor's device.
• Read the Privacy Policy and Terms pages, and get a friendly 404 page for addresses that do not exist.

Design and experience details

• Responsive from small phones to wide desktops, with layouts tuned at eight breakpoints.
• A custom cursor, a thin scroll-progress line along the top, a looping marquee band, an outlined PORTZEN wordmark in every footer, and a fixed back-to-top button with a progress ring.
• Headlines reveal word by word, and sections rise into view as they are scrolled to. All motion is switched off for visitors who prefer reduced motion.
• Black-and-white photography turns to colour on hover, and stays in colour on touch screens.
• Keyboard friendly: visible focus states, a lightbox that works with the arrow keys and Escape, and labelled controls.

Under the hood

• Plain HTML, Tailwind CSS v4 and vanilla JavaScript, bundled with Webpack. No runtime framework and no tracking scripts.
• Projects and blog posts are written once as data (project-data.js and blog-data.js). The detail pages are built from that data, and each page's title, description and keywords update to match the project or post on screen.
• Shared parts (menu, settings panel, footer behaviour) are loaded from partials, so a change is made in one place.
• Search-engine basics are in place: a unique title, description and keyword list on every page, Open Graph and Twitter tags for link previews, and structured data for the owner on the Home page.

What the site still needs before launch

• Replace the placeholder names, clients, awards, testimonials, dates and legal wording with real ones.
• Add the final domain so canonical links, a share image, a sitemap and robots.txt can be set up.
• Connect the contact form to a mail service if emails should arrive without the visitor's own email app.

Tech stack

HTML5, Tailwind CSS v4, vanilla JavaScript (ES modules), Webpack 5, Google Fonts (Bebas Neue, Space Mono).

Commands

npm install      install dependencies
npm start        development server with live reload (http://localhost:5003)
npm run build    production build into dist/

Pages

index.html            Home hero
about.html            About, services, experience, awards, recommendations
projects.html         Selected projects
project-details.html  Case study (opens with ?p=project-name)
blog.html             Journal with filters and search
blog-details.html     Post (opens with ?p=post-name)
contact.html          Enquiry form, details and FAQ
privacy-policy.html   Privacy Policy
terms.html            Terms
404.html              Page not found