This is my personal portfolio website showcasing my work as a creative developer, game designer, and multi-disciplinary artist. The site features modern animations, interactive elements, and showcases my various projects and skills.
- Main Portfolio: kestq.github.io
- Phasmo Journal: kestq.github.io/phasmo-journal
kestq-gh-pages/
├── index.html # Main portfolio page
├── styles.css # Modern animated CSS with themes
├── script.js # Interactive JavaScript functionality
├── README.md # This file
└── phasmo-journal/ # Phasmo Journal sub-project
├── index.html # Phasmo Journal application
├── styles.css # Phasmo Journal themes (20 themes)
├── app.js # Phasmo Journal logic
├── data.js # Ghost data and utilities
└── README.md # Phasmo Journal documentation
- Animated Loading Screen - Beautiful loading animation with progress bar
- Hero Section - Animated text with floating cards and particle background
- 3 Interactive Portal Buttons:
- 🔥 Phasmo Journal (Live) - Ghost evidence tracker with 20 themes
- 🧪 Interactive Lab (Coming Soon) - Science simulations platform
- 🎮 3D Playground (Coming Soon) - WebXR experiences
- Skills Showcase - Programming languages, development tools, creative software
- Project Gallery - Recent work with hover effects and links
- About Section - Personal stats and achievements
- Contact Form - Interactive contact form with validation
- Responsive Design - Optimized for all devices
- 20 Beautiful Themes - Purple Aurora, Blue Sunset, Green Forest, and 17 more!
- Ghost Evidence Tracking - Complete database of 27 ghosts
- Smart Filtering - Evidence-based ghost elimination
- Difficulty Modes - Amateur through Insanity
- Interactive Tools - Timers, speed scaler, BPM finder
- Theme Persistence - Saves your preferred theme
- Mobile Optimized - Perfect on all devices
- HTML5 - Semantic markup and structure
- CSS3 - Modern animations, gradients, glassmorphism
- JavaScript (ES6+) - Interactive functionality
- Font Awesome - Icons and graphics
- Google Fonts - Inter & JetBrains Mono typography
- CSS Custom Properties - Dynamic theming system
- Intersection Observer API - Scroll animations
- CSS Grid & Flexbox - Modern layouts
- CSS Animations - Smooth transitions and effects
- LocalStorage API - Theme and preference persistence
- Responsive Design - Mobile-first approach
- Lazy Loading - Optimized asset loading
- Throttled Events - Smooth scrolling and interactions
- Optimized Animations - 60fps performance
- Compressed Assets - Fast loading times
- Modern Glassmorphism - Translucent elements with backdrop blur
- Gradient Backgrounds - Beautiful color transitions
- Micro-Interactions - Subtle hover effects and animations
- Card-Based Layout - Clean, organized content presentation
- Color Psychology - Carefully chosen color schemes for different moods
- Progressive Enhancement - Works without JavaScript
- Accessibility First - Keyboard navigation and screen reader support
- Performance Optimized - Fast loading and smooth animations
- Mobile Responsive - Perfect experience on all devices
-
Create GitHub Repository
# Create new repository on GitHub # Name: kestq (or your preferred name) # Make it Public
-
Upload Files
# Upload all files to repository root: # - index.html # - styles.css # - script.js # - README.md # - phasmo-journal/ folder (with all contents)
-
Enable GitHub Pages
- Go to repository Settings
- Scroll to Pages section
- Select Deploy from a branch
- Choose main branch and / (root) folder
- Click Save
-
Access Your Site
Main Portfolio: https://yourusername.github.io/repository-name/ Phasmo Journal: https://yourusername.github.io/repository-name/phasmo-journal/
-
Add CNAME file
- Create
CNAMEfile in repository root - Add your domain:
kestq.dev
- Create
-
Configure DNS
CNAME record: www.kestq.dev → yourusername.github.io A record: kestq.dev → 185.199.108.153
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000
# Node.js (with npx)
npx serve .
# Visit: http://localhost:8000- Install "Live Server" extension
- Right-click
index.html - Select "Open with Live Server"
- Upload to any web hosting service
- Works with Apache, Nginx, etc.
- Loading Time: < 2 seconds
- First Contentful Paint: < 1 second
- Largest Contentful Paint: < 2.5 seconds
- Cumulative Layout Shift: < 0.1
- First Input Delay: < 100ms
- Animated title with gradient text
- Floating cards showcasing skills
- Particle background system
- Call-to-action buttons
- 3 main project portals
- Hover animations and effects
- Status indicators (Live/Coming Soon)
- Detailed project descriptions
- Programming Languages (8 skills)
- Development Tools (8 tools)
- Creative Software (8 programs)
- Animated skill bars with percentages
- Grid-based project cards
- Hover effects with tech stack
- External links and GitHub integration
- Featured project highlighting
- Personal introduction
- Achievement statistics
- Animated counters
- Download resume CTA
- Interactive contact form
- Social media links
- Professional contact information
- Form validation and feedback
The main portfolio uses CSS custom properties for:
- Primary Colors - Gradient backgrounds
- Typography - Inter & JetBrains Mono fonts
- Spacing - Consistent spacing scale
- Shadows - Depth and elevation
- Transitions - Smooth animations
20 custom color schemes including:
- Purple Aurora - Mystical purple tones
- Blue Sunset - Ocean blues
- Green Forest - Nature greens
- Red Crimson - Bold reds
- Orange Sunset - Warm oranges
- Pink Rose - Soft pinks
- Teal Ocean - Deep teals
- Indigo Dream - Dreamy indigos
- Emerald Forest - Rich emeralds
- Amber Gold - Golden ambers
- Violet Magic - Magical violets
- Cyan Electric - Electric cyans
- Rose Gold - Elegant rose gold
- Lime Bright - Bright lime greens
- Slate Modern - Modern grays
- Zinc Rain - Zinc grays
- Stone Earth - Earthy tones
- Neutral Warm - Warm neutrals
- Mauve Delicate - Delicate mauves
- Default Dark/Light - Classic schemes
- Dark/Light Mode Toggle - System preference detection
- Project Analytics - Usage tracking and insights
- Blog Section - Technical articles and tutorials
- 3D Elements - Three.js integration
- PWA Support - Offline functionality
- Performance Monitoring - Real user monitoring
- Interactive Lab - Science education platform
- 3D Playground - WebXR experiences
- Game Development Tools - Unity integrations
- Design Resources - UI/UX design system
The site includes placeholder integration for:
- Google Analytics - Page views and user behavior
- Performance Monitoring - Core Web Vitals tracking
- Error Tracking - JavaScript error monitoring
- User Feedback - Contact form analytics
This is a personal portfolio, but feedback and suggestions are welcome!
- Issues - Report bugs or request features
- Fork - Create your own version
- Improve - Enhance animations or functionality
- Share - Spread the word about great web design
This project is open source. Feel free to use any parts for your own portfolio, but please credit the original design.
- Email: [email protected]
- GitHub: @kestq
- LinkedIn: /in/kestq
- Twitter: @kestq_dev
Built with ❤️ and modern web technologies
"Creating immersive experiences through code, design, and innovation."