Projects

Old Portfolio

2022·2 min read

React
JavaScript
Sass
Link (opens in a new tab)GitHub (opens in a new tab)

The 2022 portfolio, kept here as a record rather than as a live claim — the current site is the one you are reading now.

The 2022 portfolio, kept here as a record rather than as a live claim — the current site is the one you are reading now.

It was a single-page React application: a fixed sidebar, an intro that revealed the name letter by letter, a projects grid, and a contact page with a Leaflet map and an EmailJS form so there was no backend to run. React 17 on Create React App, React Router v6, Sass.

Looking back, the interesting difference is not the framework version. That site rendered everything in the browser and shipped its content inside the JavaScript bundle, which is precisely why it never appeared in search results for anything at all. Rebuilding on the App Router with server-rendered content is what changed that, and a surprising amount of what has been written since — the sitemap, the structured data, the content pipeline behind these pages — follows from that one decision.

Mohamed Gado's first portfolio site (2022). Superseded by the current portfolio — kept here for archival.

🔗 View the live site →#

Heads-up: This is the archived 2022 version. The current portfolio lives at mohamedgado.com.

A single-page React portfolio with a sidebar layout, letter-by-letter intro animations, a projects showcase, and a contact page with an interactive map and email form.

✨ Features#

  • Animated letter intro — name and tagline reveal one character at a time
  • Sidebar navigation — persistent layout with icon-based routing (Home / About / Portfolio / Contact)
  • Projects showcase — /portfolio page listing past work
  • Contact form — wired to EmailJS for direct messaging
  • Leaflet map — location pin on the contact page via react-leaflet
  • Page loaders — spinner transitions between routes (react-loaders)
  • FontAwesome icons — solid + brand glyphs throughout

🛠️ Tech Stack#

  • Framework — React 17 (Create React App)
  • Routing — React Router v6
  • Styling — Sass + animate.css
  • Map — React Leaflet
  • Email — EmailJS
  • Animation helpers — GSAP, loaders.css

🙌 Credits#

Built by Mohamed Gado.

Writing about this project

  • Next.js opengraph-image in Crawled – currently not indexed: should you fix it?
  • HSTS preload on Vercel: why the apex redirect ignored my header
  • Why a CSS rotate with will-change: transform makes images and text blurry
  • Discovered – currently not indexed in Search Console: what it means and what fixed it
  • Next.js metadata openGraph not inherited: why my subpages lost og:site_name
  • Next.js soft 404: why notFound() returned 200 behind loading.tsx
  • React error #418: fixing a matchMedia hydration mismatch with useSyncExternalStore

More projects

  • Puzzle Game2022 · React
  • Desktop Image Resizer App2022 · Electron
  • Meals App2022 · React Native
All projects