Jon Russell - Portfolio Website

A modern, responsive portfolio website built with Laravel, Vue.js, and TailwindCSS, showcasing professional software engineering projects and experience.

📑 Table of Contents

🚀 Live Site
🛠️ Tech Stack
✨ Features
🏗️ Project Structure
🚀 Getting Started
🧪 Testing
🎨 Customization
- Styling
🔧 Development
- Available Scripts
- Code Style
📱 Responsive Design
🚀 Deployment
📄 License
👨‍💻 Author
🙏 Acknowledgments

📊 Project Status

🚀 Live Site

View Live Site | Screenshot Source

🛠️ Tech Stack

Backend

Laravel 12 - PHP framework
Inertia.js 2.0 - Modern monolith approach with SPA routing
SQLite - Database (can be configured for MySQL/PostgreSQL)
PHP 8.3+ - Runtime (8.4 recommended)
Laravel Wayfinder - Form handling and route utilities
Sentry - Error tracking and performance monitoring
Mailgun - Email delivery service

Frontend

Vue.js 3.5.13 - Progressive JavaScript framework with Composition API
TypeScript 5.2.2 - Type safety throughout
Tailwind CSS 4.1.1 - Utility-first CSS framework
Vite 7.0.4 - Next-generation build tool
Pinia 3.0.3 - State management
Inertia.js Vue 3 - Server-driven SPA framework
FontAwesome - Icon library
vue3-simple-icons - Simple Icons integration

Server-Side Rendering (SSR)

Inertia SSR - Server-side rendering support for improved SEO and initial load performance
Configurable via composer dev:ssr command

Development Tools

ESLint 9.17.0 - Code linting with Vue and TypeScript support
Prettier 3.4.2 - Code formatting with Tailwind plugin
PEST 4.1 - Modern PHP testing framework
Laravel Pint - PHP code style fixer
Laravel Pail - Real-time log viewer
GitHub Actions - CI/CD pipelines for testing and linting
Stylelint - CSS linting

✨ Features

Core Functionality

Single Page Application (SPA) - Built with Inertia.js for seamless navigation without full page reloads
Server-Side Rendering (SSR) - Optional SSR support for improved SEO and faster initial page loads
Responsive Design - Mobile-first approach with breakpoints optimized for all devices
Modern UI/UX - Clean, professional interface with smooth animations and transitions

Interactive Features

Project Showcase - Interactive project gallery with detailed modal views
Project Modals - Detailed project information with images, descriptions, technologies, and key takeaways
Image Modal System - Lightbox-style image viewing for project images
Contact Form - Functional contact form with Mailgun email delivery integration
Contact Modal - Modal-based contact form accessible from navigation
Skills API - RESTful API endpoint for fetching skills categorized by type (Software Engineering, DevOps, Quality, Leadership)
Dynamic Skills Display - Database-backed skills with grouped categorization
Smooth Scrolling - Section-based navigation with smooth scroll behavior
URL-based Section Navigation - Direct links to specific sections (about, projects, contact)

Visual Effects

Animated Background - Dynamic starfield background with animated stars and gradients
Scrolling "Things I Like" - Infinite scrolling showcase of favorite tools and technologies
Hover Effects - Interactive hover states on projects and cards
Custom Fonts - Space Mono and Sixtyfour fonts for unique typography
Custom Color Theme - Terminal-inspired color palette with custom CSS variables

Technical Features

Type Safety - Full TypeScript support throughout the frontend
Type Definitions - Comprehensive TypeScript types for all data structures
Vue 3 Composition API - Modern Vue.js development with Composition API
Composables - Reusable Vue composables (useModal, useScrollToSection, useEscapeKey)
State Management - Pinia store for global state management
Performance Optimized - Fast loading times with code splitting and lazy loading
Error Tracking - Sentry integration for error monitoring and performance tracking
SEO Ready - Meta tags and structured data support
Accessibility - ARIA labels and semantic HTML

🏗️ Project Structure

