Skip to content

README.md

Latest commit

 

History

History
261 lines (199 loc) · 7.28 KB

README.md

File metadata and controls

261 lines (199 loc) · 7.28 KB

🚀 Gustavo Liendo - Full Stack Developer Portfolio

Portfolio LinkedIn GitHub

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

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
git clone https://github.com/G-code7/g-code7.github.io.git
cd g-code7.github.io
  1. 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
  1. 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

  1. Enable GitHub Pages

    • Go to repository Settings
    • Navigate to Pages section
    • Select main branch
    • Click Save

  2. 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

📊 GitHub Stats

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

🎮 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!