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 — 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 🧩

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

{
  "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 ❄️

"snowflakes": true

• true — animated snowflakes are enabled.
• false — snowflakes are completely disabled.

Social links 🔗

"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:th3ryks@proton.me"
  },
  {
    "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) 💻

"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 📦

"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 💫