3c990e5ab6
Integrates HTMX for real-time updates of Experience and Education forms in the admin dashboard, eliminating full page reloads on save and enabling instant addition of new entries. Adjusted the visual prominence of 'Role' in Experience and 'Degree' in Education sections. Fixes: - Corrected database query parameter passing, resolving text field clearing issue on save. - Enabled live 'Add New' functionality for Experience and Education entries.
Modern SSR CV Website with ElysiaJS
A fast, server-side rendered (SSR) CV/Portfolio website built with ElysiaJS, SQLite, and TailwindCSS. Features a custom CMS with Keycloak authentication for managing multi-language content.
Features
- Fast SSR: Built on the Bun runtime and ElysiaJS for high performance.
- Multi-language Support: Built-in i18n (English/German) with clean URL routing (
/en,/de). - CMS Dashboard: Admin panel to manage Profile, Experience, Education, and Skills without touching code.
- Secure Auth: OpenID Connect (OIDC) authentication via Keycloak (using Arctic).
- Dark Mode: Automatic and manual theme switching.
- Portable DB: SQLite database for easy deployment and zero setup.
- Minimalist Design: Clean UI with TailwindCSS and subtle animations.
Prerequisites
Getting Started
1. Install Dependencies
bun install
2. Setup Database
Initialize and seed the SQLite database with default data:
bun run src/db/seed.ts
3. Setup Keycloak (Auth)
Start Keycloak and Postgres using Docker:
docker compose up -d
- Admin Console:
http://localhost:8080 - User:
admin - Password:
admin
Configuration Steps:
- Log in to Keycloak.
- Create a Realm (e.g.,
myrealm). - Create a Client (e.g.,
cv-app):- Client authentication: On
- Valid Redirect URIs:
http://localhost:3000/admin/callback
- Copy the Client Secret from the Credentials tab.
- Update your
.envfile:
KEYCLOAK_REALM_URL="http://localhost:8080/realms/myrealm"
KEYCLOAK_CLIENT_ID="cv-app"
KEYCLOAK_CLIENT_SECRET="your-secret-here"
KEYCLOAK_REDIRECT_URI="http://localhost:3000/admin/callback"
4. Run the Server
bun run src/index.tsx
- Public Site:
http://localhost:3000 - Admin Dashboard:
http://localhost:3000/admin/login
Testing
Run the unit tests for the database layer:
bun test
Project Structure
src/components: Reusable UI components (Layout, Sections).src/db: Database schema, seed script, and query/mutation logic.src/routes: Route handlers (admin.tsx,public.tsx).src/index.tsx: Application entry point.