Randy Olson

Dr. Randal S. Olson - Personal Website

A modern, responsive portfolio and blog website built with Next.js, featuring AI research insights, data science content, and professional services. Built with contemporary web development practices for optimal performance and SEO.

🚀 Live Site

Visit the live website at randalolson.com

🛠️ Technology Stack

• Framework: Next.js 15 with App Router
• Styling: Tailwind CSS with custom design system
• Icons: Lucide React
• Fonts: Inter (primary), JetBrains Mono (code), Cal Sans (display)
• Deployment: Railway (static export with serve)
• Content: Markdown with frontmatter parsing

✨ Features

• 📱 Responsive Design: Mobile-first approach with Tailwind CSS
• 🌙 Dark/Light Mode: System-aware theme switching
• 🔍 Client-Side Search: Fast, local search functionality
• 📊 SEO Optimized: Meta tags, Open Graph, Twitter cards
• ⚡ Static Generation: Pre-rendered pages for optimal performance
• ♿ Accessibility: WCAG compliant with proper focus management
• 🎨 Modern Design: Clean, professional aesthetic with micro-animations

🏗️ Project Structure

src/
├── app/                    # Next.js App Router
│   ├── blog/              # Blog listing page
│   ├── search/            # Search functionality
│   ├── resume/            # Resume page
│   ├── work-with-me/      # Services page
│   ├── [year]/[month]/[day]/[slug]/  # Dynamic blog posts
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Homepage
│   └── globals.css        # Global styles
├── components/
│   ├── layout/            # Navigation, footer
│   ├── ui/                # Reusable UI components
│   └── theme-toggle.tsx   # Theme switching
└── lib/
    ├── content.ts         # Content loading utilities
    ├── search.ts          # Search functionality
    └── utils.ts           # Helper functions

🚀 Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

1. Clone the repository

   git clone https://github.com/rhiever/rhiever.github.io.git
   cd rhiever.github.io
   

2. Install dependencies

   npm install
   

3. Start development server

   npm run dev
   

4. Open browser

   open http://localhost:3000
   

Build for Production

npm run build

This generates a static export in the dist/ directory, ready for deployment.

📝 Content Management

Adding Blog Posts

1. Create a new markdown file in _posts/ directory
2. Use YAML frontmatter format:

   ---
   layout: post
   title: "Your Post Title"
   date: 2025-01-15 10:00:00.000000000 -08:00
   description: "Brief description for SEO"
   keywords: "keyword1, keyword2, keyword3"
   categories: ["category1", "category2"]
   tags: ["tag1", "tag2"]
   ---
   
   Your post content in Markdown...
   

3. Add any images to public/assets/YYYY/MM/ directory
4. Run npm run build to regenerate static files

Available Content Types

• Blog Posts: Technical articles, research insights, tutorials
• Static Pages: Resume, services, about information
• Images: Optimized assets in WebP/AVIF formats where supported

🚢 Deployment

Railway (Recommended)

This site is deployed on Railway using static export with the serve package.

Initial Setup

1. Create Railway Project
   • Log in to Railway
   • Click “New Project” → “Deploy from GitHub repo”
   • Connect your GitHub account and select this repository
2. Automatic Configuration
   • Railway automatically detects the railway.json configuration
   • Build command: npm ci && npm run build
   • Start command: npx serve dist -l $PORT -s
3. Generate Domain
   • Go to your service → Settings → Networking
   • Click “Generate Domain” to get a *.railway.app URL

Custom Domain Setup

1. In Railway: Settings → Networking → “+ Custom Domain”
2. Enter your domain (e.g., randalolson.com)
3. Railway provides a CNAME record to configure
4. Add the CNAME record in your DNS provider
5. Railway automatically provisions SSL certificates

How It Works

• Build: Next.js generates static HTML/CSS/JS in dist/
• Serve: The serve package hosts these files with proper SPA routing (-s flag)
• Triggers: Pushes to main branch automatically trigger new deployments

Manual/Local Production Testing

# Build the site
npm run build

# Test production serving locally
npm run start:prod

🔧 Configuration

Railway Configuration (railway.json)

The deployment is configured via railway.json:

{
  "build": {
    "builder": "NIXPACKS",
    "buildCommand": "npm ci && npm run build"
  },
  "deploy": {
    "startCommand": "npx serve dist -l ${PORT:-3000} -s",
    "healthcheckPath": "/",
    "restartPolicyType": "ON_FAILURE",
    "restartPolicyMaxRetries": 3
  }
}

Environment Variables

No environment variables required for basic functionality. Railway automatically provides:

• PORT - The port to bind to (Railway assigns this)

Design System

Colors, fonts, and spacing are defined in tailwind.config.ts and src/app/globals.css. The design system supports:

• Primary Colors: Professional blue palette
• Typography: Inter font family with display variants
• Spacing: Consistent 4px grid system
• Dark Mode: Automatic theme switching

📊 Performance

• Bundle Size: ~105KB shared JavaScript
• First Load: Optimized static HTML delivery
• SEO Score: Perfect Lighthouse scores for static content
• Accessibility: WCAG AA compliant

📄 License

Content and code © 2025 Dr. Randal S. Olson. All rights reserved.