https://github.com/vadimgierko/personal-website-next-js
My personal static website designed & developed by myself from scratch using React, Next.js, React-Bootstrap, Bootstrap, Markdown & GitHub API. Deployed on Vercel.
https://github.com/vadimgierko/personal-website-next-js
blog bootstrap dev-portfolio gallery-images github-api markdown next-js nextjs personal-website portfolio portfolio-website react react-bootstrap react-markdown vercel
Last synced: about 6 hours ago
JSON representation
My personal static website designed & developed by myself from scratch using React, Next.js, React-Bootstrap, Bootstrap, Markdown & GitHub API. Deployed on Vercel.
- Host: GitHub
- URL: https://github.com/vadimgierko/personal-website-next-js
- Owner: vadimgierko
- License: other
- Created: 2022-09-28T21:39:31.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-09-11T21:56:45.000Z (10 months ago)
- Last Synced: 2025-09-12T00:26:41.524Z (10 months ago)
- Topics: blog, bootstrap, dev-portfolio, gallery-images, github-api, markdown, next-js, nextjs, personal-website, portfolio, portfolio-website, react, react-bootstrap, react-markdown, vercel
- Language: TypeScript
- Homepage: https://vadimgierko.com
- Size: 26.5 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Legacy Version of my Personal Website [vadimgierko.com](https://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](https://github.com/vadimgierko/headless-cms-next-js),
- [repository](https://github.com/vadimgierko/vadimgierko.com).
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](https://github.com/vadimgierko).
You can view, fork & try the code on your local machine for private & non-commercial use only.
Copyright © 2022-2025 [Vadim Gierko](https://github.com/vadimgierko)
## 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 `` component, built from smaller reusable components, such as:
- `` layout component, which wraps other components inside for styling
- `` custom component, which wraps `` component & changing all the internal links into next/links to prevent reloading the website
- `` for mapping skills icons
- `` for mapping articles & projects cards
- `` for mapping images
- **projects**, which maps `` of projects
- **project**, which is generated by `` component, built from smaller reusable components, such as:
- `` layout component, which wraps other components inside for styling
- `` custom component, which wraps `` component & changing all the internal links into next/links to prevent reloading the website
- `` for mapping skills icons
- **articles**, which maps `` of articles
- **article**, which is generated by `` component
- **images** which is generated by `` component
### The content of my website
My personal website contains:
- the overwiew of fields/ areas I'm interested in:
- [web development](https://vadimgierko.com/web-development) (that's _de facto_ my **developer portfolio**)
- [creative process management](https://vadimgierko.com/creative-process-management)
- [visual thinking](https://vadimgierko.com/visual-thinking) (mind maps & visual notes)
- composing [music](https://vadimgierko.com/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](https://atomicdesign.bradfrost.com/table-of-contents/) 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