A privacy-first, open-source portfolio and microblogging site. Hand-written in vanilla HTML, CSS and JavaScript with no build step and no frameworks, hosted on GitHub Pages, with a small admin panel for posting updates and an automatically generated RSS feed.

Source: Google PageSpeed Insights

koulaxizis.gr is the personal site of Christos Koulaxizis (sound engineer, author, musician, and founder of the independent publisher Glarolykoi). It is a single page with these sections:

• About, Books, Music (streaming platforms), Videos, Articles & Interviews
• Design: portfolio of websites, web apps and plugins
• Products (merchandise), Links, Contact
• Updates sidebar: short posts loaded from updates.json, with search, emoji-tag filters, pagination and share buttons

/
├── index.html            # The single page (portfolio + updates sidebar), JSON-LD, Open Graph, CSP
├── script.js             # Theme toggle, updates loading/search/filter/share, 404 latest update, PWA install, mobile menu
├── style.css             # Site styles, dark/light themes, responsive rules
├── admin.html            # Admin panel for posting updates
├── app.js                # Admin panel logic (GitHub API commit, drafts, emoji tags)
├── admin.css             # Admin panel styles
├── assets/emoji/picker.css  # Dark-theme overrides for the PicMo emoji picker
├── updates.json          # All updates (the "database")
├── feed.xml              # RSS 2.0 feed, generated from updates.json (do not edit by hand)
├── generate-rss.js       # Node script that builds feed.xml
├── .github/workflows/
│   └── generate-rss.yml  # Runs generate-rss.js on every push that changes updates.json
├── sw.js                 # Service worker (offline support and caching)
├── manifest.json         # PWA manifest (icons, screenshots, shortcuts)
├── 404.html              # Custom "not found" page showing the latest update
├── construction.html     # Maintenance page, can be swapped in for index.html
├── sitemap.xml, robots.txt
├── CNAME                 # Custom domain for GitHub Pages
├── LICENSE.md            # MIT License
├── avatar.webp, og-image.webp, icon-192.webp, icon-512.webp, favicon*
└── screenshots/          # PWA install screenshots (WebP)

1. Open https://koulaxizis.gr/admin.html and paste a GitHub personal access token.
2. Write the post, pick 1 to 3 emoji tags, and press 📤 Αποστολή (or Ctrl+Enter).
3. The panel reads the current updates.json through the GitHub Contents API, adds the new post at the top, and commits it to main. If the file changed in the meantime it re-reads and retries (up to 3 times); if every attempt fails it shows an error and keeps the text as a draft.
4. The push triggers generate-rss.yml, which rebuilds feed.xml and commits it.
5. GitHub Pages republishes the site and the new post appears in the sidebar.

Each entry in updates.json looks like this:

{
  "date": "2026-09-03T12:01:00",
  "displayDate": "03 Σεπτεμβρίου 2026, 12:01",
  "content": "Text of the update, links are made clickable automatically.",
  "tags": ["🇬🇷", "📺️"]
}

• Token: accepts classic (ghp_…) and fine-grained (github_pat_…) tokens. A fine-grained token needs only Contents: Read and write on this repository. The token stays in memory and is never saved.
• Character limit: optional, 280 by default (adjustable 50 to 1000), with colour-coded counter, word count and reading time.
• Emoji tags: PicMo picker with search and recents, plus a "frequently used tags" list built from existing posts.
• Special characters: « » • – — … € £ © ® ™ ° ± ÷ × √ ≠ ≤ ≥
• Drafts: auto-saved to localStorage every 2 seconds, with a draft list to load or delete them.
• Shortcuts: Ctrl+Enter send, Esc close menus, Alt+C clear.

• Dark/Light theme: follows prefers-color-scheme on first visit; a manual choice is saved in localStorage under theme.
• Updates sidebar: newest first, 5 at a time with a "show previous" button, live search over text and tags, tag filter bar, relative timestamps, skeleton placeholders while loading.
• Safe rendering: update text and tags are HTML-escaped before display; URLs are then turned into links that open in a new tab with rel="noopener noreferrer".
• Share: native share sheet on mobile, copy to clipboard on desktop.
• Accessibility: skip link, ARIA labels, keyboard focus styles, reduced-motion support.
• SEO: JSON-LD (Person, Organization, WebPage, SiteNavigationElement), Open Graph and Twitter cards, canonical URL, sitemap, RSS autodiscovery.
• 404 page: friendly message and the latest update.
• Hard refresh: clicking the avatar clears caches and the service worker, then reloads.

• Installable on Android and desktop Chromium browsers (an Εγκατάσταση button appears in the footer when the browser allows it), with shortcuts to Updates, Services and Contact.
• HTML: network first, cached copy when offline.
• JSON/XML (updates.json, feed.xml): always fetched fresh, cached copy when offline.
• CSS/JS/images: served from cache, refreshed in the background.
• Versioning: CACHE_NAME (currently koulaxizis-v7). Increase it whenever cached files change so visitors get the new versions; old caches are deleted on activation.

The service worker and fetch() need a web server (they do not work from file://):

git clone https://github.com/koulaxizis/koulaxizis.git
cd koulaxizis
python3 -m http.server 8000

Then open http://localhost:8000. To rebuild the feed locally: node generate-rss.js.

1. Fork the repository and edit the content in index.html.
2. In app.js, set GITHUB_USER, REPO_NAME and BRANCH; in generate-rss.js, set baseUrl.
3. Replace updates.json with { "updates": [] }.
4. Enable Settings > Pages with source main. For a custom domain, put it in CNAME and configure DNS.
5. Make sure GitHub Actions are allowed to write to the repository (the RSS workflow commits feed.xml).

Released under the MIT License; see LICENSE.md. Issues and pull requests are welcome at https://github.com/koulaxizis/koulaxizis.

Built by Christos Koulaxizis. No trackers, no ads, no cookies.

View Live Site · Report an Issue