🌟 Personal Portfolio Website

A fully interactive portfolio website showcasing my coding journey, projects, and skills as a young developer.

📖 About

This is my personal portfolio website where I share my passion for coding and technology. Built from scratch using vanilla HTML, CSS, and JavaScript, the site features interactive coding environments, engaging games, and a showcase of my projects. It demonstrates my skills in web development, Python programming, and creating user-friendly interfaces. Perfect for anyone interested in seeing what a young developer can create!

✨ Features

• 🎮 Interactive Games

  • Block Breaker with mobile-optimized touch controls
  • Memory Card Game with scoring system
  • Plane Shooter, Math Challenge, and more

• 💻 Live Coding Environments

  • Python Playground with enhanced interpreter supporting imports, input(), and conditionals
  • HTML Live Preview with real-time rendering
  • JavaScript Console with instant code execution

• 📱 Fully Responsive Design

  • Mobile-friendly navigation
  • Touch-optimized game controls
  • Adaptive layouts for all screen sizes

• 🚀 Projects Showcase

  • Interactive Profile Website (this site!)
  • Study Buddy AI Assistant (Streamlit + Groq API)
  • Beautiful project cards with tech stack badges

• 🎥 Curated Video Gallery

  • Minecraft tutorials
  • Coding lessons
  • Math and geometry explorations

• 🎯 Personal Journey

  • About me section
  • Coding timeline
  • Goals and aspirations

🛠️ Technologies Used

Frontend

• HTML5 - Semantic markup and structure
• CSS3 - Modern styling with gradients, animations, and flexbox/grid layouts
• JavaScript (ES6+) - Interactive features and game logic

Features & Libraries

• Custom Python Interpreter - Simulates Python execution in the browser
• Real-time HTML Preview - Live rendering using Blob URLs
• Touch Events API - Mobile-friendly controls
• LocalStorage API - Potential for saving game progress

Development Tools

• Git - Version control
• GitHub Pages - Hosting and deployment
• Visual Studio Code - Development environment

🚀 How to Run Locally

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, or Edge)
• Git installed on your computer

Installation Steps

1. Clone the repository

   git clone https://github.com/CodeCubCA/profile-website-Ethan-CodeCub.git
   cd profile-website-Ethan-CodeCub

2. Open the website

   Simply open the index.html file in your web browser:

   • Option 1: Double-click index.html
   • Option 2: Right-click index.html → Open with → Your Browser
   • Option 3: Use a local server (recommended for best experience)

     # If you have Python installed:
     python -m http.server 8000
     
     # Then open: http://localhost:8000

3. Explore!

   Navigate through the sections using the menu:

   • 🏠 Home - Welcome and introduction
   • 👋 About - Learn about me
   • 🚀 Journey - My coding timeline
   • 🎮 Games - Play interactive games
   • 💻 Code - Try the coding environments
   • 💻 Projects - See my projects
   • 🎥 Videos - Watch curated content

🌐 Live Demo

Visit the live website: https://ethan.codecub.org

Try out the interactive features:

• Play Block Breaker on your phone with touch controls
• Write Python code and see it execute in real-time
• Create HTML pages with live preview
• Challenge yourself with the Memory Game

📸 Screenshots

Note: Add screenshots to showcase your website!

Recommended screenshots to include:

• Homepage/Hero section
• Projects showcase
• Interactive coding environment
• Mobile game controls
• Video gallery

To add screenshots:

1. Create a screenshots/ folder
2. Add your images (PNG or JPG format)
3. Update this README with image links:

   ![Homepage](screenshots/homepage.png)
   ![Projects](screenshots/projects.png)
   ![Games](screenshots/games.png)

👨‍💻 Author

Ethan

• 🎂 Age: 9 years old
• 🏫 School: AME
• 💡 Goal: To be an engineer and create amazing things!

🔗 Connect With Me

• 🌐 Website: ethan.codecub.org
• 💻 GitHub: @CodeCubCA
• 🚀 Projects:
  • AI Chatbox - Study Buddy AI Assistant
  • Profile Website - This website!

📝 Project Highlights

Enhanced Python Interpreter

The custom Python interpreter can handle:

• ✅ Variable assignments (strings, numbers)
• ✅ print() statements with variables
• ✅ from random import randint
• ✅ input() function (simulated)
• ✅ if/else conditionals
• ✅ String concatenation with +
• ✅ for loops with range()

Mobile-Optimized Games

• Block Breaker: Swipe controls, touch buttons, and pause functionality
• Memory Game: Track scores, moves, and time
• Interactive Challenges: Math problems, animal rescue, ocean explorer

🤝 Contributing

While this is a personal portfolio project, I'm open to suggestions! If you have ideas for improvements:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available for educational purposes. Feel free to learn from the code, but please create your own unique portfolio!

🙏 Acknowledgments

• Thanks to CodeCub for providing a great learning environment
• Inspired by the awesome coding community
• Special thanks to everyone who supported my coding journey!

---

⭐ If you like this project, please give it a star on GitHub! ⭐

Made with ❤️ by Ethan

🚀 Keep coding and building amazing things! 💻