ZanePersonal

A modern, interactive personal website showcasing creative web development and design. Available at https://zane.org

🎯 Purpose

This personal website serves as:

• A creative portfolio and personal brand showcase
• An experimental playground for modern web technologies
• A demonstration of interactive UI/UX design principles
• A learning platform for exploring cutting-edge web features

✨ Features

Visual Effects

• Matrix Rain Background - Animated character rainfall effect
• Custom Cursor - Interactive cursor with trailing particles
• Mouse Trail Effects - Particle system following cursor movement
• Glitch Effects - Periodic text glitching animations
• Interactive Background - Particle network with connection lines

User Experience

• Smooth Animations - Staggered entrance animations for all elements
• Sound Effects - Audio feedback for interactions (can be browser intensive)
• Easter Eggs - Hidden features and secret interactions:
  • Konami Code activation
  • Avatar click counter
  • "ZANE" keyboard sequence
  • Double-click brand name glitch
• Micro-interactions - Magnetic button effects, tilt animations, ripple effects
• Responsive Design - Optimized for all screen sizes

Technical Features

• Fully Static - Compatible with cheap hosting platforms (no backend required)
• Modular Architecture - Well-organized code split into logical modules
• Performance Optimized - Minified assets and efficient animations
• SEO Enhanced - Proper meta tags, structured data, sitemap
• Accessible - Semantic HTML, ARIA labels, keyboard navigation
• Open Source - MIT licensed for learning and inspiration

🛠 Tech Stack

Core Technologies

• HTML5 - Semantic markup with proper accessibility attributes
• CSS3 - Modern features including custom properties, animations, and grid
• JavaScript (ES6+) - Modular architecture using ES modules

Development Tools

• Vite - Fast build tool and development server
• ESLint - Code quality and consistency checking
• Prettier - Automated code formatting
• Imagemin - Image optimization

Libraries & APIs

• Web Audio API - For sound effect generation
• Canvas API - For particle effects and visual animations
• Intersection Observer API - For scroll-based animations

📁 Project Structure

ZanePersonal/
├── assets/
│   ├── css/
│   │   └── styles.css           # Main stylesheet with design tokens
│   ├── js/
│   │   ├── main.js              # Application entry point
│   │   └── modules/
│   │       ├── animations.js    # Animation utilities
│   │       ├── dom.js           # DOM manipulation helpers
│   │       ├── easter-eggs.js   # Hidden features
│   │       ├── effects.js       # Visual effects (particles, cursor, etc.)
│   │       ├── interactions.js  # UI micro-interactions
│   │       └── sound.js         # Sound effects
│   └── images/
│       └── Zane.jpg             # Profile image
├── index.html                   # Main HTML file
├── robots.txt                   # Search engine directives
├── sitemap.xml                  # Site structure for SEO
├── LICENSE                      # MIT License
├── package.json                 # Project dependencies
├── .eslintrc.json              # ESLint configuration
├── .prettierrc.json            # Prettier configuration
└── README.md                    # This file

🚀 Getting Started

Prerequisites

• Node.js 16+ and npm

Installation

1. Clone the repository:

git clone https://github.com/ZaneThePython/ZanePersonal.git
cd ZanePersonal

2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Open your browser to http://localhost:5173

Building for Production

npm run build

The optimized files will be in the dist/ directory.

🧪 Development

Code Quality

• Linting: npm run lint
• Formatting: npm run format
• Format Check: npm run format:check

Performance Budget

Target metrics:

• Total page size: <150KB (compressed)
• First Contentful Paint: <1.5s
• Time to Interactive: <3.5s
• Lighthouse Score: >90

🗺 Roadmap

✅ Completed

• Initial website launch
• Interactive visual effects
• Easter eggs and hidden features
• Responsive design
• Code modularization
• ESLint and Prettier setup
• Accessibility improvements (ARIA labels, semantic HTML)
• SEO optimization (meta tags, structured data, sitemap)
• CSS design tokens
• Build system (Vite)

🚧 In Progress

• CI/CD pipeline with GitHub Actions
• Unit tests with Vitest
• Lighthouse CI integration
• Automated accessibility checks

📋 Planned

• Blog section for writing
• Project portfolio with detailed case studies
• Dark/light theme toggle
• Privacy-focused analytics
• Automated changelog generation
• Performance monitoring dashboard
• Progressive Web App (PWA) features
• Internationalization (i18n) support

🤝 Contributing

While this is a personal project, suggestions and feedback are welcome! Feel free to:

• Open an issue for bugs or feature requests
• Submit a pull request for improvements
• Star the repository if you find it interesting

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Font: Inter by Rasmus Andersson
• Inspiration from various creative developer portfolios
• Built with ☕ and countless hours of experimentation

📬 Contact

• Email: contact@zane.org
• GitHub: @ZaneThePython
• Website: https://zane.org

---

Note: This website is not FDA approved (because websites don't need FDA approval, obviously! 😄)

Last updated: November 2024