TheRealFredP3D 个人作品集网站：内嵌 RegexDojo 正则学习工具

https://therealfred.ca - TheRealFredP3D Personal Website

A modern, responsive personal portfolio website for Frederick Pellerin (TheRealFredP3D), showcasing expertise in cybersecurity, AI, Python development, and CTF competitions.

Features

Modern Design: Dark cybersecurity theme with animated elements
RegexDojo Integration: Interactive regex trainer embedded as a distinct crimson tab
Responsive Layout: Optimized for desktop, tablet, and mobile devices
Interactive Elements: Smooth scrolling, hover effects, and animations
Professional Portfolio: Showcases projects, skills, and achievements
Performance Optimized: Fast loading with optimized assets

Sections

Hero Section: Introduction with animated typing effect and profile image
About: Personal journey and learning philosophy
Skills: Technical expertise with animated progress bars
Projects: Featured GitHub projects with descriptions and tech stacks
Statistics: GitHub stats and training platform achievements
Contact: Social links and contact information
RegexDojo: Full-screen interactive regex learning playground (13 lessons, translate mode, sandbox)

Technologies Used

HTML5: Semantic markup and structure
CSS3: Modern styling with flexbox, grid, and animations
JavaScript: Interactive functionality and animations
Font Awesome: Icons for enhanced visual appeal
Google Fonts: Inter and JetBrains Mono typography

RegexDojo Integration

The site embeds the RegexDojo app — an interactive regex learning playground — as a full-screen overlay launched from a distinct crimson tab in the navbar.

Self-hosted bundle: the production Vite build lives at regexdojo/ and is served as static assets by GitHub Pages (no external runtime dependency).
Distinct identity: the RegexDojo tab and overlay chrome use a crimson/amber "Warm-Halo" palette so they stand out from the teal cybersecurity theme of the rest of the site. Inside the iframe, RegexDojo keeps its own themes (Warm-Halo, Glacius, Nord, Dracula, Abyss, Tokyo Night).
Lazy-loaded: the iframe src is only set on first open, so the rest of the site stays snappy.
Keyboard friendly: Esc closes the overlay; focus is moved into and out of the overlay for accessibility.
Files: js/regexdojo.js (controller), overlay markup in each HTML page, styles in css/style.css (.regexdojo-* and .nav-link.regexdojo-tab).

To rebuild the embedded bundle after upstream RegexDojo changes:

git clone https://github.com/therealfredp3d/regexdojo.git /tmp/regexdojo
cd /tmp/regexdojo
# set base: '/regexdojo/' in vite.config.ts, then:
npm install && npm run build
cp -r dist/* /path/to/therealfredp3d.github.io/regexdojo/

Project Structure

therealfredp3d-website/
├── index.html              # Main HTML file
├── css/
│   ├── style.css           # Main stylesheet
│   └── responsive.css      # Responsive design styles
├── js/
│   ├── main.js            # Core JavaScript functionality
│   └── animations.js      # Advanced animations and effects
├── assets/
│   └── images/            # Project and background images
└── README.md              # Project documentation

Key Features

Design Elements

Cybersecurity-themed color scheme (dark blues with green accents)
Matrix rain background effect
Glowing profile image with pulse animation
Smooth scroll indicators and navigation

Interactive Components

Mobile-responsive hamburger navigation
Animated skill progress bars
Hover effects on project cards
Typing animation for hero title
Parallax scrolling effects
Time-based cursor trailing effect

Performance Features

Optimized images and assets
Smooth animations with CSS transitions
Lazy loading for images
Debounced scroll events

GitHub Pages Deployment

This website is designed to be deployed on GitHub Pages with a custom domain (therealfred.ca).

Deployment Steps

Create a new repository named therealfredp3d.github.io
Upload all website files to the repository
Enable GitHub Pages in repository settings
Configure custom domain in repository settings
Update DNS settings for therealfred.ca to point to GitHub Pages

Custom Domain Configuration

Add CNAME file with domain: therealfred.ca
Configure DNS A records to point to GitHub Pages IPs
Enable HTTPS in GitHub Pages settings

Browser Compatibility

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+
Mobile browsers (iOS Safari, Chrome Mobile)

Performance Metrics

Lighthouse Performance Score: 95+
First Contentful Paint: < 1.5s
Largest Contentful Paint: < 2.5s
Cumulative Layout Shift: < 0.1

Future Enhancements

Blog integration with Medium RSS feed
Contact form with backend integration
Dark/light theme toggle
Additional project showcases
Real-time GitHub statistics API integration

Contact

For questions or suggestions about this website:

GitHub: @therealfredp3d
LinkedIn: fredp3d
Twitter: @TheRealFREDP3D
Email: fredp3d@proton.me
Website: https://therealfred.ca

Built with passion for computer science and technology by Frederick Pellerin (TheRealFredP3D).