Merge pull request #7 from nbovee/example-site-styling

Update to styling and name of theme

Author: nbovee

.gitignore

@@ -3,3 +3,4 @@ Thumbs.db
 public/
 /resources/_gen/
 .hugo_build.lock
+**/_gen

README.md

@@ -1,4 +1,4 @@
-<h1 align="center">online-resume</h1>
+<h1 align="center">bot-ready-resume</h1>
 
 
 <h4 align="center">A minimalist Hugo theme for your resume, refreshed for LLM crawlers.</h4>
@@ -7,11 +7,11 @@
 
 ## Live Demo
 
-:point_right: [online-resume][Demo] :point_left:
+:point_right: [bot-ready-resume][Demo] :point_left:
 
 ## Getting Started
 
-Online-Resume is a Hugo theme designed for creating resumes. It enables you to write your resume in YAML file using Markdown and manage it through Git. It can be displayed on a web page and printed as a PDF file directly from the browser.
+Bot Ready Resume is a Hugo theme designed for creating resumes. It enables you to write your resume in YAML file using Markdown and manage it through Git. It can be displayed on a web page and printed as a PDF file directly from the browser.
 
 You can deploy it on various platforms that support Hugo or static files, such as GitHub Pages, Cloudflare Pages, Vercel, Netlify, your own hosting service, and others.
 
@@ -26,101 +26,89 @@ Features:
 - LLM-friendly output formats (llms.txt, markdown alt content, steering prompts for llms).
 - Modular & responsive content design.
 
