Project detailsPortfolio WebsiteCompleted

Web Dev Portfolio

Web Dev Portfolio is the production portfolio you are currently browsing. It presents frontend projects, services and case studies through bilingual routes, reusable components, dynamic project pages, static export and Cloudflare Pages deployment under a custom domain.

Liveon
Sourceon
Previewon

Open live demo View source code All projects

Next.jsTypeScriptTailwind CSSi18nStatic ExportCloudflare Pages

web-dev-portfolio

Project links

Live version and source code

This section collects external links connected with the project. When a project is deployed or published, the links will appear here.

Live Demo

A deployed version of the project that can be opened and tested in the browser.

Available

https://zandeckidev.pl

Open link

Source Code

The source code repository with the project structure, components and implementation details.

Available

https://github.com/PiotrZandecki/web-dev-portfolio

Open link

Live preview

Embedded project preview

When a project has a deployed live version, it can be previewed directly inside the portfolio case study.

Live browser preview

Open live version

Snapshot

Project at a glance

A compact overview of the project type, status, stack and the most important implementation highlights.

Status: Completed
Year: 2026
Type: Portfolio Website
Technologies: Next.js, TypeScript, Tailwind CSS

Key highlights

Production deployment under zandeckidev.pl
Polish and English language versions
Dynamic project case study pages
SEO routes and static export workflow

Technical overview

Project delivery status

A quick technical status of the project: deployment, source code, visual preview and implementation stack.

Live demo

Available

This project has a live version that can be opened and tested in the browser.

https://zandeckidev.pl

Source code

Available

The source repository is available and can be reviewed externally.

https://github.com/PiotrZandecki/web-dev-portfolio

Visual preview

Available

The project currently uses a designed preview image prepared for the portfolio case study.

Designed portfolio preview

Stack

Available

Technologies used to build or present this project inside the portfolio.

Next.js, TypeScript, Tailwind CSS, i18n, Static Export, Cloudflare Pages

Implementation

A scalable bilingual portfolio and project hub.

Web Dev Portfolio is built as a central project hub with localized routes, project case studies, reusable sections, structured data and static deployment.

Localized routing

The portfolio uses separate Polish and English routes to support bilingual presentation.

Key points

/en and /pl route structure
Language-aware navigation
Localized metadata and content

Project content model

Project data is stored in content files and reused across cards, case studies, previews and SEO routes.

Key points

Reusable project data
Dynamic project pages
Shared visual previews

Static deployment

The project is configured for static export and deployed through Netlify.

Key points

Static output
Sitemap and robots
Open Graph image and manifest

Testing & review

Checked as a production portfolio site.

The main review focus is route coverage, language switching, project pages, SEO routes and production deployment.

Route coverage

All main pages should work in Polish and English after static export.

Checks

/en and /pl homepage
Projects, services, about, stack and contact pages
Dynamic project case study routes

Production checks

The project should pass local checks before being pushed and deployed.

Checks

ESLint
Next production build
Netlify deploy verification

SEO and metadata

SEO routes and metadata should stay aligned with the deployed production URL.

Checks

Sitemap
Robots
Open Graph image

Quality checklist

Technical presentation readiness

A project-focused checklist showing which presentation and delivery elements are already available inside the case study.

Case study page

Ready

The project has a dedicated case study page with structured sections.

Live demo

Ready

The deployed project can be opened and tested directly in the browser.

Source code

Ready

The source repository is connected and can be reviewed externally.

Visual preview

Ready

The project has a visual preview prepared for portfolio presentation.

Technical stack

Ready

The technologies used in the project are listed and visible.

Next steps

Ready

The project has a clear list of future improvements or development notes.

Release status

Live production portfolio connected to a custom domain.

Web Dev Portfolio is the main production project. It is deployed on Cloudflare Pages, connected to zandeckidev.pl, linked to its source repository and prepared as a maintainable hub for future frontend case studies.

Live demo

Live on Cloudflare Pages

Connected

The production deployment is connected and publicly available under a custom domain.

