portfolio-website — HTML 作品集模板

SHA-256: 14279cc92572608f58c84311d809f9229e7831f942936b95745ced74b6cbd70b

2026-10-13T08:35:27.746Z

# Portfolio Website

<img width="1280" height="640" alt="banner" src="https://github.com/user-attachments/assets/4a25ac40-7a1f-4075-978a-9aa9c5f2901e" />

A single-file portfolio website. No build tools, no dependencies — just `index.html`.

## Features

- Light / dark theme (saved in browser)
- Built-in translations (English / Serbian) with easy switching
- Fully responsive with mobile menu
- SEO ready (Open Graph, Twitter cards, JSON-LD structured data)
- Accessible (keyboard friendly, reduced-motion support, print styles)
- Optional Google Analytics support via config

## Quick start

Open `index.html` in your browser. That's it.

To publish free on GitHub Pages:

1. Push this repository to GitHub
2. **Settings → Pages → Source**: select your branch and `/` (root)
3. Your site will be live at `https://<username>.github.io/<repo-name>/`

## SEO files

`robots.txt` and `sitemap.xml` help search engines index your site.
Both contain the placeholder `YOUR-USERNAME` — replace it with your real address:

- **GitHub Pages**: `https://<username>.github.io/<repo-name>/`
- **Custom domain**: `https://yourdomain.com/`

Files to update: `robots.txt` (the `Sitemap:` line) and `sitemap.xml` (the `<loc>` URL).
Also update `<lastmod>` in `sitemap.xml` whenever you make significant changes,
and consider submitting your sitemap in [Google Search Console](https://search.google.com/search-console).

## Before you publish — checklist

Search for these placeholders in `index.html` and replace them with your own:

| What | Where | Placeholder |
|---|---|---|
| Your name | Hero section (~line 459) and translations (~line 595) | `Your Name` |
| Email | Contact section (~line 577) | `[email protected]` |
| Project links | Each project card's `Live Demo` / `Source` hrefs | `#` |
| Resume/CV button | Hero section (~line 467) — see [Resume / CV button](#resume--cv-button) | `href="#"` |
| Social links | Contact section (~line 562, marked `EDIT: YOUR LINKS`) | `github.com`, `linkedin.com` |
| Social preview image | `<meta name="site-image">` (~line 11) | empty |
| Analytics ID | `<meta name="ga-id">` (~line 7) | empty = disabled |
| Structured data | JSON-LD block (~line 370) | name, url, sameAs |
| Sitemap URL | `sitemap.xml` + `robots.txt` | `YOUR-USERNAME` (see [SEO files](#seo-files)) |

## Editing the website

### Site title & description

Edit the CONFIG block at the top of `<head>` (~lines 5–12):

```html
<meta name="site-title" content="Portfolio — Designer & Developer">
<meta name="site-desc" content="I craft beautiful, performant websites...">
<meta name="site-image" content="https://yoursite.com/preview.png">
```

These automatically update the page title and all social-sharing tags.
Also update the matching static `<title>`, `<meta name="description">`,
and `og:` / `twitter:` tags right below them (search engines read those first).

### Colors

All colors are CSS variables at the top of the `<style>` block:

```css
:root {
  --accent: #0d9488;   /* buttons, links, highlights */
  --bg: #ffffff;       /* page background */
  --text: #0f172a;     /* body text */
}
[data-theme="dark"] { /* dark mode equivalents below */ }
```

### Skills

Edit the pills inside `<div class="skills-grid">` (~line 477):

```html
<span class="pill">TypeScript</span>
```

Add or remove as many as you like — they wrap automatically.

### Resume / CV button

The button in the hero section (~line 467) links to `#` by default — it does
nothing until you connect a file. To make it work:

1. Add your PDF to the project folder (e.g. `resume.pdf`)
2. Update the link in the hero section:

```html
<!-- Opens the PDF in a new tab -->
<a href="resume.pdf" target="_blank" rel="noopener" class="btn btn-secondary" data-i18n="hero.ctaResume">Resume / CV</a>

<!-- Or forces the browser to download it -->
<a href="resume.pdf" download class="btn btn-secondary" data-i18n="hero.ctaResume">Resume / CV</a>
```

The button label is translated via the `hero.ctaResume` key in the
`translations` object ("Resume / CV" / "Biografija") — see [Translating](#translating).

## Adding a new project

Each project has two parts: a card in the HTML and entries in the translations.

**Step 1** — Add a card inside `<div class="projects-grid">` (~line 497):

```html
<article class="card reveal">
  <h3 data-i18n="project7.title">My New Project</h3>
  <p data-i18n="project7.desc">A short one-sentence description of the project.</p>
  <div class="card-tags"><span>React</span><span>API</span></div>
  <div class="card-footer">
    <a href="https://example.com" class="link"><span data-i18n="project.linkLive">Live Demo</span> →</a>
    <a href="https://github.com/me/project" class="link"><span data-i18n="project.linkCode">Source</span> →</a>
  </div>
</article>
```

Use the next free number (`project7`, `project8`, ...). The tags (`card-tags`)
are plain HTML — no translation needed unless you want them localized.

**Step 2** — Add matching entries to **both** languages in the
`translations` object (~line 595):

```js
// inside en: {
project7: {
  title: "My New Project",
  desc: "A short one-sentence description of the project."
},

// inside sr: {
project7: {
  title: "Moj Novi Projekat",
  desc: "Kratak opis projekta u jednoj rečenici."
},
```

The grid resizes automatically — any number of cards works.

To remove a project, delete its whole `<article class="card reveal">...</article>`
block and its two translation entries.

## Translating

All visible text comes from the `translations` object near the bottom of
`index.html` (~line 595). Text in the HTML is only a fallback shown before
JavaScript loads (and what search engines index).

Rules:

- Keep key names identical between `en` and `sr` — only change the values
- Any element with `data-i18n="hero.bio"` displays `translations.<lang>.hero.bio`
- If a value is missing in one language, that element keeps its previous
  language's text when you switch (so keep both sides complete)
- To add a third language: copy an existing language block, rename the key
  (e.g. `de`), translate the values, then add a button in the header:

```html
<button data-lang="de">DE</button>
```

Note: the footer year updates automatically — don't put it in translations.
Only `footer.name` and `footer.rights` are translatable.

## License

The template code is released under the [MIT License](LICENSE) — free to use, modify, and build your own portfolio.