-### Usage
-
-#### Quickly
-
-- Create new hugo site and add the theme through git submodule.
-  - `hugo new site resume`
-  - `cd resume && git init`
-  - `git submodule add git@github.com:nbovee/hugo-theme-online-resume.git themes/online-resume`
-- Copy `hugo.yml` and `data.yml` files.
-  - `cp themes/online-resume/exampleSite/hugo.yml .`
-  - `cp themes/online-resume/exampleSite/data/data.yml ./data`
-- Edit `data/data.yml` file directly to update your resume.
-- Run `hugo server` and open in browser to preview the resume.
-
-#### Customization
-
-- `data/data.yml`: Edit the resume content.
-  - `basic.initials`: Optional field to override auto-parsed initials used in favicons.
-  - `llmPrompt`: Optional section to provide additional instructions for LLM consumption via llms.txt.
-  - `contact`: For contact icons, use Font Awesome icon classes (e.g., `fa-brands fa-fw fa-github`). Search available icons at [Font Awesome](https://fontawesome.com/icons) using `fa-solid` for regular icons or `fa-brands` for brand logos. Additional custom icons are available in `static/assets/icons/css/all.css`.
-- `static/images/profile.png`: Your profile photo.
-- `static/images/favicon-32x32.png` and `static/favicon.ico`: Optional fallback favicons for older browsers (SVG favicons are auto-generated).
-- `hugo.yml`: Website and theme style settings.
-  - `params.themeColor`: Theme color in OKLCH format (e.g., `"oklch(0.490 0.203 317.8)"`) or hex format (e.g., `"#1DA1F2"`). The remainder of colors are dynamically created in `colors.html`.
-  - `params.llms.txt`: Enable/disable llms.txt output format.
-  - `params.llmHeader`: Add LLM guidance as HTML comment in page head.
-  - `params.bodyDelimiter`: Delimiter for body content items.
-  - `params.siteCredit`: Show/hide site credits.
-  - `outputFormats`: Configure markdown and llmstxt output formats.
+### Quick Start
 
-## FAQ
+```bash
+# Create new Hugo site
+hugo new site my-resume
+cd my-resume
 
-#### How to enable LLM-friendly output formats?
+# Add theme as submodule
+git init
+git submodule add https://github.com/nbovee/bot-ready-resume.git themes/bot-ready-resume
 
-The theme can generate additional output formats optimized for LLM consumption:
-- Set `params.llms.txt: true` in `hugo.yml` to enable llms.txt output at `/llms.txt`.
-- Set `params.llmHeader: true` to add LLM guidance as an HTML comment in the page head.
-- Add custom instructions in `data.yml` under `llmPrompt.text`.
-- Configure `outputFormats` and `outputs` in `hugo.yml` to enable markdown and llms.txt formats.
+# Copy configuration files
+mkdir -p data
+cp themes/bot-ready-resume/exampleSite/hugo.yml .
+cp themes/bot-ready-resume/exampleSite/data/data.yml data/
 
-#### How does dark mode work?
+# Start development server
+hugo server
+```
 
-The theme includes an automatic dark mode toggle that:
-- Detects system color scheme preference on initial load.
-- Stores user preference in localStorage for subsequent visits.
-- Provides a manual toggle switch in the UI.
-- Automatically switches to light mode when printing.
-- Updates the favicon to match the current theme.
+Open your browser to `http://localhost:1313` to see your resume.
+Your will also have `llms.txt` at `http://localhost:1313/llms.txt`, and a markdown output at `http://localhost:1313/index.md`
 
-#### How are favicons generated?
+Edit `data/data.yml` to customize your resume content.
 
-Favicons are automatically generated from the user's name in `data.yml`:
-- Uses the first letter of the first and last name (e.g., "John Doe" → "JD").
-- Can be overridden by setting `basic.initials` in `data.yml`.
-- Generates both light and dark theme variants.
-- Uses the theme color for accent elements.
-- Creates SVG favicons with asset fingerprinting for cache busting.
-- Includes PNG and ICO fallbacks for broader browser support.
+### Customization
 
-#### How to use OKLCH colors?
+#### Essential Files
 
-Set `params.themeColor` in `hugo.yml` using the OKLCH format: `"oklch(L C H)"` where:
-- L = Lightness (0-1)
-- C = Chroma (0-0.4)
-- H = Hue (0-360)
+- **`data/data.yml`** - Your resume content (name, experience, skills, etc.)
+- **`hugo.yml`** - Theme configuration and styling options
+- **`static/images/profile.png`** - Your profile photo
 
-Example: `"oklch(0.490 0.203 317.8)"` for a purple theme. The theme will handle color space conversion and ensure proper contrast.
+#### Key Configuration Options
 
-#### How to change the order of the sections in the resume?
+**In `data/data.yml`:**
+- `basic.initials` - Override auto-generated favicon initials (optional)
+- `llmPrompt` - Add instructions for LLM consumption via llms.txt (optional)
+- `contact` - Use Font Awesome icon classes (e.g., `fa-brands fa-github`). Browse icons at [fontawesome.com/icons](https://fontawesome.com/icons)
 
-There is an `order` option in each section, you can adjust the order by modifying this, the smaller the value the more forward the position.
+**In `hugo.yml`:**
+- `params.themeColor` - Theme color in OKLCH (e.g., `"oklch(0.490 0.203 317.8)"`) or hex (e.g., `"#1DA1F2"`)
+- `params.llms.txt` - Enable llms.txt output format (`true`/`false`)
+- `params.llmHeader` - Add LLM guidance in HTML head (`true`/`false`)
+- `params.siteCredit` - Show/hide footer credits (`true`/`false`)
 
-#### How to hide the specified section in the resume?
+See the [exampleSite](exampleSite/) directory for a complete configuration reference.
 
-If there is no content you want to keep in the section, you can remove it directly. If you want to keep the content, you can set the value of the `show` option of the section to `false`.
+## FAQ
 
+#### How do I change section order or visibility?
 
+Each section in `data/data.yml` has an `order` field (lower numbers appear first) and a `show` field (`true`/`false`).
 
-#### How to create a resume in other languages?
+#### How do I enable LLM-friendly output?
 
-For example, if you already have an English version resume and you want to create a Chinese version.
-  - Copy a `data.yml` file in the `data` folder named `cn.yml` and edit the content.
-  - Create `layouts/page` directories through `mkdir -p layouts/page`.
-  - Copy `index.html` file in the theme layouts directory to above directory `cp themes/online-resume/layouts/index.html layouts/page/cn.html`
-  - Change the `{{- partial "common.html" (dict "Site" .Site "data" .Site.Data.data) }}` in the `cn.html` to `{{- partial "common.html" (dict "Site" .Site "data" .Site.Data.cn) }}`.
-  - Create `content` directory in root directory and create a markdown file named `cn.md`, add front matter `layout: cn` in `cn.md`.
-  - Run `hugo server` and you can preview the Chinese version of your resume by visiting `https://YOUR_RESUME_URL/cn`.
+The exampleSite includes LLM features by default. The theme generates:
+- `/llms.txt` endpoint for structured LLM consumption
+- Markdown alt content for accessibility
+- Optional HTML comment guidance for LLMs
+
+Enable/disable via `params.llms.txt` and `params.llmHeader` in `hugo.yml`.
+
+#### How does dark mode work?
 
+Dark mode automatically detects system preference, stores user preference in localStorage, and provides a manual toggle. It switches to light mode when printing and updates the favicon accordingly.
+
+#### What are OKLCH colors?
+
+OKLCH is a modern color space that provides better perceptual uniformity. Format: `"oklch(L C H)"` where L=Lightness (0-1), C=Chroma (0-0.4), H=Hue (0-360). Example: `"oklch(0.490 0.203 317.8)"` for purple. Hex colors also work.
+
+#### How do I add a language version?
+
+Create a new data file (e.g., `data/cn.yml`), create a layout file that references it, and add a content page with the corresponding layout. See the README for detailed steps or check the Hugo multilingual documentation.
+
+#### How are favicons generated?
 
-## Others
+Favicons auto-generate from your name (e.g., "John Doe" → "JD"), using theme colors with light/dark variants. Override via `basic.initials` in `data.yml`. 1-3 characters works best.
 
-- Original Hugo Version: [tarrex/hugo-theme-online-resume][Base Version]
 
+## Other
 
-[Demo]: https://nick.bov.ee/hugo-theme-online-resume
+- This repository was originally forked from: [tarrex/hugo-theme-online-resume](https://github.com/tarrex/hugo-theme-online-resume)
 
 
-[Base Version]: https://github.com/tarrex/hugo-theme-online-resume
+[Demo]: https://nick.bov.ee/bot-ready-resume

assets/sass/_base.scss

@@ -92,7 +92,6 @@ small {
   font-weight: $base-font-weight * 1;
 }
 
-// Consolidated emphasis elements
 .role,
 .major,
 .project-name,
@@ -105,49 +104,48 @@ small {
 .issuer,
 .awarder,
 .reference-title,
-.basic .header .name,
-.basic .header .title,
-.basic .header .description,
+.basic .header :is(.name,
+.title,
+.description,),
 .skill .section-content .groups .group-name {
   font-weight: $base-font-weight * 1.5;
 }
 
-// Consolidated icon spacing
-.section-title i::after,
-.location i::after,
-.degree i::after,
-.project-name i::after,
-.contact-item i::after,
+:is(
+  .section-title,
+  .location,
+  .degree,
+  .project-name,
+  .contact-item
+) i::after,
 .skill-level i:not(:last-child)::after,
-.skill-name::after,
-.language .item small::before {
+.skill-name::after {
   content: "\00a0";
-  font-family: initial;
+  white-space: nowrap;
 }
 
-// Double spacing for skill names
-.skill-name::after {
-  content: "\00a0\00a0";
+.language .item small::before {
+  content: "\00a0";
+  white-space: nowrap;
 }
 
-// Consolidated delimiter patterns
-.subrow:not(:last-child)::after,
-.title-desc-container .item:not(:last-child)::after,
-.contact-item:not(:last-child)::after,
-.group-item span:not(:last-child)::after,
-.language .item:not(:last-child)::after,
-.interest .item:not(:last-child)::after {
+:is(
+  .subrow, 
+  .title-desc-container .item,
+  .contact-item,
+  .group-item span,
+  .language .item,
+  .interest .item
+  ):not(:last-child)::after {
   content: $body-delimiter;
   color: var(--color-separator);
   margin: 0 0.5em;
 }
 
-// Special delimiter for contact items
 .contact-item:not(:last-child)::after {
   content: $contact-delimiter;
 }
 
-// Consolidated flex baseline elements
 .location,
 .contact-item,
 .credit {
@@ -157,26 +155,25 @@ small {
 
 // Consolidated flex wrap elements
 .contact,
-.certificate .section-content .items,
-.award .section-content .items,
-.reference .section-content .items,
-.skill .section-content .items,
-.language .section-content .items,
-.interest .section-content .items {
+:is(
+  .certificate,
+  .award,
+  .reference,
+  .skill,
+  .language,
+  .interest
+) .section-content .items {
   display: flex;
   flex-wrap: wrap;
 }
 
 // Consolidated spacing patterns
-.section-content .description,
-.section-content .items .item,
-.section-content .groups {
+.section-content :is(.description, .items .item, .groups) {
   margin-bottom: $spacing-unit / 4;
 }
 
 // Consolidated padding patterns
-.section-content .items .item .description,
-.section-content .authors {
+.section-content :is(.items .item .description, .authors) {
   padding-left: 1rem;
 }
 
@@ -192,8 +189,10 @@ small {
 }
 
 // Consolidated border patterns
-.item:not(:nth-last-child(1)),
-.group:not(:last-child) {
+:is(
+  .item,
+  .group
+):not(:last-child) {
   border-bottom: 1px dashed var(--color-theme-border);
 }
 
@@ -208,6 +207,25 @@ small {
   border-bottom: none;
 }
 
+// Skill items: remove border for last row (3 items per row at 30% flex-basis)
+.skill .items {
+  // If we have 3n items total, remove border from last 3
+  .item:nth-last-child(-n+3):nth-last-child(3n),
+  .item:nth-last-child(-n+3):nth-last-child(3n-1),
+  .item:nth-last-child(-n+3):nth-last-child(3n-2) {
+    border-bottom: none;
+  }
+  // If we have 3n+1 items total, remove border from last 1
+  .item:last-child:nth-child(3n+1) {
+    border-bottom: none;
+  }
+  // If we have 3n+2 items total, remove border from last 2
+  .item:nth-last-child(-n+2):nth-last-child(3n+1),
+  .item:nth-last-child(-n+2):nth-last-child(3n+2) {
+    border-bottom: none;
+  }
+}
+
 // Override for group borders
 .group:not(:last-child) {
   border-bottom: 1px dashed var(--color-separator-border);
@@ -312,13 +330,6 @@ small {
 
   .footer {
     margin: 0;
-    .section-content {
-      .llm {
-        color: var(--color-body);
-        opacity: 0;
-        font-size: 1%;
-      }
-    }
   }
 
   .certificate,
@@ -337,10 +348,11 @@ small {
   .skill {
     .section-content {
       .items {
+          justify-content: center;
         .item {
           display: inline-flex;
           align-items: center;
-          justify-content: end;
+          justify-content: center;
           flex-basis: 30%;
 
           .skill-level {
@@ -391,6 +403,3 @@ small {
     margin: $spacing-unit 0;
   }
 }
-
-/* Dark theme styles - most styling now handled by CSS custom properties above */
-

assets/sass/_print.scss

@@ -30,6 +30,14 @@
     break-inside: avoid !important;
   }
 
+  .section-title {
+    break-after: avoid !important;
+  }
+
+  .item {
+    break-inside: avoid !important;
+  }
+
   .wrapper {
     max-width: 100% !important;
     margin: 0.5rem  !important;