vadimgierko.com

My Static Personal Website https://vadimgierko.com

General description

The project contains the source code, textual, visual & multimedia content of my personal website written from scratch in React at first, then rewritten in Next.js, deployed to Vercel & published at https://vadimgierko.com.

Project details

Motivation

I'm a creative person & like to share my knowledge & creative work with others, so I started a website (actually, there was a few websites along the way from 2018 to 2022) with my friend's help in 2018.

Previously (from September 2020 to October 2022) my personal website was built with Website System developed by Piotr Wnuczek. I was using Website System, because I didn't code at that time, so I couldn't develop the website by myself & my friend Piotr designed, developed & helped me to start my blog & website with his excellent solution.

It worked fine, I was sharing my content with the world. But I've started to learn web-development from December 2020 & that became my new hobby and addiction, so the website & previous creative activities were frozen, because I wanted to dedicate my time & energy fully to learning programming.

Recently (at September 2022) I decided to rebuild the website & develop it from scratch by myself. I wanted to extend its features & start sharing new content again!

So I've developed the basic website in React at first (the repo of the project is private, because it's not up to date in comparison to current Next.js version). Then I've learned basics of Next.js & rewrote the React website version using Next.js to serve the site statically & provide best SEO.

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

What I learned

• building static sites in Next.js from scratch
• migrating from React app/site to Next.js
• migrating fror React Router to Next.js routing system
• using Bootstrap & React Bootstrap with Next.js
• adding embed videos from YouTube & embed audios from SoundCloud
• deploying a project to Vercel with a custom domain
• take care of basic proper SEO for the website
• integrate Sanity headless CMS

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

Technologies used in the project

• Next.js 12.3.1
• React 18.2.0
• React Markdown 8.0.3
• remark-gfm 3.0.1
• React Bootstrap 2.5.0
• React Icons 4.4.0
• Bootstrap 5.2.1
• GitHub API (for fetching repositories data & pass it to getStaticProps())
• Vercel (deployment)

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.

Licence

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-2024 Vadim Gierko