E-Portfolio

Overview

A React website written from scratch, hosted on GitHub Pages, which is a complete rewrite of my Wix e-portfolio website with a similar layout design. It also features a blog section with numerous technical blog posts.

The website supports responsive layout, lazy loading and WebP thumbnails on images. So even if a page has tons of images, it is still blazing fast to load them and the result is on-demand and low network data consumption and a good user experience.

The gallery component and the fullscreen gallery component on these pages are tailor-made from scratch, replacing 3rd party libraries namely React Awesome Slider, React Slick and React Image Lightbox used in the past, to fulfil the needs for online manga style of navigation between images by clicking left and right areas, indicating that the image is still loading by applying a blinking effect and displaying thumbnail images with autoscroll animation since most of these images cannot be fully displayed when remaining static because of their aspect ratios.

NPM packages used:
 • JS library: React (with Hooks)
 • Routing: React Router DOM, React Router Hash Link
 • State management: Redux
 • UI layout: Semantic UI React, Styled Components
 • Content: React Markdown (with Remark GFM plugin), Markdown TOC
 • Animation & effects: React Particles JS, Typewriter Effect, React Lazyload
 • Data persistence: Firebase, localStorage

The old Wix website:
https://blackr1234.wix.com/eport