• Vera Photography — Portfolio
  • Contents
  • 1. Project Overview
    • Specification
    • Figma design
    • Live demo
  • 2. Tech stack
  • 3. Getting started
  • 4. Features
  • 5. Architecture
  • 6. Performance and optimizations
  • 7. Accessibility
  • 8. Project structure
  • 9. Scripts
  • 10. Deployment
  • 11. License

'Vera Photography — Portfolio' is a fast, content‑driven single‑page site for Vera — an acclaimed French photographer working across Europe. The site highlights her work and services through an elegant hero, curated portfolio slider, pricing packages, FAQ, and a streamlined booking flow.

The project is built with TypeScript, SCSS, Nunjucks, Webpack and GitHub Actions, following the Atomic Design methodology (atoms → molecules → organisms → templates → pages). All copy, meta tags, and media configuration are centralized in src/data/pages/index.json, which is injected into Nunjucks templates at build time. The result is a maintainable, scalable, and SEO‑ready static site with high Lighthouse Perfomance Scoring (90+).

• https://github.com/rolling-scopes-school/tasks/blob/master/stage1/tasks/portfolio/portfolio.md

• https://www.figma.com/design/iFsApEUsf6tPwXas56gOiT/Portfolio

• https://elrouss.github.io/portfolio/

back to contents

• TypeScript 5, strict typed UI logic
• Nunjucks templating via html-bundler-webpack-plugin
• SCSS with PostCSS Preset Env
• Webpack 5 toolchain (dev server, production build)
• ESLint, Stylelint, Prettier, Husky

back to contents

1. git clone https://github.com/elrouss/portfolio.git — clone project
2. npm ci — install dependencies
3. npm run dev — start dev server (http://localhost:8080)

back to contents

1. Adaptive and responsive layout (380 px, 768 px, 1440 px+)
2. Accessible header with hamburger + drawer, smooth in‑page navigation
3. Custom portfolio slider
   • Desktop: hover areas trigger smooth auto‑scroll with requestAnimationFrame
   • Mobile & Tablet: swipe interactions
4. FAQ accordion with persisted open state (LocalStorage) and smart first‑visit default
5. Pricing card list with booking dialog
6. Content‑driven templating (JSON → Nunjucks) for clean separation of content and layout
7. SEO‑ready meta: Open Graph + Twitter cards, favicons, theme color

back to contents

• Atomic Design structure: atoms/, molecules/, organisms/, templates/, pages/

back to contents

• Responsive images (<picture>) with WebP and multiple resolutions
• Lazy media loading where supported (slider data is marked as lazy)
• Critical CSS extraction (src/assets/styles/_critical.scss)
• Minified, hashed assets for long‑term caching
• PostCSS preset env and Browserslist targeting for cross‑browser support
• Event throttling and requestAnimationFrame for smooth, jank‑free interactions

back to contents

• Semantic landmarks and headings for better screen reader navigation
• Keyboard‑friendly navigation
• ARIA attributes
• Respect for user motion preferences and clear focus styles on interactive controls

back to contents

src/
  assets/
    styles/              # SCSS (variables, mixins, critical, themes)
    images/ fonts/ icons # optimized static assets
  components/
    atoms/               # button, icon, input, picture, etc.
    molecules/           # nav, drawer, pricing-card, etc.
    organisms/           # header, hero, portfolio slider, faq, contacts
    templates/           # page templates (home)
  data/
    pages/index.json     # all page copy + meta + media config
  utils/                 # throttle, styles utils
  services/              # local-storage, touch-device adapters
  constants/             # breakpoints, transitions

back to contents

• npm run dev — start development server
• npm run build:dev — development build
• npm run build:prod — production build
• npm run tsc — check TypeScript types
• npm run eslint / npm run eslint:fix — lint TypeScript
• npm run stylelint / npm run stylelint:fix — lint styles
• npm run prettier:check / npm run prettier — format

back to contents

Hosted on GitHub Pages: https://elrouss.github.io/portfolio (see homepage in package.json).

Build with npm run build:prod and publish the dist/ folder (e.g., via CI or manual upload). CI is configured with GitHub Actions to run linting and produce artifacts on push.

back to contents

ISC © 2025 Boris Zashliapin

back to contents