vadimgierko.com


My personal static website designed & developed by myself from scratch using React, Next.js, React-Bootstrap, Bootstrap, Markdown & GitHub API. Deployed on Vercel.

Tech Stack

Next.js

React

Bootstrap

Markdown

CSS

Vercel

GitHub

Personal Website vadimgierko.com

The project contains the source code, textual, visual & multimedia content (I like to share my knowledge & creative works with others) of my personal website written (re)written in Next.js.

vadimgierko.com personal website index root screenshot

Technologies used in the project

Technology / Tool2022-July 2025since July 2025
Next.js12.3.115.4.2
React18.2.019.1.0
TypeScript5+
JavaScript
React Bootstrap2.5.02.10.10
React Icons4.4.05.5.0
Bootstrap5.2.15.3.7
React Markdown8.0.310.1.0
GitHub API (to fetch dev repos)
Vercel (Deployment)
remark-gfm3.0.14.0.1
rehype-raw3.0.17.0.0
react-icons5.0.15.5.0
rehype-highlight7.0.17.0.2

Status

The website is deployed, published & available at https://vadimgierko.com.

I'm constantly working on improving the website, refactoring the code, adding new content, components, pages & features. Each commit (to main branch) & pull request causes redeploying & changes in the appearance & functioning of the website.

So the site you see today might me different from the site available yesterday or tomorrow. Even if I add all the features I want & there will be no changes in the code, I'll still be adding new textual & visual content.

License

The source code & all the textual & visual content of the current project is created & owned by me.

You can view, fork & try the code on your local machine for private & non-commercial use only.

Copyright © 2022-2025 Vadim Gierko

Project details

Sitemap

The website contains the following dynamic routes:

  • / => the main page, which contains short bio & maps fields of interests cards
    • /[field-of-interests] => (web-development, creative project management, visual thinking, music)
      • /[field-of-interests]/[items] => (articles, projects, images, audios, videos)
    • /[article] => any article from any field
    • /[project] => any project from any field

Project/website structure/architecture

My website contains a few types of pages:

  • field of interests, which is generated by <FieldOfInterests /> component, built from smaller reusable components, such as:
    • <Section /> layout component, which wraps other components inside for styling
    • <MarkdownRenderer /> custom component, which wraps <ReactMarkdown /> component & changing all the internal links into next/links to prevent reloading the website
    • <IconsList /> for mapping skills icons
    • <CardsList /> for mapping articles & projects cards
    • <Gallery /> for mapping images
  • projects, which maps <CardsList /> of projects
  • project, which is generated by <Project /> component, built from smaller reusable components, such as:
    • <Section /> layout component, which wraps other components inside for styling
    • <MarkdownRenderer /> custom component, which wraps <ReactMarkdown /> component & changing all the internal links into next/links to prevent reloading the website
    • <IconsList /> for mapping skills icons
  • articles, which maps <CardsList /> of articles
  • article, which is generated by <Article /> component
  • images which is generated by <Gallery /> component

The content of my website

My personal website contains:

  • the overwiew of fields/ areas I'm interested in:
  • textual, visual & multimedia content I created in the areas mentioned above:
    • projects
    • articles
    • mind maps & visual notes
    • samples of composed music
    • workshops
    • video collaborations/ live talks
    • ebook
    • social media projects/ accounts

Features & Custom Components

  • custom dark/ light mode theme switcher with additional auto detecting if the user prefers dark theme on its device
  • RWD (responsive web design applied), so the website looks good on any device
  • fully dynamic routing using page type prop to render a proper component
    • no hardcoded pages
    • adding new content requires no coding to create a new page of any predefined type
  • all the components are dynamic & reusable =>
    • that's very easy to me to add/ edit/ delete any field of interests, project, article, image, video or audio, because it needs only adding a new content into dedicated folder => no coding is needed!
    • I can easily create new/ extend pages or components using existing building blocks
  • Atomic Design methodology applied to organize reusable components
  • custom Gallery component with a modal showing up after clicking an image
  • custom MarkdownRenderer to render markdown syntax
    • used to write articles, fields of interests' & projects' descriptions etc.
    • allows to style markdown content using passed custom components or additional styles
  • auto fetching my code repositories data (descriptions, urls, README files content) from GitHub to hydrate the website with the current data during the build