An interactive Windows 7-inspired portfolio website showcasing my work as a Full-Stack Developer with 8+ years of experience in web development, cloud architecture, and team leadership. Experience a nostalgic desktop environment with authentic Windows 7 Aero Glass effects, functional windows, taskbar, and desktop icons.
Visit the live site: ryanjamesindangan.github.io
- Authentic Aero Glass UI - Translucent blue taskbar with blur effects
- Functional Windows - Draggable, resizable, minimize/maximize/close
- Start Menu - Two-column layout with user profile area
- Taskbar - Active window highlighting, system tray, clock
- Desktop Icons - Double-click to open applications
- Boot Screen - Windows 7-style loading screen with profile photo
- About Me - Professional summary with stats and experience
- Technical Skills - Categorized skills showcase (AI/ML, Frontend, Backend, Cloud, DevOps)
- Work Experience - Interactive timeline of professional journey
- Featured Projects - Interactive project showcase with live demos and filtering
- AI Lab - Interactive AI/ML demos (OCR, Document Intelligence Pipeline, Watermark Removal)
- Certifications - Certificate gallery with modal viewer (CTO, Hacker-X)
- Testimonials - Client testimonials carousel with navigation
- GitHub Stats - Live GitHub statistics and activity feed
- Blog & Articles - Technical blog posts with filtering and search
- Snake Game - Enhanced game with power-ups, special food, and smooth animations
- AI Assistant - Smart chatbot with voice input, math calculations, and general knowledge
- Smooth Animations - RequestAnimationFrame for 60fps gameplay
- Modern UI - Gradient backgrounds, glow effects, glassmorphism
- Game Mechanics - Speed increase, special food, power-ups (speed/slow/shield)
- Responsive Design - Optimized for desktop and mobile
- Performance Optimized - Lazy loading, resource hints, optimized fonts
- PWA Support - Service worker for offline functionality
- Accessibility - ARIA labels, keyboard navigation, screen reader support
- Dark/Light Mode - Theme toggle with system preference detection
- SEO Optimized - Open Graph, Twitter Cards, JSON-LD structured data
- Smart Chatbot - Math calculations, general knowledge, voice input, conversation export
ryanjamesindangan.github.io/
├── index.html # Main HTML entry point
├── css/
│ ├── devos.css # Windows 7 OS styling (Aero Glass, taskbar, windows)
│ └── styles.css # Additional styles
├── js/
│ ├── devos/
│ │ ├── boot.js # Boot screen logic
│ │ ├── main.js # Main application logic, desktop icons, start menu
│ │ ├── windows.js # Window management (create, drag, resize, minimize/maximize)
│ │ ├── apps.js # Application content definitions
│ │ └── snake-game.js # Enhanced Snake game with power-ups
│ ├── config/
│ │ └── config.js # Configuration constants
│ ├── modules/
│ │ ├── componentLoader.js
│ │ └── config.js
│ └── utils/
│ └── helpers.js # Utility functions
├── assets/
│ ├── profile-photo.jpg # Profile photo for boot screen
│ ├── background.jpg # Desktop wallpaper
│ ├── certificates/ # Certificate PDFs and images
│ └── *.png # Favicon and app icons
├── docs/
│ ├── ARCHITECTURE.md # System architecture documentation
│ ├── PROJECT-STRUCTURE.md # Detailed file organization
│ ├── VERSIONING.md # Git Flow & releases
│ └── PROFILE-PHOTO-SETUP.md # Photo setup instructions
├── README.md # This file
└── LICENSE # MIT License
- HTML5 - Semantic markup structure
- CSS3 - Custom properties, Grid, Flexbox, animations, backdrop-filter (Aero Glass)
- JavaScript (ES6+) - Vanilla JS, no dependencies
- Canvas API - For Snake game rendering
- LocalStorage - High score persistence
- GitHub Pages - Static site hosting
-
Clone the repository
git clone https://github.com/RyanJamesIndangan/ryanjamesindangan.github.io.git cd ryanjamesindangan.github.io -
Open in browser
# Simply open index.html in your browser # Or use a local server (recommended) python -m http.server 8000 # or npx serve
-
Visit
http://localhost:8000
No build process or dependencies required!
The portfolio includes an enhanced Snake game with:
- Smooth Animations - 60fps gameplay using requestAnimationFrame
- Progressive Difficulty - Speed increases every 50 points
- Special Food - Golden food worth 50 points (appears randomly)
- Power-Ups:
- Speed - Temporary speed boost
- Slow - Temporary slow motion
- Shield - Protection indicator (visual only)
- Pause Functionality - Press Space to pause/resume
- Modern UI - Gradient backgrounds, glow effects, glassmorphism
- High Score Tracking - Persisted in localStorage
- Arrow Keys or WASD - Move snake
- Space - Pause/Resume game
| Section | Description |
|---|---|
| About Me | Professional summary, experience highlights, and dynamic stats |
| Technical Skills | Categorized technical skills (AI/ML, frontend, backend, cloud, DevOps, tools) |
| Work Experience | Detailed work history with interactive timeline |
| Featured Projects | Interactive project showcase with live demos, filtering, and detailed views |
| AI Lab | Interactive AI/ML demos: OCR, Document Intelligence Pipeline, Watermark Removal |
| Certifications | Certificate gallery with modal viewer (CTO, Hacker-X 21 modules) |
| Testimonials | Client testimonials carousel with navigation and external links |
| GitHub Stats | Live GitHub statistics, repositories, and activity feed |
| Blog & Articles | Technical blog posts with filtering, search, and detailed views |
| Snake Game | Enhanced game with power-ups and special mechanics |
| AI Assistant | Smart chatbot with voice input, math, general knowledge, and conversation export |
React • Vue.js • Angular • TypeScript • JavaScript • HTML5 • CSS3 • Tailwind CSS
PHP • CodeIgniter • Laravel • Node.js • Express.js • Python • Django • Java
MySQL • PostgreSQL • MongoDB • Firebase • REST APIs • GraphQL • WebSockets
AWS (EC2, RDS, Lambda, S3) • Docker • Kubernetes • DigitalOcean • Jenkins • GitHub Actions • CI/CD
Git • GitHub/GitLab • N8N • Cursor AI • v0 by Vercel • Postman • Docker Compose • Selenium • Cypress
Jira • Confluence • Asana • Monday.com • ClickUp • Slack • MS Teams • Agile/Scrum
- Translucent blue Aero Glass background
- Start button with Windows logo
- Active window highlighting
- System tray with clock (DD/MM/YYYY format)
- Application buttons with icons
- Draggable title bar
- Minimize, Maximize, Close buttons
- Resizable corners and edges
- Aero Glass window background
- Z-index management for focus
- Two-column layout
- Left: Application shortcuts
- Right: User profile area with vertical separator
- Search functionality
- Smooth animations
- Double-click to open applications
- Hover effects with glow
- Icon labels with text shadows
- Drag and drop support
- 📧 Email: ryanjamesfranciscoindangan@yahoo.com
- 💼 LinkedIn: linkedin.com/in/ryanjamesindangan
- 🎯 Upwork: upwork.com/freelancers/~01d452f9125d3dcdf1
- 💻 GitHub: github.com/ryanjamesindangan
- 📱 Phone: +63 999 333 9030
- 📍 Location: Caloocan City, Metro Manila, Philippines
This project is licensed under the MIT License - see the LICENSE file for details.
- Windows 7 UI design inspiration
- Aero Glass effects using CSS backdrop-filter
- Icons and favicons generated using various tools
- Fonts: Segoe UI (system), Inter and JetBrains Mono from Google Fonts
Built with ❤️ by Ryan James Indangan
Available for freelance work and full-time opportunities