Resolved live URL

https://zandeckidev.pl

The project is deployed as a static site.
The live URL is connected to zandeckidev.pl.
The case study can embed the live site preview.

Open live

Source code

Repository connected

Connected

The public source repository is connected and available from the project links.

Resolved source URL

https://github.com/PiotrZandecki/web-dev-portfolio

The source link points to the GitHub repository.
The repository documents the project structure and deployment workflow.
The source card is visible in the technical project sections.

Open source

Visual preview

Preview available

Connected

A portfolio-specific designed visual preview is connected.

Asset

/project-previews/web-dev-portfolio-home.svg

The preview appears in project cards and case study sections.
It can be replaced with a real production screenshot later.
The asset is part of the public project preview system.

Build command

npm run build

Build output

out

Checks

ESLint check before deployment.
Next.js production build.
Static export for Cloudflare Pages.
Sitemap, robots, manifest and Open Graph routes.

Live code showcase

A looping preview of the code behind the case study.

A curated look at selected implementation fragments. The preview loops through project files while the source button stays available when a public repository is connected.

Repository connectedWeb Dev Portfolio

Localized project hub

The projects route combines localized metadata, structured data, project cards and technical portfolio sections.

Code preview

src/app/[locale]/projects/page.tsx

Open repository

src/app/[locale]/projects/page.tsx

Asset manifest

Visual preview assets

A technical overview of the preview assets used to present this project across cards, featured sections and case study pages.

Portfolio homepage

A production portfolio homepage focused on positioning, featured work, services and contact.

Asset path: /project-previews/web-dev-portfolio-home.svg
Asset type: SVG preview
Designed size: 1200 × 760

Used in

Project cards
Featured project section
Case study hero
Visual preview section

Preview available

A portfolio-specific designed visual preview is connected.

Future screenshot replacement

Designed SVG previews can be replaced with real screenshots once the project has a final live deployment.

Case Study

How this project was built

A short breakdown of the project scope, features, technical decisions and next development steps.

Features

Bilingual routing with dedicated Polish and English pages.
Project hub with filtering, search and dynamic case studies.
Reusable components for cards, summaries, sections and project details.
Static export deployment on Cloudflare Pages with a custom domain.

What I learned

How to organize multilingual content without making the project too complex.
How to use dynamic routes for scalable project detail pages.
How to separate content, configuration, UI components and routing.
How to prepare a portfolio project for deployment, SEO and future growth.

Challenges

Designing routing around locales and project slugs.
Keeping the content model flexible enough for future projects.
Balancing portfolio presentation with project hub functionality.

Next steps

Replace designed previews with real production screenshots where available.
Add live demos for Private Space and Aurora Beauty under dedicated subdomains.
Continue adding new frontend projects as separate case studies.

Roadmap

What could be improved next

A project roadmap helps keep the case study honest: what is already done, what is still pending and what can be improved in the next iteration.

Replace designed previews with real production screenshots where available.

Add live demos for Private Space and Aurora Beauty under dedicated subdomains.

Continue adding new frontend projects as separate case studies.

Every project can evolve.

This portfolio is designed so new deployments, source links, screenshots and technical notes can be added without rebuilding the whole structure.

Discuss a project All projects

Continue exploring

More project case studies

All projects

← Previous project

Aurora Beauty

A modern business website for a beauty brand, focused on services, trust and responsive presentation.

Next project

More projects

Explore other case studies

Each project has its own page, structure and development notes. This portfolio is designed to grow with new work.

In progressProductivity App

Private Space

A personal productivity dashboard for managing notes, lists and plans in one structured workspace.

Livesoon
Sourcesoon
Previewon

Next.js
TypeScript
Tailwind CSS
Local Storage

Year

2026

View Project

CompletedBusiness Website

Aurora Beauty

A modern business website for a beauty brand, focused on services, trust and responsive presentation.

Livesoon
Sourcesoon
Previewon

Next.js
TypeScript
Tailwind CSS

Year

2026

View Project