The website of WebFully, a digital studio in Mjölby, Sweden. One set of templates and content files produces a fast static site and a custom WordPress theme, in Swedish and English.
- Live Site
- Overview
- Project Summary
- Target Audience
- Services and Pricing Model
- User Experience (UX)
- Features
- Technologies Used
- How It Is Built
- Testing
- SEO
- Deployment
- Credits
WebFully is the studio's own website. It presents eight services, a two-package price list, special projects and a contact form.
The pages are written once, as templates and JSON content, and rendered by two engines that produce identical HTML: a Python build for the static site and a PHP twin inside the WordPress theme.
WordPress is only the editor and the mail sender. There is no page builder.
The site is available in Swedish and English and works on desktop, tablet and mobile.
The site is the studio's front door: it explains what WebFully builds, shows examples of each service, states clear prices and makes it easy to get in touch. It is designed to feel spacious, premium and technical, and to be fast enough that the speed itself is part of the pitch.
The visual idea is a single coral dot that travels through the page, from the hero to the footer logo, and links the sections into one story. Motion is built with GSAP and runs on the home page for every visitor.
The studio is presented as an entity: the site shows no personal name, face or team size.
The site is aimed at small and medium-sized companies in Sweden that need a website, a visible brand or help being found online. These are owner-run businesses such as builders, salons, shops and clinics, who want a clear offer, a fixed price and one partner for web, search, brand, content and ads.
The site also serves visitors who arrive from search engines and AI assistants with a concrete question, such as "who builds fast websites in Mjölby", and need a straight answer on the first screen.
WebFully sells services directly to businesses. The site presents eight services, each with its own page:
| Service | Page |
|---|---|
| Web | /services/web/ |
| SEO and AEO | /services/seo-aeo/ |
| Support and hosting | /services/support/ |
| Branding | /services/branding/ |
| Content | /services/content/ |
| Ads | /services/ads/ |
| Consulting | /services/consulting/ |
| Apps | /services/apps/ |
The home page shows two website packages with a yearly and monthly switch, a list of add-ons and a custom offer. The prices live in content/site.json, so they are changed in one place.
- Explain the studio's services in plain language.
- Show one concrete example for each service.
- State prices openly.
- Turn a visit into a contact request with as few steps as possible.
- Stay fast, accessible and readable on any device.
- Be found by both search engines and AI assistants.
| Page | URL (Swedish at the root, English under /en/) |
|---|---|
| Home | / |
| Eight service pages | /services/<slug>/ |
| Special projects | /special-projects/ |
| Contact | /contact/ |
| Privacy policy | /privacy/ |
| Error pages | /404.html, /500.html |
The home page runs in this order: hero scene, chapters (one sticky card per service), process, pricing, special projects teaser, services ticker, testimonials, call to action and footer.
- Each section is its own template with its own CSS and JavaScript file, so a part can be changed without touching the others.
- Visitor text lives in
content/, never in templates. - The Swedish and English pages have the same structure and are linked with
hreflang. - Inner pages follow one pattern: page hero, three example cards, working phases, one proof image, frequently asked questions, related services and a call to action.
- Navigation is dark and floats over the page. The footer, mobile menu and cookie panel are dark too.
The design is built on black and charcoal with a single coral accent. Coral accompanies the black and never dominates.
| Hex | Name | Usage |
|---|---|---|
#F0624D |
Brand coral | Logo, the travelling dot, text and buttons on dark backgrounds. |
#E8573F |
Text coral | Large text and accents on light backgrounds. |
#2A2A2A |
Charcoal | Text on light backgrounds. |
#050505 |
Black | Base of the dark areas. |
#111111 |
Soft black | Alternate dark sections. |
#F4F2EF |
Light | Light section backgrounds. |
Theme principle: Light content areas for readability, dark navigation and footer for contrast, and one coral accent for the logo dot and calls to action.
- Manrope (light weight) for the base text and all headings.
- Instrument Serif, italic, only for the coral accent word in a heading.
- IBM Plex Mono for small numbered labels.
- All three fonts are self-hosted, so no visitor data goes to a font service.
- Minimum visible text size is 13px, except the small mono labels.
- Corners are sharp everywhere, like the logo.
- Primary buttons use the coral outline on dark backgrounds; the same coral family is used for focus and hover states.
- The "Start a project" buttons lead to the contact section of the page, or to the contact page where there is none.
-
Swedish and English versions
Every page exists in both languages, with a language switch in the navigation and the footer. -
Travelling dot journey
A coral dot moves through the home page, drops from the services ticker to the call to action and lands in the footer logo. -
Sticky service chapters
The home page shows one card per service as the visitor scrolls. -
Pricing with a yearly and monthly switch
Two packages, add-ons and a custom offer, with a sheet dialog for details. -
Service pages with examples
Each service has three example cards, working phases, a proof image, frequently asked questions and related services. -
Client testimonials
Two quotes on the home page with the client logo. The client name links to the client's own site. -
Contact form
Sent by email through the WordPress theme, with validation on the client and the server. -
Cookie consent
Only necessary cookies by default. Statistics and marketing are asked for first. -
Editable content in WordPress
Text, company details and images can be edited in the WordPress admin, and fall back to the files shipped with the theme. -
Custom error pages
Custom 404 and 500 pages in both languages. -
Responsive layout
The layout, the motion and the dot journey adapt to desktop, tablet and phone.
Future improvements could include a client area for approving work, a booking calendar connected to the contact form, a dark theme (the switch exists and is hidden for now), and more client stories as projects are completed.
- HTML5
- CSS3
- JavaScript
- Python 3
- PHP 8
- WordPress, as editor and mail sender only
- GSAP and ScrollTrigger for motion (included in
js/vendor/) - Python standard library only for the build; nothing is installed
- GitHub Actions to build, test and publish the theme
- Hostinger for hosting, with automatic deploys from the
deploybranch - LiteSpeed Cache on the server
- Git and GitHub for version control
- VS Code for development
- Google Fonts source files, self-hosted
- WebP for all images
The site has no database of its own. Content is JSON:
content/site.jsonholds shared data: languages, pages, services, prices, company details and links.content/<language>/common.jsonholds shared text such as navigation and the footer.content/<language>/pages/holds one file per page.content/<language>/services/holds one file per service.
Both renderers read these files. On the live site a value saved in the WordPress admin takes precedence over the file.
| Folder | Content |
|---|---|
content/ |
Text and data, sv/ and en/, plus site.json |
src/ |
Build script and templates |
css/, js/ |
One stylesheet and one script per part of the site |
assets/ |
Logos, icons, fonts, share images, client logos and service images |
wordpress/ |
The theme's PHP, admin editor and tests |
The theme is tested on every push by the deploy workflow:
- Parity test (
wordpress/tests/render.php): renders every page with the theme's PHP and compares it with the static build. All 26 pages, the sitemap,robots.txtandllms.txtmust be identical. - Smoke test (
wordpress/tests/wp-smoke.php): checks the theme's routes and functions with WordPress functions replaced by stand-ins. - Syntax check:
php -lon every PHP file of the theme. - Link and asset check: every internal link and image in the build points to a file that exists.
- Manual checks in the browser on desktop and mobile, with measured values for sizes and positions.
- One
<h1>per page, descriptive page titles and meta descriptions in the page language. - Canonical links and
hreflangbetween the Swedish and English pages. - Open Graph and Twitter card tags, with a share image for each language.
- Structured data as JSON-LD: Organization and LocalBusiness.
sitemap.xml,robots.txtandllms.txt, written by both renderers.- A real
alttext in Swedish for every image, with Englishalttext on the English pages. - Self-hosted fonts, long browser caching for theme files and WebP images for short load times.
- A redirect from
wwwto the main address.
Python 3.8 or later is needed. Clone the repository and run:
python3 src/build.py --serve
The site opens on http://localhost:5500 and is rebuilt on every change. Stop it with Ctrl+C.
python3 src/build.py # build once into dist/
python3 src/build.py --theme # build the WordPress theme into theme/webfully/
php wordpress/tests/render.php # parity test (needs PHP 8)
php wordpress/tests/wp-smoke.php
Run both build commands before the tests. dist/ and theme/ are generated and are not committed.
Every push to main runs .github/workflows/deploy.yml:
- Builds the static site and the theme.
- Runs the syntax check, the parity test and the smoke test.
- Publishes the theme files to the
deploybranch.
Hostinger pulls the deploy branch into wp-content/themes/webfully. A push reaches the live site in about a minute. As a fallback, theme/webfully.zip can be uploaded in WordPress under Appearance, Themes.
- Text lives in
content/. File names are English, lowercase and with hyphens. - Images are WebP and are compressed before they are committed. Paths in the content files start with
/assets/and the theme adds its own URL on WordPress. - The Swedish search text goes in the
altfield of each image.
The following resources and tools were used during development:
- Manrope, Instrument Serif and IBM Plex Mono for typography, under the SIL Open Font Licence (licence files are in
assets/fonts/) - GSAP and ScrollTrigger for motion
- WordPress as the editor and mail sender
- Hostinger for hosting
- GitHub Actions for building and deploying
The logo, design, copy structure and code were created for this project.