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

React 18

Bootstrap 5

Next.js 12

Markdown

Vercel

GitHub

My Static Personal Website https://vadimgierko.com

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. Sanity headless CMS is partially integrated with the website (see the note below).

NOTE: recently (Nov 13 2022) I've added a Sanity headless CMS app to the website. At the moment this CMS is technically fully integrated with the website, but it can control only the Home page content. All other pages fetch content from the local files. I'm planning to extend CMS's access to the entire website pages & content, but at the moment I'm working on the another project.

vadimgierko.com personal website index root screenshot

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:
  • 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

Setup

  • clone or fork this repository from/on GitHub
  • open the project in your code editor
  • start a New Terminal
  • run npm install command in your terminal to install all dependencies
  • when dependencies are installed (you'll see 2 new folders created: ".next" & "node_modules"), run npm run dev command in your terminal to run the app on your local host
  • go to http://localhost:3000 to see the working app

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)
  • Sanity (headless CMS)

Status

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

But...

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.

Also Sanity's headless CMS is partially integrated with the website (only Home page).

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

Future improvements & additions

SEO:

  • add og metadata also to /[items] page
  • check how many chars title & descritpion should have & fix it
  • add conditional dynamic og:type property (article, book, website, etc. => find more)
  • add keywords prop
  • index my website in Google
  • add robots.txt
  • add sitemap
  • add html lang
  • do further reading how to improve SEO

GitHub API

  • use special repo vadimgierko for content in /web-development
  • use GitHub API more efficiently to fetch projects repo data
  • fix all mentioned in portfolio dev projects' repos readme files

Fields of interests/ Sections/ Pages

  • add Services (What can I do for you) section to each field of interest page
  • complete Music section with content
  • add /[items] page for all articles, projects, videos, audios etc.
    • organize by fields?
    • enable search/ filter features for each particular /[items] page

Articles/ Projects

  • add created/updatedAt for
    • articles
    • projects

Print layout

  • improve print layout
    • hide bootstrap layouts (cols, cards) or manage that with css
    • manage big images

Search/ Filter features

  • add search box in
    • navbar
    • /[items] page
  • add search page for search results
    • /search?field= itemType= title= ??
    • /search?value= keywords= ??

Tags

  • enable adding tags to content
  • enable filtering content by tags