Next.js · Non-profit

Fundacja Out of the Box

A foundation's website, rebuilt from a template export into Next.js 16

Fundacja Out of the Box in Łódź runs textile and sewing trainings and helps people at risk of exclusion, such as women and seniors, into the textile trade. I rebuilt its website from an old static export of a template into a Next.js 16 app with full SEO metadata, structured data, security headers and a validated contact form.

Role: Sole developer: all 57 commits
Period: May - Sep 2026
Stack: Next.js 16
React 19
TypeScript
Tailwind CSS 4
Framer Motion
React Hook Form
Zod
Docker
Live site: fundacjaoutofthebox.pl(opens in a new tab)

Fundacja Out of the Box: homepage on a desktop screen

contact form height before the button: 1,101 → 475 px
font families: 4 → 1
schema.org types in JSON-LD: 5

Context

The previous site was a static export of a Next.js 14 template, with leftover template pages and a contact form handled by a PHP mail() script.

The foundation also reports EU-funded projects, which need their own page with the required logos and contract details.

What I did

Next.js 16 App Router app with standalone output in a multi-stage Docker build
Shared metadata builder, Open Graph image per route, sitemap, robots and JSON-LD (NGO, WebSite, ContactPage, Service, BreadcrumbList)
Security headers (HSTS, nosniff, frame, referrer and permissions policies) and images served as AVIF or WebP
Fluid type scale with clamp() and an accessible mobile menu with a focus trap and Escape to close
A logo that folds into a box on hover, in CSS only and respecting reduced motion
Partner logo marquee, swipeable slider with dots and a cookie banner that steps aside at the footer
Contact form with React Hook Form and Zod, consent checkboxes and delivery over SMTP

Hard parts and how I solved them

Problem
After the move to Next.js 16, opening another page left it scrolled 188 px down instead of at the top.
Solution
Added data-scroll-behavior="smooth", so Next.js 16 switches smooth scrolling off during navigation and every page opens at the top.
Problem
Testing on a real phone failed: the dev server returned 403 over the local network and the page went blank.
Solution
Allowed origins read from the machine's network interfaces, plus a noscript fallback so the page never renders empty.
Problem
Headings hit their maximum size too early, around 1,031-1,239 px, and looked oversized on laptops.
Solution
Recomputed the clamp() slopes and lowered the maxima, for example h1 from 90 to 72 px.

Results

Contact form fits on one screen from 1280 × 720: 1,101 → 475 px before the send button
"Who we are" section 921 → 635 px tall at 1430 × 746
Typefaces reduced from 4 families to 1