Case study · Personal portfolio
Web Chef Portfolio
A designer-and-developer showcase — one long page of five screens: a cover, contents, “Designer”, “Developer & Programmer” and contacts. Projects open in carousels with a blurred backdrop.
- Type
- Personal portfolio
- Date
- June 16, 2026, 5 commits
- Stack
- HTML, CSS, JS in one file · Bebas Neue, DM Sans
Cover, 1440px wide.
Phone, 393px.
Contents on a phone.
01
Who it’s for and why
A showcase for clients who need both design and code. It brings together brand identity and business cards for businesses in Snezhinsk, social media cards for online schools, academic presentations, an online school website built with Canva Sites and a Telegram bot written in Python.
The page’s job is to separate the two directions right away — “Designer” and “Developer & Programmer” — let visitors see the work up close and lead them to the contacts: Telegram, VK or email.
02
What was built
- Coverthe name in large type with the second half of each word outlined; a round photo and floating skill tags
- Contentstwo full-width sections; on hover a row fills with black and the arrow slides
- Designerthe lead project “Два Шефа” (Two Chefs), work samples and a separate block of academic presentations
- Developer & Programmerthe HowToSayDasha website, a Telegram bot, C++ projects
- Contacts“Есть задача? Пиши.” (“Got a task? Write.”) and three ways to get in touch
- BuildA single index.html with no bundler: styles, markup and 22 script blocks. Uploaded through the GitHub web interface — 5 commits on June 16, 2026.
- Fonts and colourBebas Neue for headings, DM Sans for text. The palette is six variables: #F5F4F0 background, #0E0E0E black, #5252E8 accent, plus grey, line and white.
- MotionBlocks appear via IntersectionObserver: a 36px shift and a fade over 0.75 s on cubic-bezier(.22,.8,.38,1), with 0.12 / 0.26 / 0.42 s delays.
- NavigationFive dots on the right highlight the current screen; jumps to sections use smooth scrolling.
03
What worked and what to know
-
A recognizable character built from three techniques
Words half filled and half drawn in outline (-webkit-text-stroke). Huge light-grey section numbers, “01” and “02”. A dark cover and contact screen framing the light content in between. And one curve, cubic-bezier(.22,.8,.38,1), for every reveal and every carousel opening, so the motion feels consistent.
-
All the work lives inside one 22.6 MB file
All 105 images (52 JPEG and 53 PNG) are embedded directly in index.html as base64. The file is 22,606,743 bytes; with GitHub Pages compression about 15 MB goes over the network (measured on September 16, 2026). The browser downloads all the work at once, even if the visitor never opens a single carousel, and base64 on its own is about a third heavier than the original images.
What would help: moving the images into separate files of the right size and loading them as the visitor scrolls — the first screen would become light.
-
The fonts have no Cyrillic
On Google Fonts, Bebas Neue and DM Sans support Latin only. So “02”, “HOWTOSAYDASHA” and “&” are set in Bebas Neue, while Russian headings and text fall back to the device’s system font: Arial on Windows, something else on phones. That’s why Latin and Russian words on the same line don’t match.
-
Twenty-one copies of one carousel
Every gallery has its own modal window and its own script: 21 windows with nearly identical open, close and paging functions. They look the same — blurred backdrop, arrows, dots, ← → Esc keys — but any change, such as swipe support on phones, would have to be repeated 21 times.
-
Accessibility and “reduce motion”
Contents items and project cards are div elements with onclick, so they can’t be reached with the Tab key. The tags on the cover bob endlessly, and the page ignores the system prefers-reduced-motion setting.
04
How to check
- Open the portfolio and scroll through all five screens big-portfolio ↗
- Page weight and image count — in the Network tab of the browser’s developer tools index.html ↗
- The file’s upload history commits ↗
Get in touch