A clean, minimal portfolio site built with Eleventy (11ty). Features dark/light theme toggle, animated Game of Life backdrop, skills typewriter effect, responsive navigation, and sections for experience, projects, publications, and blog posts.

For a demo, check https://nick-ai.github.io/.

# 1. Clone or copy this template
git clone <your-repo-url>
cd portfolio_template

# 2. Install dependencies
npm install

# 3. Start the dev server
npm run dev

# 4. Open http://localhost:8080 in your browser

portfolio_template/
├── .eleventy.js            # Eleventy config (collections, filters, YAML support)
├── package.json
├── src/
│   ├── _data/              # Global data files (YAML)
│   │   ├── site.yml        # Site title, bio, nav links, social links
│   │   ├── education.yml   # Education entries
│   │   ├── skills.yml      # Skill categories (shown in typewriter + about page)
│   │   └── publications.yml# Publications (journal, conference, theses)
│   ├── _includes/
│   │   ├── layouts/        # Page layouts (base, page, post, experience)
│   │   └── partials/       # Reusable components (nav, hero, footer, etc.)
│   ├── pages/              # Top-level pages (index, about, experience, etc.)
│   ├── experience/         # Experience entries (one .md per position)
│   ├── projects/           # Project entries (one .md per project)
│   ├── blog/               # Blog posts (one .md per post)
│   └── assets/
│       ├── css/            # Stylesheets (tokens, reset, layout, components)
│       └── js/             # Scripts (theme toggle, Game of Life animation)
└── _site/                  # Generated output (do not edit)

Edit src/_data/site.yml:

title: Jane Doe, Ph.D.          # Full name + title (used in browser tab)
shortTitle: Jane Doe             # Short name (nav bar + footer)
tagline: Machine Learning Engineer  # Appears under your name on the hero
bio: >-
  One or two sentences about what you do.
  This appears in the hero section and in meta tags.
url: https://janedoe.github.io   # Your deployed site URL

Navigation: Add, remove, or reorder items in the nav list. Each entry needs a label and url.

Social links: Update the social list. Supported icons: github, linkedin, scholar. To add other icons, edit src/_includes/partials/hero.njk and add an SVG block with a new elif condition.

Edit src/_data/education.yml. Each entry has:

- degree: Ph.D., Computer Science
  institution: MIT
  year: 2025
  gpa: "4.0/4.0"
  focus: "Your research focus | Advisor: Dr. Name"

Add or remove entries as needed. They appear on both the homepage and the About page.

Edit src/_data/skills.yml. Each category becomes a group on the About page, and skills (except the "Languages" category) rotate in the hero typewriter effect.

- category: Programming
  items: Python, JavaScript, Go, Rust

- category: Languages        # This category is excluded from the typewriter
  items: English, Spanish

Each position is a separate Markdown file in src/experience/. Create one file per role:

---
jobTitle: Senior Engineer
company: Acme Corp
location: San Francisco, CA
dateRange: "2023 – Present"
order: 3                    # Higher = appears first
---

- **Key achievement:** Description of what you did and the impact.
- **Another bullet:** More details about your responsibilities.

The filename becomes the URL slug (e.g., senior-engineer.md → /experience/senior-engineer/). The order field controls sort order (highest first).

Each project is a Markdown file in src/projects/:

---
title: "My Cool Project"
summary: One-sentence description for the card preview.
category: Web Development
order: 2
tech:
  - React
  - TypeScript
---

Full project description in Markdown. Use headers, lists, code blocks, images.

Edit src/_data/publications.yml. Three sections: journal, conference, theses.

journal:
  - title: "Paper Title"
    authors: "Doe et al."
    venue: "Nature 123(4):56-78"
    year: 2025
    link: "https://doi.org/..."     # External link (optional)
    file: "paper.pdf"               # Local file in src/assets/ (optional)
    status: "In preparation"        # Badge text (optional)

If you don't have publications, delete the entries and/or remove the Publications link from site.yml nav.

Create Markdown files in src/blog/:

---
title: My First Post
summary: A short description for the card.
date: 2025-01-15
---

Post content in Markdown.

Posts are sorted by date (newest first). If you don't need a blog, leave the folder empty — the page will show "Coming soon."

Edit src/pages/index.njk to update the "About" blurb that appears below the hero section. This is the short paragraph visitors see first.

Edit src/pages/about.njk to write your full bio. The education and skills sections are auto-generated from the YAML data files.

Place your resume PDF in src/assets/ and update the filename in:

• src/_data/site.yml (the social entry with icon: cv)
• src/_includes/partials/hero.njk (the "Resume" button href)

The default expects src/assets/resume.pdf.

Edit src/assets/css/tokens.css to change the color scheme. The template uses CSS custom properties, so changing a few values updates the entire site:

:root {
  --color-accent: #4a6f99;        /* Primary accent (links, buttons, highlights) */
  --color-accent-hover: #3d5f85;  /* Accent hover state */
  --color-bg: #eceff4;            /* Page background */
  --color-text: #2e3440;          /* Primary text */
  /* ... */
}

[data-theme="dark"] {
  --color-accent: #88c0d0;        /* Dark mode accent */
  /* ... */
}

To remove a section entirely:

1. Delete its nav entry from src/_data/site.yml
2. Delete the corresponding page from src/pages/
3. Delete the content folder if applicable (e.g., src/experience/)

If you prefer a static homepage:

1. In src/pages/index.njk, remove the <canvas> line and the <script src="/assets/js/game-of-life.js"> tag
2. Delete src/assets/js/game-of-life.js

In src/_includes/partials/hero.njk, add a new elif block inside the social icons loop:

{% elif link.icon == "twitter" %}
<a href="{{ link.url }}" class="hero__social-icon" aria-label="{{ link.label }}" target="_blank" rel="noopener">
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <!-- Your SVG path here -->
  </svg>
</a>

Then add the entry to site.yml:

social:
  - label: Twitter
    url: https://twitter.com/yourusername
    icon: twitter

npm run dev     # Start dev server with hot reload at http://localhost:8080
npm run build   # Build static files to _site/

1. Create a new GitHub repository

2. Push this template to it:

   git init
   git add -A
   git commit -m "Initial portfolio"
   git branch -M main
   git remote add origin https://github.com/yourusername/yourusername.github.io.git
   git push -u origin main

3. Create .github/workflows/deploy.yml:

   name: Deploy to GitHub Pages
   
   on:
     push:
       branches: [main]
   
   permissions:
     contents: read
     pages: write
     id-token: write
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
         - uses: actions/setup-node@v4
           with:
             node-version: 20
         - run: npm ci
         - run: npm run build
         - uses: actions/upload-pages-artifact@v3
           with:
             path: _site
   
     deploy:
       needs: build
       runs-on: ubuntu-latest
       environment:
         name: github-pages
         url: ${{ steps.deployment.outputs.page_url }}
       steps:
         - id: deployment
           uses: actions/deploy-pages@v4

4. In your repo settings: Settings → Pages → Source → GitHub Actions

5. Push the workflow file. The site deploys automatically on every push to main.

npm run build
# Upload the contents of _site/ to any static hosting provider

1. In your repo settings: Settings → Pages → Custom domain — enter your domain
2. Add a CNAME DNS record pointing to yourusername.github.io
3. Update url in src/_data/site.yml to match your custom domain

MIT — use freely for personal or commercial projects.