├── app/                           # Laravel application
│   ├── Http/
│   │   ├── Controllers/          # Application controllers
│   │   │   ├── Api/              # API controllers (SkillController)
│   │   │   └── ContactController.php
│   │   └── Middleware/           # HTTP middleware
│   ├── Mail/                      # Mail classes (ContactFormMail)
│   ├── Models/                    # Eloquent models (Skill, SkillType, User)
│   └── Providers/                 # Service providers
├── config/                        # Configuration files
│   ├── inertia.php                # Inertia.js configuration
│   ├── mail.php                   # Mail configuration
│   └── sentry.php                 # Sentry error tracking config
├── database/
│   ├── factories/                 # Model factories
│   ├── migrations/                # Database migrations
│   ├── seeders/                   # Database seeders (SkillTypeSeeder)
│   └── database.sqlite            # SQLite database file
├── public/                        # Publicly accessible files
│   ├── build/                     # Compiled assets
│   ├── images/                    # Static images (projects, icons, profile)
│   └── favicons/                  # Favicon files
├── resources/
│   ├── js/
│   │   ├── actions/               # Action utilities
│   │   ├── components/            # Reusable Vue components
│   │   │   ├── modals/            # Modal components (Contact, Project, Image)
│   │   │   ├── BackgroundStars.vue
│   │   │   ├── ScrollingThingsILike.vue
│   │   │   └── ToggleSwitch.vue
│   │   ├── composables/           # Vue 3 composables
│   │   │   ├── useEscapeKey.ts
│   │   │   ├── useModal.ts
│   │   │   └── useScrollToSection.ts
│   │   ├── data/                  # Static data files (projects.json)
│   │   ├── layout/                # Layout components (Header, Footer, Nav)
│   │   ├── pages/                 # Inertia page components (SPA.vue)
│   │   ├── sections/              # Page sections (AboutSection, ProjectsSection)
│   │   ├── stores/                # Pinia stores
│   │   ├── types/                 # TypeScript type definitions
│   │   ├── wayfinder/             # Wayfinder route utilities
│   │   ├── app.ts                 # Main application entry point
│   │   └── ssr.ts                 # SSR entry point
│   ├── css/
│   │   ├── app.css                # Main stylesheet with Tailwind
│   │   ├── background-stars.css   # Starfield animation styles
│   │   └── modal.css              # Modal component styles
│   └── views/
│       ├── app.blade.php          # Main Inertia layout
│       └── emails/                # Email templates
├── routes/
│   ├── api.php                    # API routes (skills, contact)
│   ├── web.php                    # Web routes
│   └── console.php                # Console commands
├── storage/                        # Storage directory
├── tests/                         # Test suites
│   ├── Feature/                   # Feature tests
│   └── Unit/                      # Unit tests (ContactController, SkillController)
├── .github/workflows/             # GitHub Actions workflows
│   ├── tests.yml                  # CI test workflow
│   └── lint.yml                   # Linting workflow
├── .env.example                   # Environment variables example
├── composer.json                  # PHP dependencies
├── package.json                   # Node.js dependencies
├── vite.config.ts                 # Vite configuration
├── tailwind.config.ts             # Tailwind CSS configuration
└── tsconfig.json                  # TypeScript configuration

🚀 Getting Started

Prerequisites

PHP 8.3+ (8.4 recommended for CI/testing)
Node.js 22+ (LTS recommended, matches CI configuration)
Composer 2.5+
SQLite (or your preferred database - MySQL/PostgreSQL supported)
Mailgun account (for contact form functionality)

Environment Setup

Clone the repository

git clone https://github.com/russellio/jonrussell.dev.git
cd jonrussell.dev

Install PHP dependencies

composer install --no-interaction --prefer-dist --optimize-autoloader

Install Node dependencies
```
npm ci
```

Environment configuration Copy the example environment file and generate an application key:

cp .env.example .env
php artisan key:generate

Update the following environment variables in .env:

APP_ENV=local
APP_DEBUG=true
APP_URL=http://localhost:8000

DB_CONNECTION=sqlite
DB_DATABASE=/absolute/path/to/database.sqlite

# Mailgun Configuration (for contact form)
MAIL_MAILER=mailgun
MAILGUN_DOMAIN=your-domain.mailgun.org
MAILGUN_SECRET=your-mailgun-secret
MAILGUN_ENDPOINT=api.mailgun.net

# Sentry Configuration (optional, for error tracking)
SENTRY_LARAVEL_DSN=your-sentry-dsn
SENTRY_TRACES_SAMPLE_RATE=1.0

# For production
# APP_ENV=production
# APP_DEBUG=false

Database Setup

SQLite Setup (Recommended for development)

touch database/database.sqlite
php artisan migrate --seed

Or for MySQL/PostgreSQL:

# Create database and update .env with credentials
# Then run migrations
php artisan migrate --seed

Development Server

Start the development servers:

Option 1: Separate terminals (recommended for debugging)

# Terminal 1: Start Laravel development server
php artisan serve

# Terminal 2: Start Vite dev server
npm run dev

Option 2: Combined development environment

# Start all services (Laravel, Vite, Queue, Logs) in one command
composer dev

Option 3: With Server-Side Rendering

# Build SSR bundle and start with SSR enabled
composer dev:ssr

Visit http://localhost:8000 in your browser.

🧪 Testing

Run the test suite:

# PHP tests with PEST
./vendor/bin/pest

# Or use composer script
composer test

# Frontend linting
npm run lint

# Code formatting
npm run format

# PHP code style (Laravel Pint)
./vendor/bin/pint

Test Coverage

Unit Tests: ContactController, SkillController
Feature Tests: Example feature tests included
CI/CD: Automated testing on push to main and develop branches via GitHub Actions

🎨 Customization

Styling

The project uses Tailwind CSS 4 with custom theme configuration:

Custom Colors:

Terminal-inspired palette with custom shades
Primary (blue), Secondary (bulldog red), Gold, Bright Green
Terminal black variants for UI elements

Custom Fonts:

Space Mono - Monospace font for headings and code
Sixtyfour - Display font for section titles

Configuration Files:

resources/css/app.css - Custom CSS variables and global styles
tailwind.config.ts - Tailwind configuration with custom theme
Custom animations for infinite scrolling and starfield effects

