SpikiTech
The production website of a hybrid AI and communication academy, which I designed and developed myself, and its certificate system, which I developed.
- Kind
- Designed and built independently
- What it is
- EdTech website
- My role
- Design and development
- Period
- 2026
The idea
SpikiTech is an academy offering live AI, project-building and public-speaking classes for students in Classes 6–12. Its website is the main way parents discover the programme, book counselling and claim certificates.
- Who it's for
- Parents and students in Classes 6–12 finding out what the academy teaches and how to join.
- The problem
- A marketing site for parents and students has to explain a new kind of programme clearly, look consistent across many sections, and stay legible on every screen size.
What I built
I designed and developed the SpikiTech production website myself, and I developed its certificate system. The items below are specific pieces of that work, with the commits they shipped in. My three-month internship at SpikiTech is a separate engagement.
- Designed and developed the production website at spikitech.com in Next.js.
- Redesigned “The SpikiTech Method” section on the homepage.
- Rebuilt the “Meet Spiki” AI-companion section.
- Rebuilt the interactive-tools and student-achievements sections.
- Added an “Our Teachers’ Approach” section to the course page.
- Added a scroll-aware sticky call to action and unified the brand blue across 44 files.
- Cleaned up mascot artwork across sections and fixed text overlapping illustrations.
- Developed the certificate system: students claim a certificate themselves and track their request, download it as a PDF or an image, and anyone can verify it by its ID; an admin area manages claim codes, requests, templates and issued certificates.
What it does
Each feature is verified in the source code. The label says whether it is on the production branch or still in staging.
Certificate system
In productionSelf-serve claims with request tracking, downloads as PDF or image, public verification by certificate ID, and an admin area for claim codes, requests, templates and issued certificates.
The wider site
Public features of spikitech.com, captured from the live site.
Future Skills assessment
A free, interactive psychometric assessment for students.
Programme and curriculum pages
Course, mastery-class and curriculum pages, plus free counselling booking.
The experience
Real screens, captured from the live site as a first-time visitor sees them.
The engineering
How it is put together, and the problems that took the most care.
spikitech.com is a Next.js App Router site. Homepage and course content is composed from self-contained section components, which made it possible to redesign one section at a time without touching the rest.
Pages
Next.js App Router routes for the homepage, course, certificates, blog and counselling.
Section components
Each homepage band (method, AI companion, tools, achievements) is its own component, composed by the page, so one section can change without touching the rest.
Design tokens
A single brand blue applied consistently across components.
Technology
- Site
- Next.js
- React
- Tailwind CSS
- Framer Motion
- Data and auth
- Supabase
Hard problems, and how I solved them
One brand colour, many files
- Problem
- The brand blue had drifted between sections, so the site looked slightly different from page to page.
- Approach
- I unified it to a single value across 44 files in one focused change, kept separate from the section redesigns so it could be reviewed on its own.
Illustrations that don't fight the text
- Problem
- Mascot illustrations clipped or overlapped headings and card text in several sections.
- Approach
- I re-cut the mascot poses cleanly from the source artwork, swapped in transparent versions and adjusted card layouts until no text was covered.
The evidence
What can be checked, and what the public version does not do.
- My role
- Designed and developed the website, and developed its certificate system, independently
- Separately
- Three-month internship at SpikiTech, completed 2026
- Source
- Company repository (not public)
Explore the product
Need a website that explains your business clearly?
I designed and developed SpikiTech's production website and developed its certificate system. If your business needs a site that explains a new idea well on every screen, and can be improved one section at a time, I can build yours.