Michele Mattioni — Portfolio Site

Personal portfolio and blog site built with Jekyll, hosted on GitHub Pages.

Quick Start

# Serve locally
jekyll serve
# or use Python's built-in server for static testing
python3 -m http.server 8080

Repository Structure

.
├── _config.yml              # Jekyll configuration (title, author, URLs)
├── _layouts/
│   ├── default.html         # Base layout with navbar, footer, JS
│   ├── post.html            # Individual blog post layout
│   ├── page.html            # Static page layout
│   └── front.html           # Homepage layout (deprecated, index.html overrides)
├── _posts/                  # Blog posts (Jekyll auto-generates from here)
│   ├── 2012-06-01-neuronvisio.md
│   ├── 2012-06-04-multiscale-modelling.md
│   ├── 2012-06-04-neuroml-and-standards.md
│   ├── 2012-06-05-science-and-society-program.md
│   ├── 2012-06-05-sustainablesouk-a-geolocalized-market-to-trade-local-goods.md
│   └── 2014-10-05-coinduit.md
├── assets/
│   ├── css/
│   │   └── main.css         # All custom styles (glassmorphism theme)
│   └── gfx/                 # Images and graphics
│       ├── Michele_Mattioni_sepia.jpg   # Author photo
│       ├── coinduit-logo.png
│       ├── multiscale_simulation_msn.png
│       ├── NeuroML_logo.png
│       ├── pyramidal_3D_change_voltage.png
│       └── spines_detailed_thumbnail.png
├── index.html               # Homepage (modern glassmorphism design)
├── 404.html                 # Custom 404 page
├── archive.html             # Post archive listing
├── categories.html          # Categories listing
├── tags.html                # Tags listing
├── pages.html               # All pages listing
├── atom.xml                 # Atom feed (auto-generated by Jekyll)
├── CNAME                    # Custom domain: michelemattioni.me
├── favicon.ico              # Site favicon
├── sitemap.txt              # Sitemap for search engines
├── changelog.md             # Project changelog
├── README.md                # Project readme
├── AGENTS.md                # This file — repo structure & dev guide
├── screenshot-*.png         # PR screenshots
└── .gitignore

Key Files

File Purpose
index.html Homepage — hero section, projects, blog feed, X/Twitter embed
assets/css/main.css All styling — CSS variables, glassmorphism cards, animations, responsive
_layouts/default.html Base HTML wrapper — navbar, footer, JS, font imports
_layouts/post.html Blog post template — title, date, category, tags, prev/next nav
_config.yml Site metadata — title, author, URLs, permalink structure
CNAME Custom domain configuration

Design System

Colors (Light Theme)

  • Background: #f8f9fc (light gray-blue)
  • Cards: rgba(255, 255, 255, 0.8) (semi-transparent white)
  • Text primary: #1a1a2e (dark navy)
  • Text secondary: #4a4a6a (muted purple-gray)
  • Accent: #4a9eff → #8b5cf6 (blue to purple gradient)
  • Card borders: rgba(0, 0, 0, 0.06) (subtle dark)

Typography

  • Font: Inter (Google Fonts) — weights 400, 500, 600, 700, 800, 900
  • Headings: 800-900 weight, tight letter-spacing
  • Body: 400 weight, 1.6-1.8 line-height

Components

  • Navbar: Fixed top, white with blur on scroll
  • Hero: Two-column layout — text left, circular photo right
  • Cards: White glassmorphism with backdrop blur, hover lift + shadow
  • Buttons: Gradient background (blue→purple), rounded corners
  • Tags: Small pills with accent color background

Adding Content

Blog Posts

Create a file in _posts/ with the naming convention: YYYY-MM-DD-title.md

---
layout: post
title: "Post Title"
date: YYYY-MM-DD HH:MM:SS +0000
category: category-name
tags: [tag1, tag2]
description: "Post description"
---

Post content here...

Static Pages

Create in the root with YAML frontmatter:

---
layout: page
title: Page Title
---

Page content here...

Images

Place in assets/gfx/ and reference as /assets/gfx/filename.ext.

Live Feeds

The homepage includes two live data feeds:

  1. Blog RSS — blog.michelemattioni.me fetched via RSSHub proxy
  2. X/Twitter — @mattions timeline via Twitter Widgets.js

Screenshots

PR screenshots are stored in the repo root as screenshot-*.png:

  • screenshot-hero.png — Hero section
  • screenshot-projects.png — Projects grid
  • screenshot-blog.png — Blog feed section
  • screenshot-full.png — Full page scroll
  • screenshot-bottom.png — Footer area

Deployment

GitHub Pages handles Jekyll builds automatically from the master branch.

The site is live at: https://mattions.github.io Custom domain: https://michelemattioni.me

Dependencies

  • Jekyll — Static site generator (GitHub Pages provides v3.9+)
  • Google Fonts — Inter font family
  • Twitter Widgets.js — X/Twitter timeline embed

No build tools, npm packages, or local dependencies required.