Department of Product & Systems Design Engineering
Projects | | Links: Live preview
Complete rebuild of a university department’s website as a bilingual Astro 5 static site: 250+ pages per language, from 85 course pages and 63 staff profiles to an interactive timetable builder, full-text search, and three accessible color themes.
Status: in development. The Greek site is architecturally complete and under faculty review: most content is in place, while time-sensitive sections such as announcements and events carry placeholder material that will fill in organically at launch. The English side is architecturally complete (mirrored routing, templates, language switcher), with content following as translations arrive. A live development preview is linked above.
At a glance
| Stack | Astro 5 + TypeScript, fully static: no CMS, no database |
| Scale | 250+ pages per language, Greek and English throughout |
| Features | Personal timetable builder, client-side full-text search, three color themes |
| Accessibility | Built to WCAG 2.1 AA |
| History | Successor to the Drupal site I co-built in 2018 and still run |
The problem
In 2018 I co-built the website of the Department of Product and Systems Design Engineering (University of the Aegean) on Drupal; it is still in production today. After eight years of service, though, the CMS model was showing its cost: every Drupal upgrade cycle demanded maintenance work, accumulated technical debt made changes riskier, and day-to-day content updates stayed dependent on a database-backed system that needed constant patching. The department wanted a modern, bilingual site that would stay fast, secure, and easy to maintain for the next decade.
The rebuild
I designed and built the successor from scratch as a fully static site, Astro 5 and TypeScript: no CMS, no database. Content lives in structured, version-controlled files, so there is no server-side attack surface and nothing to patch. Custom Python scrapers migrated pages, courses, and staff profiles from the old site, preserving the original text exactly.
The result is a large site with application-like functionality:
- Bilingual throughout: Greek and English with mirrored page structure and a language switcher on every page.
- 250+ pages per language: 80+ course pages and 60+ staff profiles generated from structured data with dynamically filtered listings, plus around a hundred hand-built pages across the department, studies, research, and student life sections.
- A family of page templates: multiple hero and layout variants, with custom JavaScript functionality where a page called for it.
- Full-text search in both languages (Pagefind), running entirely client-side.
- Accessibility as a baseline: built to WCAG 2.1 AA, with keyboard navigation, screen-reader support, minimum type sizes, respected motion preferences, and a dedicated high-contrast theme.
- Custom megamenu navigation, events and announcements systems, research lab pages, and usage analytics.
Next phase: delegated editing
A later phase is already specified: a few dozen academic and administrative staff will edit content directly, each signing in with existing university credentials (LDAP) and editing only what is theirs:
- staff members: their own profiles and assigned courses where applicable
- administrative staff: the announcements
- designated editors: specific sections of the site, assigned as needed
A headless CMS acts as the editing interface and writes every change back to the git repository, which stays the single source of truth: the build pipeline and the administrator’s direct edit access are untouched. This restores the roles-and-permissions model the old Drupal site provided natively, without giving up the static architecture.
Highlights
The personal timetable builder. Students pick their courses and compose a weekly schedule that persists in the browser and can be shared as a plain URL. Effectively a small web application running inside a static site, with no backend behind it.
Three themes, three designs. Light, dark, and high contrast are deliberately distinct designs; every component is tuned for each, down to hover states and motion behavior.
A custom animated header per study stream. Each of the three study-stream pages opens with a header built for its subject: interactive particles, morphing 3D shapes, an animated git graph.
The same attention runs through the rest of the site; the easiest way to see it is to use it.
The same composed timetable in the three themes: light, dark, high contrast.
Screenshots
Outcome
The site has been presented to the department’s faculty and received well; it is now in the final content phase before launch. The architecture decision pays off permanently: static hosting is fast and effectively free, there is no upgrade treadmill, and the department gets a site maintained with ordinary text edits instead of CMS administration. A direct answer to the problems that ended the previous site’s run.