🔧 Development

Available Scripts

NPM Scripts:

npm run dev              # Start Vite development server
npm run build            # Build for production
npm run build:ssr        # Build with SSR support
npm run lint             # Run ESLint and auto-fix issues
npm run format           # Format code with Prettier
npm run format:check     # Check code formatting without fixing

Composer Scripts:

composer dev              # Start full dev environment (server, queue, logs, vite)
composer dev:ssr         # Start dev environment with SSR enabled
composer test            # Run PHP test suite

Artisan Commands:

php artisan serve        # Start Laravel development server
php artisan migrate      # Run database migrations
php artisan migrate --seed  # Run migrations with seeders
php artisan inertia:start-ssr  # Start Inertia SSR server
php artisan pail         # Start real-time log viewer

Code Style

PHP: Follows PSR-12 standards, enforced with Laravel Pint
JavaScript/TypeScript: ESLint 9 with Vue and TypeScript plugins + Prettier 3
Vue.js: Vue 3 Composition API with <script setup> syntax
CSS: Tailwind CSS utility classes with custom CSS variables
Formatting: Automatic formatting on commit (Prettier for JS/TS, Pint for PHP)

📱 Responsive Design

The site is fully responsive with breakpoints:

Mobile: < 768px
Tablet: 768px - 1024px
Desktop: > 1024px

🚀 Deployment

Production Build

# Build frontend assets
npm run build

# For SSR-enabled deployment
npm run build:ssr

# Optimize Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache

Laravel Forge / Vapor

# Standard deployment
npm run build
php artisan deploy

# With SSR support
npm run build:ssr
php artisan inertia:start-ssr

Environment Variables

Ensure these are set in production:

APP_ENV=production
APP_DEBUG=false
MAILGUN_DOMAIN and MAILGUN_SECRET (for contact form)
SENTRY_LARAVEL_DSN (optional, for error tracking)
Database credentials

Docker

docker build -t jonrussell.dev .
docker run -p 8000:8000 jonrussell.dev

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Jon Russell - Senior Software Engineer

Portfolio: jonrussell.dev
LinkedIn: linkedin.com/in/russell-jonathan
GitHub: @russellio

🙏 Acknowledgments

Night Sky by jo_Geek - Inspiration for animated starfield background
Laravel - The PHP framework for building robust applications
Vue.js - The progressive JavaScript framework
Inertia.js - Modern monolith approach for SPAs
Tailwind CSS - Utility-first CSS framework
Sentry - Error tracking and performance monitoring
FontAwesome - Icon library
Simple Icons - Brand icons via vue3-simple-icons

📫 Contact: jonrussell.dev/contact | 🌐 Visit my portfolio: jonrussell.dev

⭐ Star this repository if you found it helpful! ⭐

📦 Notable Packages & Versions

Backend Dependencies

laravel/framework: ^12.0
inertiajs/inertia-laravel: ^2.0
laravel/wayfinder: ^0.1.11
sentry/sentry-laravel: ^4.18
symfony/mailgun-mailer: ^7.3
symfony/http-client: ^7.3

Frontend Dependencies

vue: ^3.5.13
@inertiajs/vue3: ^2.0.0
typescript: ^5.2.2
tailwindcss: ^4.1.1
@tailwindcss/vite: ^4.1.11
vite: ^7.0.4
pinia: ^3.0.3
@sentry/vue: ^10.22.0
@fortawesome/vue-fontawesome: ^3.1.2
vue3-simple-icons: ^15.6.0

Development Dependencies

pestphp/pest: ^4.1
laravel/pint: ^1.18
laravel/pail: ^1.2.2
eslint: ^9.17.0
prettier: ^3.4.2
vue-tsc: ^2.2.4

🔝 Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 189 Commits
.cursor		.cursor
.github/workflows		.github/workflows
.junie		.junie
app		app
bootstrap		bootstrap
config		config
database		database
docs		docs
public		public
resources		resources
routes		routes
storage		storage
tests		tests
.editorconfig		.editorconfig
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
.mcp.json		.mcp.json
.prettierignore		.prettierignore
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
README.md		README.md
artisan		artisan
boost.json		boost.json
composer.json		composer.json
composer.lock		composer.lock
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
phpunit.xml		phpunit.xml
stylelint.config.mjs		stylelint.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

Jon Russell - Portfolio Website

📑 Table of Contents

📊 Project Status

🚀 Live Site

🛠️ Tech Stack

Backend

Frontend

Server-Side Rendering (SSR)

Development Tools

✨ Features

Core Functionality

Interactive Features

Visual Effects

Technical Features

🏗️ Project Structure

🚀 Getting Started

Prerequisites

Environment Setup

Database Setup

Development Server

🧪 Testing

Test Coverage

🎨 Customization

Styling

🔧 Development

Available Scripts

Code Style

📱 Responsive Design

🚀 Deployment

Production Build

Laravel Forge / Vapor

Environment Variables

Docker

📄 License

👨‍💻 Author

🙏 Acknowledgments

📦 Notable Packages & Versions

Backend Dependencies

Frontend Dependencies

Development Dependencies

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases 5

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages