WebsiteConstructor — HTML 作品集模板

SHA-256: ab4e419f1385dbf188d80d1c7c49158e2690e65e71001c8ad95bd621c0724d4b

2026-10-03T19:54:34.512Z

# Website Constructor 🚀

Website Constructor is a small static site template that lets you build a personal portfolio just by editing a single JSON configuration file. No frameworks, no build tools — only HTML, CSS, and JavaScript.

At the bottom of the page you will see **Made by [Th3ryks](https://th3ryks.dev/)** — the name is clickable and opens the website in a new tab. ✨

## Features ✨

- Single JSON configuration for:
  - Hero name and description
  - Social links (with enable/disable flag)
  - Technologies stack (icons and names)
  - Projects (icons, descriptions, buttons)
  - Snowflake effect toggle
- Zero backend, works on any static hosting
- Clean, animated UI with smooth scrolling

## Getting started 🧩

```bash
git clone https://github.com/Th3ryks/WebsiteConstructor.git
cd WebsiteConstructor
```

Open `index.html` in your browser or serve the folder with any static file server (for example, GitHub Pages, Netlify, Vercel, or a simple `python -m http.server`).

## Configuration 🛠

All customization happens in `config.json`. For reference, you can also check `config.example.json`, which contains a fictional example configuration.

### Site block

```json
{
  "site": {
    "username": "Th3ryks",
    "heroName": "Th3ryks",
    "heroDescription": "A guy from Ukraine passionate about Python and web development",
    "title": "Th3ryks | Portfolio",
    "footerText": "© 2025-2026, {username} (@{username})"
  }
}
```

- `username` — used in the logo and footer.
- `heroName` — name in the hero title (“Hey, I’m ...”).
- `heroDescription` — text under the title.
- `title` — `<title>` in the browser tab.
- `footerText` — footer text; `{username}` is replaced with the value of `username`.

At the very bottom of the page, the text **Made by Th3ryks** is rendered; the word `Th3ryks` is a link to `https://th3ryks.dev/` and always opens in a new tab.

### Snowflakes ❄️

```json
"snowflakes": true
```

- `true` — animated snowflakes are enabled.
- `false` — snowflakes are completely disabled.

### Social links 🔗

```json
"socialLinks": [
  {
    "id": "telegram",
    "enabled": true,
    "url": "https://t.me/Th3ryks"
  },
  {
    "id": "github",
    "enabled": true,
    "url": "https://github.com/Th3ryks"
  },
  {
    "id": "email",
    "enabled": true,
    "url": "mailto:[email protected]"
  },
  {
    "id": "ton",
    "enabled": true,
    "url": "ton://transfer/th3ryks-dev.ton"
  }
]
```

- `id` — must match `data-social-id` of the link in `index.html` (`telegram`, `github`, `email`, `ton`).
- `enabled` — if `false`, the icon is hidden from the navigation bar.
- `url` — target URL that will be used for the link.

### Technologies (languages / tools) 💻

```json
"languages": [
  {
    "name": "Python",
    "iconSvg": "<svg ...>...</svg>"
  }
]
```

- `name` — technology name shown in the tooltip.
- `iconSvg` — full SVG markup that will be injected into the grid.

Each language is rendered as a grid item with hover/click tooltips and animations. To add or remove a technology, simply edit the `languages` array.

### Projects 📦

```json
"projects": [
  {
    "title": "TGS Viewer",
    "icon": "images/tgs.png",
    "iconAlt": "TGS Viewer",
    "description": "Single-page web app to drag & drop .tgs or .json Lottie files and play them instantly.",
    "links": [
      {
        "label": "GitHub",
        "url": "https://github.com/Th3ryks/TGSViewer",
        "style": "secondary"
      },
      {
        "label": "WebSite",
        "url": "https://tgsviewer.th3ryks.dev/",
        "style": "primary"
      }
    ]
  }
]
```

- `title` — project name displayed in the card.
- `icon` — path to the project image.
- `iconAlt` — `alt` text for the image.
- `description` — project description.
- `links` — buttons rendered at the bottom of the card:
  - `label` — button text.
  - `url` — button link (`target="_blank"`).
  - `style` — `"primary"` or `"secondary"` controls button style.

To add a new project, just append another object to the `projects` array.

## Example configuration 📄

- `config.json` — your real configuration used by the website.
- `config.example.json` — example configuration with fictional data to show the structure.

You can copy `config.example.json` to `config.json` and adapt it to your own data if you start from scratch.

## License 📜

This project is licensed under the MIT License. See the `LICENSE` file for details.

---

Made by [Th3ryks](https://th3ryks.dev/) 💫