English · Ελληνικά
Web projects I've built — with live demos and a few words on how each one works.
A single-page travel guide for Santorini — a hero with a background image, sights, a gallery with a lightbox, a beaches section and a map. Responsive, no frameworks.
- Live: https://santorini-eight.vercel.app/
- Tech: HTML, CSS, JavaScript (vanilla)
- Hosting: Vercel
How it was built: Clean code with no build step — focused on front-end fundamentals: semantic HTML, a responsive CSS layout, and a bit of vanilla JavaScript for the gallery/lightbox and interactivity.
A single-page, mobile-first save-the-date for a seaside wedding: a hero with a live countdown, the venue, accommodation and contact sections, embedded directions and an RSVP form. Bilingual EL/EN.
- Live: https://white-wedding1.vercel.app/
- Tech: HTML, CSS, JavaScript (vanilla)
- Hosting: Vercel
⚠️ Demo with fictional details (names, venue, dates and contacts). The RSVP form is demo-only — it validates input but does not send any data anywhere.
How it was built: No build step — semantic, accessible HTML
(fieldset/legend, ARIA, aria-live), a responsive CSS layout with
scroll-snap section navigation, a vanilla-JS countdown, an attribute-based
EL/EN i18n system, and a client-side RSVP form with native validation.
A modern, full-stack rebuild of a small family-run hotel in Santorini: room presentation, live availability search, a request-based booking flow, price calculation and multilingual content.
- Live: https://scirocco-nine.vercel.app
- Tech: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS v4
- Backend / data: Supabase (Postgres, Auth, RLS), Server Actions, iCal sync
- Hosting: Vercel
⚠️ Demo / educational project. Not the property's official website, not affiliated with the hotel, and it does not take real bookings or payments. Built purely for practice and portfolio.
- Internationalization (i18n): 4 languages (English / Greek / German /
Spanish) with per-language routing in the URL (
/en,/el,/de,/es), server-rendered and SEO-friendly (canonical + hreflang, correct<html lang>from the first paint). - Booking flow: date/guest search from the hero → room list with live availability for those dates → room page with a calendar and pre-filled dates. Request-based bookings (no payment, manual approval by the owner).
- Pricing: seasonal rates per period + tiered charging by number of guests, with a live cost calculation and minimum-stay rules.
- SEO / a11y / UX: Schema.org JSON-LD (LodgingBusiness, HotelRoom, BreadcrumbList), dynamic sitemap/robots, accessibility (keyboard, ARIA, reduced-motion), responsive design and subtle animations.
A full schema with migrations, designed for real hotel operations:
- Tables: rooms (
rooms), room photos (room_images), seasonal rates (rates), booking requests (booking_requests), blocked dates (blocked_dates), iCal feeds, settings (settings), and user profiles/roles (profiles). - Security: Row Level Security (RLS) on every table — a visitor can only
submit a request, never read sensitive data. Availability checks run through
SECURITY DEFINERfunctions, so the availability table is not publicly readable. - Data integrity: an exclusion constraint (
btree_gist) that guarantees no double-booking of the same room over overlapping dates,updated_attriggers, and multilingual content stored asjsonb({en, el, de, es}). - Server-side logic: Next.js Server Actions with validation (zod), a server-side availability re-check before insert, a honeypot against spam, and per-email request throttling.
Two-way sync with external channels (Booking.com / Airbnb): importing bookings via iCal feeds and exporting per-room availability, on a scheduled cron job.
A secure management panel (authentication via Supabase Auth) for: rooms, booking requests (approve/decline), availability/calendar, iCal feeds and general settings.
Email integration (Resend) to notify the owner and confirm to the guest. In the demo it is intentionally disabled so nothing is sent — the buttons and the flow still work normally.
The app also runs in "demo mode" with local seed data when there's no backend connection — that's how the live demo runs without a real database.
An interactive browser game that teaches the Greek Sign Language alphabet using your webcam. It tracks your hand in real time and a custom gesture classifier — trained on my own hand — tells you whether you're signing each of the 24 letters correctly. Includes a Learn mode (hold the sign to advance) and a timed Game mode with lives and scoring.
- Live: https://silent-talk-web-gr.vercel.app/
- Tech: Vanilla JavaScript, MediaPipe Tasks Vision (WASM) for hand tracking, a custom KNN classifier ported to JS
- Hosting: Vercel — fully client-side, runs entirely in the browser
⚠️ Camera-based. Needs webcam permission, and works best on a laptop/desktop. All processing happens locally in your browser — no video or data ever leaves your device.
How it was built: No public Greek Sign Language dataset exists, so I built one from scratch — recording my own hand performing all 24 letters, then augmenting the samples (mirror, noise, scale, rotation). MediaPipe extracts 21 hand landmarks per frame; these are normalized into a position- and scale-invariant vector and classified with a K-Nearest-Neighbors model (cosine distance). The original is a Python + OpenCV desktop app; the web edition is a faithful JavaScript port of the same normalization + KNN pipeline, running 100% client-side.
- GitHub: @geogoor