🚀 Gustavo Liendo - Full Stack Developer Portfolio

A modern, responsive, and emotionally engaging portfolio website showcasing 5+ years of full-stack development expertise.

✨ 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

git clone https://github.com/G-code7/g-code7.github.io.git
cd g-code7.github.io

2. Open with Live Server

# 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

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
• Scroll animations by AOS
• Icons from Font Awesome
• Fonts from Google Fonts

📊 GitHub Stats

💼 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
• LinkedIn: Gustavo Liendo
• GitHub: @G-code7

🎮 Easter Eggs

Try entering the Konami Code on the website:

↑ ↑ ↓ ↓ ← → ← → B A

---

Made with ❤️ and lots of ☕ by Gustavo Liendo

"Always learning. Always growing. Never stopping."

⭐ Star this repo if you like it!