vadimgierko.com

Legacy Version of my Personal Website vadimgierko.com (CMS + Website in one repo)

This branch contains the previous combined codebase where both the CMS and the website frontend were developed together in a single repository.

From September 16 2025 the project has been split into two repositories:

• headless CMS,
• repository.

This branch is kept for documentation and reference purposes only and will not receive further updates.

Legacy Description

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.

Technologies used in the project

Technology / Tool	2022-July 2025	since July 2025
Next.js	12.3.1	15.4.2
React	18.2.0	19.1.0
TypeScript	❌	5+
JavaScript	✅	✅
React Bootstrap	2.5.0	2.10.10
React Icons	4.4.0	5.5.0
Bootstrap	5.2.1	5.3.7
React Markdown	8.0.3	10.1.0
GitHub API (to fetch dev repos)	✅	✅
Vercel (Deployment)	✅	✅
remark-gfm	3.0.1	4.0.1
rehype-raw	3.0.1	7.0.0
react-icons	5.0.1	5.5.0
rehype-highlight	7.0.1	7.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:
  • web development (that's de facto my developer portfolio)
  • creative process management
  • visual thinking (mind maps & visual notes)
  • composing music & classical guitar
• 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