Merge branch 'main' of https://github.com/G-code7/G-code7.github.io

Author: G-code7

README.md

@@ -0,0 +1,261 @@
+# 🚀 Gustavo Liendo - Full Stack Developer Portfolio
+
+[![Portfolio](https://img.shields.io/badge/Portfolio-Live-blue?style=for-the-badge)](https://g-code7.github.io)
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-0077B5?style=for-the-badge&logo=linkedin)](https://www.linkedin.com/in/gustavo-liendo-b5b668111/)
+[![GitHub](https://img.shields.io/badge/GitHub-Follow-181717?style=for-the-badge&logo=github)](https://github.com/G-code7)
+
+> A modern, responsive, and emotionally engaging portfolio website showcasing 5+ years of full-stack development expertise.
+
+![Portfolio Preview](https://via.placeholder.com/1200x600/0a0e27/3b82f6?text=Portfolio+Preview)
+
+## ✨ Features
+
+### 🎨 **Visual Excellence**
+- **Modern Dark Theme** with vibrant color accents (Blue, Purple, Pink)
+- **Smooth Animations** powered by Anime.js and AOS
+- **Custom Cursor** with interactive hover effects
+- **3D Card Effects** with tilt interactions
+- **Gradient Meshes** for stunning background visuals
+- **Loading Screen** with progress bar animation
+
+### 📱 **Responsive Design**
+- Fully responsive across all devices (Desktop, Tablet, Mobile)
+- Mobile-first approach
+- Optimized for performance and accessibility
+- Cross-browser compatible
+
+### 🎯 **Interactive Elements**
+- **Scroll Progress Bar** showing page navigation
+- **Parallax Effects** on hero section
+- **Smooth Scrolling** navigation
+- **Counter Animations** for statistics
+- **Hover Effects** on cards and buttons
+- **Mobile Navigation Menu** with toggle
+
+### 📝 **Sections**
+
+1. **Hero Section**
+   - Eye-catching introduction with animated text
+   - Live statistics (Years of Experience, Projects, Client Satisfaction)
+   - Code window simulation showing React component
+   - Dual CTA buttons (View Work & Contact)
+
+2. **Story Section**
+   - Timeline-based journey narrative
+   - Personal philosophy cards
+   - Inspirational quotes
+   - Achievement badges
+
+3. **Expertise Section**
+   - 4 main skill categories with visual cards:
+     - Front-End & Design
+     - Back-End & Databases
+     - DevOps & Cloud
+     - CMS & E-commerce
+   - Technology tags with hover effects
+   - Skill meters with animated progress bars
+   - Fun statistics (Lines of Code, Coffee Cups, etc.)
+
+4. **Work Section**
+   - Featured project showcase (SaaS Architecture)
+   - Client project grid:
+     - 4Geeks Academy
+     - Avanti Store
+     - Carbon Activated
+     - Cree Studio
+     - Panatoner
+   - Project cards with overlay effects
+   - Technology badges
+   - Direct links to live sites and GitHub repos
+
+5. **Contact Section**
+   - Functional contact form (Formspree integration ready)
+   - Contact information cards (Email, LinkedIn, GitHub)
+   - Form validation
+   - Success message animation
+   - Alternative: Email fallback (mailto)
+
+6. **Footer**
+   - Brand identity
+   - Social media links
+   - Quick navigation
+   - Site statistics including visitor counter
+
+### 🛠️ **Technical Features**
+- **Visitor Counter** using localStorage
+- **Form Handling** with Formspree (easy setup)
+- **Lazy Loading** for optimized performance
+- **Debounced Scroll Events** for better performance
+- **Intersection Observer API** for scroll animations
+- **Custom CSS Variables** for easy theming
+- **No jQuery** - Pure vanilla JavaScript
+- **Easter Egg** - Konami Code surprise! 🎮
+
+## 🚀 Quick Start
+
+### Prerequisites
+- A modern web browser
+- A code editor (VS Code recommended)
+- Git installed on your machine
+- (Optional) Node.js for local server
+
+### Installation
+
+1. **Clone the repository**
+```bash
+git clone https://github.com/G-code7/g-code7.github.io.git
+cd g-code7.github.io
+```
+
+2. **Open with Live Server**
+```bash
+# If you have VS Code with Live Server extension
+# Right-click on index.html and select "Open with Live Server"
+
+# Or use Python's built-in server
+python -m http.server 8000
+
+# Or use Node.js http-server
+npx http-server
+```
+
+3. **Visit in browser**
+```
+http://localhost:8000
+```
+
+## 📂 File Structure
+
+```
+portfolio/
+│
+├── index.html          # Main HTML file
+├── styles.css          # All CSS styles and animations
+├── script.js           # JavaScript functionality
+├── README.md          # This file
+│
+└── assets/            # Images and media
+    ├── logo.png
+    ├── projects/
+    └── icons/
+```
+
+## 🌐 Deployment
+
+### GitHub Pages
+
+1. **Push to GitHub**
+```bash
+git add .
+git commit -m "Initial portfolio commit"
+git push origin main
+```
+
+2. **Enable GitHub Pages**
+   - Go to repository Settings
+   - Navigate to Pages section
+   - Select `main` branch
+   - Click Save
+
+3. **Visit your site**
+   - `https://yourusername.github.io`
+
+### Alternative Deployment Options
+
+- **Netlify**: Drag and drop your folder
+- **Vercel**: Connect your GitHub repo
+- **Render**: Deploy static site from GitHub
+
+## 🎯 Performance Optimization
+
+- ✅ Minified CSS and JS (optional)
+- ✅ Lazy loading images
+- ✅ Debounced scroll events
+- ✅ Optimized animations
+- ✅ Reduced DOM manipulation
+- ✅ Efficient CSS selectors
+
+## 🔧 Troubleshooting
+
+### Animations not working
+- Check browser console for errors
+- Ensure Anime.js and AOS libraries are loaded
+- Verify internet connection (CDN dependencies)
+
+### Form not submitting
+- Check Formspree form ID is correct
+- Look for errors in browser console
+- Verify email fallback is configured properly
+
+### Mobile menu not working
+- Clear browser cache
+- Check JavaScript is enabled
+- Verify no console errors
+
+## 📱 Browser Support
+
+- ✅ Chrome (latest)
+- ✅ Firefox (latest)
+- ✅ Safari (latest)
+- ✅ Edge (latest)
+- ⚠️ IE11 (limited support)
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome!
+
+1. Fork the repository
+2. Create your 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 **MIT** licensed - feel free to use it for your own portfolio!
+
+## 🙏 Acknowledgments
+
+- Design inspiration from modern web trends
+- Animations powered by [Anime.js](https://animejs.com/)
+- Scroll animations by [AOS](https://michalsnik.github.io/aos/)
+- Icons from [Font Awesome](https://fontawesome.com/)
+- Fonts from [Google Fonts](https://fonts.google.com/)
+
+## 📊 GitHub Stats
+
+![GitHub Stats](https://github-readme-stats.vercel.app/api?username=G-code7&show_icons=true&theme=radical)
+
+## 💼 About Me
+
+I am a **Results-Driven Full Stack Web Developer** with a solid **5+ year track record** in creating high-performance, scalable web applications. My professional focus is on delivering end-to-end technical solutions by leveraging:
+
+- 🎨 Modern front-end frameworks (React.js, Next.js)
+- 🔧 Robust back-end architecture (Python, Django, Flask)
+- ☁️ DevOps practices (Docker, Kubernetes, AWS)
+- 🎯 Strong UI/UX design integration
+
+### 🔗 Connect With Me
+
+- **Portfolio**: [g-code7.github.io](https://g-code7.github.io)
+- **LinkedIn**: [Gustavo Liendo](https://www.linkedin.com/in/gustavo-liendo-b5b668111/)
+- **GitHub**: [@G-code7](https://github.com/G-code7)
+
+## 🎮 Easter Eggs
+
+Try entering the Konami Code on the website:
+```
+↑ ↑ ↓ ↓ ← → ← → B A
+```
+
+---
+
+<div align="center">
+
+**Made with ❤️ and lots of ☕ by Gustavo Liendo**
+
+*"Always learning. Always growing. Never stopping."*
+
+⭐ Star this repo if you like it!
+
+</div>