Russell Thompson - Futuristic Personal Portfolio Website

Live Site

URL Live: https://russellthompson.pages.dev - This is the current live site.

URL To Come: https://platformpilot.dev - This will be updated to my own existing custom domain in the future.

GitHub Repository: https://github.com/onekiller891/rt.git

Description

This project is a modern, futuristic, and impressive personal portfolio website for Russell Thompson, Chief Engineer & Automation Lead. It showcases his expertise in AI, automation, platform engineering, and leadership, while also providing insights into his mission and vision for the future.

The site is a single-page application built with HTML, Tailwind CSS, and custom JavaScript for animations and interactivity.

Features

• Futuristic Design: Dark theme with neon accents (cyan and blue), using the 'Orbitron' and 'Inter' fonts.
• Preloader Animation: An engaging 3D spinning cube preloader.
• Hero Section:
  • Dynamic particle animation background that subtly reacts and connects particles.
  • Animated typing effect for the subtitle/tagline.
• Smooth Scrolling & Navigation:
  • Fixed navigation bar that becomes more opaque on scroll.
  • Active link highlighting for the current section.
  • Smooth scrolling to sections.
  • Mobile-friendly hamburger menu.
• Engaging Sections:
  • Mission: Outlines Russell's core passion and drive.
  • Core Competencies: Showcases key skills with animated progress bars that fill on scroll.
  • Experience Snapshot: Presents career highlights in a visually appealing timeline format.
  • Vision for the Future: Articulates aspirations in AI and entrepreneurship.
  • Connect: Provides links to LinkedIn and X (Twitter) profiles.
• Interactive Elements:
  • Custom-styled cards with hover effects.
  • Futuristic button styling with hover effects.
• Responsive Design: Adapts to various screen sizes (mobile, tablet, desktop).
• Scroll-Triggered Animations: Sections fade and slide into view as the user scrolls.

Technologies Used

• HTML5: For the basic structure of the website.
• Tailwind CSS: A utility-first CSS framework for rapid UI development and styling.
• Custom CSS: For bespoke futuristic styling, animations, and theme elements.
• JavaScript (Vanilla JS):
  • DOM manipulation.
  • Preloader logic.
  • Navigation scroll effects and active link highlighting.
  • Mobile menu toggle.
  • Hero subtitle typing animation.
  • Canvas-based particle animation in the hero section.
  • Intersection Observer API for scroll-triggered animations (sections and skill bars).

Setup & Deployment

This is a static website and can be hosted on any platform that serves static files.

1. Clone the repository (optional, if you want to work locally):

   git clone [https://github.com/onekiller891/rt.git](https://github.com/onekiller891/rt.git)
   cd rt

2. View Locally: Open the index.html file directly in your web browser.
3. Deployment:
   • Cloudflare Pages (Recommended & Current Setup): Upload the project folder directly to Cloudflare Pages. Connect your custom domain (platformpilot.dev).
   • GitHub Pages: Push the files to a GitHub repository and enable GitHub Pages in the repository settings.
   • Netlify: Drag and drop the project folder to Netlify, or connect to your Git repository.
   • Other Static Host Providers: Vercel, Firebase Hosting, etc.

No build process is required for the current version of the site.

Development

Run npm install to install development dependencies. Use npm run lint to check index.html locally. Every pull request automatically runs HTML validation via GitHub Actions and will fail if issues are found.

How to Use / View

Simply navigate to the live URL: https://russellthompson.pages.dev.

To be updated to custom domain URL: https://platformpilot.dev.

Scroll through the different sections to experience the animations and learn more about Russell Thompson. The navigation bar at the top can also be used to jump to specific sections.

Future Enhancements (Ideas)

• Blog/Insights Section: For sharing articles on AI, automation, or leadership.
• Projects Showcase: A dedicated section to detail specific projects or achievements with more visuals.
• Interactive 3D Elements: Further enhance the futuristic theme with more three.js or similar 3D graphics.
• Contact Form: Add a functional contact form for direct inquiries.
• Enhanced Particle Interactions: More complex behaviors for the hero section particle system.
• Accessibility Audit & Improvements (A11y): Ensure the site meets high accessibility standards.

Author

• Russell Thompson
  • LinkedIn: https://www.linkedin.com/in/russell-thompson89
  • X (Twitter): https://x.com/platformpilot89

License

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