Andreas Wagner — Jekyll + Tailwind CSS v4

Personal portfolio site built with Jekyll and Tailwind CSS v4.

Structure

.
├── _config.yml          # Site settings, author info, nav
├── _data/
│   ├── cv.yml           # Experience timeline entries
│   ├── skills.yml       # Ability tag groups
│   ├── projects.yml     # Project cards
│   └── oss.yml          # Open source items
├── _includes/
│   └── icons/           # SVG icon partials (server, cloud, code)
├── _layouts/
│   ├── default.html     # Base layout (nav + blog band + footer)
│   └── home.html        # Home page (hero + two-column grid)
├── assets/
│   └── css/
│       └── main.css     # Tailwind v4 entry — @theme tokens here
├── index.html           # Home page (uses home layout)
├── Gemfile
└── package.json

Setup

1. Install Ruby dependencies

bundle install

2. Install Node dependencies

npm install

3. Develop

Runs Jekyll with livereload and Tailwind CSS in watch mode simultaneously:

npm run dev

4. Build for production

npm run build

Output is in _site/.

---

Customisation

Content

All content lives in _data/ and _config.yml — no template editing needed for most changes.

File	What it controls
_config.yml	Name, bio, social handles, nav links
_data/cv.yml	Experience timeline
_data/skills.yml	Ability tags
_data/projects.yml	Project cards + icons
_data/oss.yml	Open source list

Design tokens

All colors, fonts and spacing are defined as CSS custom properties in assets/css/main.css inside the @theme {} block. Tailwind v4 maps these directly to utility classes:

@theme {
  --color-accent: oklch(50% 0.13 235);  /* → text-accent, bg-accent, border-accent */
  --color-ink:    oklch(16% 0.012 265); /* → text-ink */
  /* ... */
}

Change --color-accent to instantly retheme the entire site.

Adding a project icon

Drop an SVG partial into _includes/icons/yourname.html, then reference it in _data/projects.yml as icon: yourname.