Personal Website

Personal Website

Project: April 2025

🌐

fivosraissis.vercel.app
Technology

Overview

I designed and built this website from scratch using React after thoughtful consideration of thee complexities of bringing a ready-made solution (e.g. Wordpress) into my requirements, especially as those evolved. As such I set upon creating this simple, yet all-encompassing website for my work and interest, mainly non-core projects and hiking blog entries.

My final requirements, after finishing the proof of concept, are inspired from the conjunction of needs of the things I will mostly use the website for, and are the following:

  • ✅ Cheap & Easy to build, run, and maintain.
  • ✅ Simple Home Page with about, links, and buttons.
  • ✅ 2 Blog-type Sections, one for Projects & one for “Blog”.
  • ✅ Dynamic Thumbnail details based on item tags & parameters in both blogs.
  • ✅ Powerful filtering & sorting capabilities integrating activity-specific features, e.g. elevation.
  • ✅ Beautiful rendering and layout for page content.
  • ✅ Customization of in-content side-bar for extra features (ToC, Related Articles).
  • ✅ Simple dynamic “previous-next” in-content footer controls.
  • ✅ Easy embedding and custom HTML content additions.
  • ✅ Stylish but simple “Outdoor” page with activities map & lists.
  • ✅ Dynamic blog content referencing system using href tags.
  • ✅ (New!) Ability to integrate interactive statistical charts in the Outdoor page.
  • ✅ (New!) Image Lightbox on click!

    • Key Features

    Notion Renderer

    Notion Special Blocks

    🧑🏼‍💻

    I built this website specifically because I wanted features which are not immediately available through common website templating systems, here are some of these!

    Callout Blocks: Like the one above, the Notion “callout” blocks offer a cool way to make notes and indulge in tangents especially on blog posts. They are something I wish was more common among text editor applications.

    Image Alignment, Layout, Width & Lightbox

    Blog Filters & Sorts

    Content Referencing

    Integrated into the Blog system is a smart Reference system which detects tags (e.g. “[1]” ) and the “Reference” (H2) header to link statements to sources at the bottom. This was heavily inspired by Wikipedia and offers an easy way for me to manage references which are needed for my posts.

    Blog Tool Bar

    With the objective of making browsing and reading the posts on the blog I created a Desktop only Tool Bar which appears to the left of the post. It offers some key information and links for use in a smart manner.

  • Table of Contents

    • Here all the headers (H2-H3) are shown and can be quickly accessed.

  • Smart Series Index

    • The goal was to allow readers to quickly access other posts which are part of the same “series”. If there are no other series posts the header is “Series Index” and there is placeholder text saying “this post is not part of a series”. If however there are other series posts, the header becomes the series name and the text is replaced by a linked list of posts, with the one currently selected highlighted in bold. But how does the system know about the series? Simply from the slug!

    If there are two posts “blog/Books-1” & “blog/Books-2” the system understands these are posts 1 and 2 of the “Books” post series, simple as!

  • Excerpt Blurb

    • This field shows the post excerpt, providing a little “abstract” to the side.

    My Statistics Charts

    Change Log