RiChArDs HoMePaGe

A modern React/Next.js application that looks like it escaped from 1996

🔥 Features

Modern Architecture: Next.js 14, TypeScript, SASS modules
Atomic Design: Proper component hierarchy (atoms → molecules → organisms → templates)
Custom Hooks: useIndexedDB, useVisitorCounter, useGuestbook
IndexedDB Persistence: Visitor counter and guestbook survive page reloads
90s Aesthetic: All the GeoCities hallmarks you remember (or want to forget)

🚀 Tech Stack

Framework: Next.js 14 (App Router)
Language: TypeScript
Styling: SASS/SCSS Modules
State Management: React hooks + IndexedDB
Architecture: Atomic Design Pattern

📁 Project Structure

geocities-app/
├── app/
│   ├── layout.tsx          # Root layout with fonts
│   └── page.tsx            # Home page with splash/main routing
├── components/
│   ├── atoms/              # Basic building blocks
│   │   ├── BlinkText/      # <blink> tag energy
│   │   ├── MarqueeText/    # Scrolling text
│   │   ├── RetroGif/       # Classic animated gifs
│   │   ├── RetroButton/    # Windows 95 style buttons
│   │   ├── RetroInput/     # Inset text inputs
│   │   ├── RetroTextarea/  # Inset textareas
│   │   └── RainbowText/    # Animated rainbow text
│   ├── molecules/          # Combined atoms
│   │   ├── VisitorCounter/ # Hit counter display
│   │   ├── GuestbookForm/  # Sign the guestbook
│   │   ├── GuestbookEntry/ # Individual guestbook entry
│   │   ├── NavLink/        # Navigation links with badges
│   │   └── WebRing/        # Remember web rings?
│   ├── organisms/          # Complex components
│   │   ├── Header/         # Site header with marquee
│   │   ├── Sidebar/        # Navigation, counter, awards
│   │   ├── MainContent/    # About, links, updates
│   │   ├── Guestbook/      # Full guestbook section
│   │   └── Footer/         # Credits and badges
│   └── templates/          # Page layouts
│       ├── SplashScreen/   # ENTER splash page
│       └── MainLayout/     # Main site layout
├── hooks/
│   ├── useIndexedDB.ts     # Generic IndexedDB hook
│   ├── useVisitorCounter.ts # Visitor counter state
│   └── useGuestbook.ts     # Guestbook CRUD
└── styles/
    └── globals.scss        # Global 90s styles

🏃 Running Locally

npm install
npm run dev

Open http://localhost:3000 to enter the time warp.

✨ GeoCities Elements Included

Cheesy "ENTER" splash screen
Animated cursor trail (sparkles!)
Blinking text
Rainbow text
Marquee scrolling
Under construction GIFs
Dancing baby GIF
Fire GIFs
Skull GIF
Visitor counter
Guestbook
Web ring
"Best viewed with Netscape/IE" badges
Award badges
Windows 95 style buttons
Ridge/groove borders everywhere
Tiled backgrounds
Comic Sans (via Comic Neue)
wEiRd CaPiTaLiZaTiOn

🎨 Design Philosophy

The Ironic Stack: Maximum modern engineering practices wrapped in maximum 90s web chaos. TypeScript strict mode enforcing the type safety of your <blink> tag replacement.

Built with genuine affection for the web's weird, wonderful early days.

MaDe WiTh 💕 aNd Notepad.exe

(AcTuAlLy MaDe WiTh Next.js, React, TypeScript, SASS & IndexedDB)

3.6 KiB Raw Permalink Blame History