ryogrid.github.io — Jekyll site

This folder is a drop-in replacement for the contents of ryogrid/ryogrid.github.io. Copy everything here into the repo root, commit, push, and GitHub Pages will build the redesigned site.

What's in this folder

jekyll-site/
├── _config.yml                      ← removes jekyll-theme-cayman, adds layout defaults
├── _layouts/
│   ├── default.html                 ← shared shell (head + header + footer)
│   ├── portfolio.html               ← hero + sticky TOC + project list
│   └── article.html                 ← long-form reading layout for tech entries
├── _includes/
│   ├── head.html                    ← fonts, SEO, GA, CSS
│   ├── header.html                  ← top nav with seal + external links
│   └── footer.html                  ← contact / colophon / source / build stamp
├── assets/
│   ├── css/style.scss               ← all design tokens + page chrome + markdown styling
│   ├── ryo-grid-seal.svg            ← vermillion 朱印 (favicon + hero)
│   ├── ryo-grid-wordmark.svg
│   └── grid-paper.svg
├── index.html                       ← landing — REPLACES the current INDEX.md flow
├── profile/
│   └── portfolio_en.md              ← your existing portfolio + front matter
└── tech-entry/
    └── about-nostrp2p.md            ← same article, picks up `layout: article`

How to install in your repo

1. Clone your repo locally and pull the latest main:

   git clone git@github.com:ryogrid/ryogrid.github.io.git
   cd ryogrid.github.io
   git checkout -b redesign

2. Copy every file from this folder into the repo root, overwriting:

   # from this project, download the jekyll-site/ folder, then:
   cp -R /path/to/jekyll-site/. /path/to/ryogrid.github.io/

   Files that get overwritten:

   • _config.yml — old theme: jekyll-theme-cayman is removed
   • profile/portfolio_en.md — your markdown is unchanged; only the front matter at the top is added
   • tech-entry/about-nostrp2p.md — same: only front matter is added

   Files that get added:

   • everything in _layouts/, _includes/, assets/, plus the new index.html

3. Delete the old landing redirect if it exists:

   rm -f INDEX.md          # the old cayman landing — replaced by index.html

   You may also want to delete the unused Screenshot_20230208-082924.png if you don't reference it anywhere.

4. (Optional) Test locally:

   bundle init
   echo 'gem "github-pages", group: :jekyll_plugins' >> Gemfile
   bundle install
   bundle exec jekyll serve
   # → open http://localhost:4000

5. Commit and push. GitHub Pages will rebuild in ~30s:

   git add .
   git commit -m "Redesign: ryo_grid portfolio design system"
   git push -u origin redesign

   Open a PR or merge directly to main. Done.

URL mapping

Page	Before	After
Landing	INDEX.md (cayman)	index.html (new design)
Portfolio	/profile/portfolio_en.html	/profile/portfolio_en.html ✓ unchanged
NostrP2P	/tech-entry/about-nostrp2p.html	/tech-entry/about-nostrp2p.html ✓ unchanged

All existing external links to the portfolio page keep working.

How the design picks up your markdown

You do not need to change how you write portfolio_en.md. The CSS targets the kramdown-rendered HTML directly:

Markdown you write	What it becomes
### Section name	Numbered ink rule with vermillion § NN
#### [Project: tagline](url) 2024-Present	Card title (serif, underlined on hover)
Description paragraph	Italic serif lead
Following paragraphs	Plex Sans body
Trailing - [Link](url) list	Horizontal pill row of mono links

The sticky right-rail TOC is built client-side from every ### heading in the document — no special syntax required.

If you change your mind on the design

• Colors / type: edit assets/css/style.scss — every token is at the top of the file in :root. Change --vermillion-500 and the whole accent ladder follows.
• Hero copy: edit _layouts/portfolio.html (the <section class="hero">).
• Nav links: edit _includes/header.html.
• Adding a new long-form post: drop a markdown file in tech-entry/. The defaults: rule in _config.yml auto-applies layout: article.

Things to verify after deploy

• The Qiita badges on the landing page (still rendered from qiita-badge.apiapi.app — same as before).
• Google Analytics (G-FHMYLJGF1H is preserved in _config.yml).
• The favicon (uses the seal SVG; some browsers may cache the old one).
• That /profile/portfolio_en.html still resolves at the same URL.

Caveats

• The TOC is client-side JS — visible only after page load. If you'd prefer a server-rendered TOC, kramdown's {:toc} is still in your markdown; we just hide it via CSS. Remove .portfolio-layout .markdown-body > ul#markdown-toc { display: none; } in style.scss to bring it back inline.
• The "first paragraph after H4 is italic serif lead" rule assumes your current markdown style holds. If you start mixing structures it will still degrade gracefully — falls back to body type.