Nails by Betty
- Type
- Side project
- Role
- Design and build
- Year
- 2025
- Stack
- JavaScript, Tailwind, Vite, HTML, Vercel, Formspree
- Live site
- Visit site
A concept site for a nail technician friend: script wordmark, blush gradient, services, gallery and FAQ.
What this is
A concept website for Betty, a friend from university who does nails near the RSU back gate in Port Harcourt. It's a design piece, made for her. The services, prices and testimonials on the page are placeholders. They show how the content would sit, not what she charges or what her clients said.
I hosted it on Vercel and sent her the link. I don't know whether it brought her any customers.
What I designed and built
The whole thing is mine: the visual design, the layout, the copy structure and the code. The feel of the site comes from a few deliberate choices:
- A script wordmark on a soft gradient. The hero is "Nails by Betty" set in Meow Script over a blush-to-rose gradient, with a single white "Book Now" pill. Pink is the one accent colour used throughout the rest of the page.
- A short, clear page order. Hero, about, services, gallery, testimonials, contact, FAQ. Someone arriving from a link can find prices and a way to book without hunting.
- Small touches of motion. Service cards lift on hover, gallery images scale up slightly, and anchor links scroll smoothly.
It's a single static page: HTML, Tailwind (the v2 CDN build), Font Awesome, and one JavaScript module. Vite is only the dev server.
Code I wrote
- Business details in one place. The phone number, address and the year the business started live in a single
companyobject. Elements marked withx-company-*attributes get their text from it, and the "years in business" line is computed from the start year, so nothing is retyped in several places. - A contact form with no backend. The form submits JSON from
fetchto Formspree and shows a toast for success or failure, including the error text Formspree returns. That kept the site fully static. - An FAQ accordion. It opens one answer at a time and swaps the +/- sign, in about twenty lines with no library.
- Search and sharing metadata. I wrote the title, description and Open Graph and Twitter tags, and switched the image paths to absolute URLs so link previews show the right image.
Where it stands
It's live at nailsbybetty.vercel.app. It's a concept piece and I've presented it as one.