<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Issac Guerrero - Cloud Portfolio</title>
<style>
    :root {
        --bg: #0d1117;
        --card-bg: #161b22;
        --card-border: #30363d;
        --text-primary: #e6edf3;
        --text-secondary: #8b949e;
        --accent: #58a6ff;
        --accent-dark: #388bfd;
        --accent-glow: rgba(88, 166, 255, 0.15);
        --shadow-sm: 0 4px 12px rgba(0,0,0,0.4);
        --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
        --transition: all 0.25s ease;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        background: var(--bg);
        color: var(--text-primary);
        line-height: 1.65;
        min-height: 100vh;
    }

    header {
        position: relative;
        text-align: center;
        background: linear-gradient(135deg, #0d1117 0%, #0a192f 100%);
        padding: 140px 20px 100px;
        overflow: hidden;
        border-bottom: 1px solid var(--card-border);
    }

    header::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: radial-gradient(circle at 30% 20%, var(--accent-glow) 0%, transparent 50%);
        pointer-events: none;
    }

    .profile-pic {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        object-fit: cover;
        border: 5px solid var(--card-bg);
        box-shadow: var(--shadow-lg), 0 0 0 8px var(--accent-glow);
        margin: 0 auto 30px;
        display: block;
        transition: var(--transition);
    }

    .profile-pic:hover {
        transform: scale(1.08) translateY(-8px);
        box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 12px var(--accent-glow);
    }

    h1 {
        font-size: 3.8rem;
        font-weight: 700;
        letter-spacing: -1px;
        color: white;
        text-shadow: 0 4px 12px rgba(0,0,0,0.6);
        margin-bottom: 12px;
    }

    header p {
        font-size: 1.4rem;
        color: var(--text-secondary);
        max-width: 700px;
        margin: 0 auto;
    }

    main {
        max-width: 1100px;
        margin: -80px auto 80px;
        padding: 0 20px;
    }

    section {
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 16px;
        padding: 48px 40px;
        margin-bottom: 48px;
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(8px);
        transition: var(--transition);
    }

    section:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 60px rgba(0,0,0,0.5);
        border-color: var(--accent);
    }

    h2 {
        font-size: 2.4rem;
        font-weight: 600;
        color: var(--accent);
        margin-bottom: 32px;
        position: relative;
        display: inline-block;
        padding-bottom: 12px;
    }

    h2::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        width: 70px;
        height: 4px;
        background: linear-gradient(90deg, var(--accent), var(--accent-dark));
        border-radius: 2px;
    }

    h3 {
        font-size: 1.6rem;
        color: white;
        margin: 32px 0 16px;
    }

    ul {
        list-style: none;
        padding-left: 0;
    }

    li {
        font-size: 1.15rem;
        margin: 14px 0;
        color: var(--text-primary);
        padding-left: 24px;
        position: relative;
    }

    li::before {
        content: '• ';
        position: absolute;
        left: 0;
        color: var(--accent);
        font-weight: bold;
    }

    a {
        color: var(--accent);
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition);
    }

    a:hover {
        color: var(--accent-dark);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    form {
        margin-top: 24px;
    }

    input, textarea {
        width: 100%;
        padding: 14px 16px;
        margin: 12px 0;
        background: #0d1117;
        border: 1px solid var(--card-border);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 1.05rem;
        transition: var(--transition);
    }

    input:focus, textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
    }

    button {
        background: var(--accent);
        color: #0d1117;
        border: none;
        padding: 14px 32px;
        border-radius: 8px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
    }

    button:hover {
        background: var(--accent-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px var(--accent-glow);
    }

    @media (max-width: 768px) {
        header {
            padding: 100px 20px 70px;
        }
        .profile-pic {
            width: 160px;
            height: 160px;
        }
        h1 {
            font-size: 3rem;
        }
        section {
            padding: 32px 24px;
            margin-bottom: 40px;
        }
    }

    @media (max-width: 480px) {
        h1 {
            font-size: 2.5rem;
        }
        header p {
            font-size: 1.15rem;
        }
    }
    .project-card {
    background: #21262d;
    border-left: 5px solid var(--accent);
    padding: 25px;
    border-radius: 8px;
    margin: 25px 0;
    transition: all 0.3s ease;
}

.project-card:hover {
    border-left-color: var(--accent-dark);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
/* Sleek, Tasteful Download Resume Button - Top Right */
.resume-btn {
    position: absolute;
    top: 28px;
    right: 32px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #0d1117;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
}

.resume-btn:hover,
.resume-btn:focus {
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 12px 32px var(--accent-glow);
    color: white;
}

.resume-btn::before {
    content: '↓';
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .resume-btn {
        top: 20px;
        right: 20px;
        padding: 8px 18px;
        font-size: 0.9rem;
        gap: 6px;
    }
}
/* Professional Tech Icons Row – Below Tagline */
.tech-icons {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 28px;
    margin-bottom: 20px;
}

.tech-icons img {
    width: 38px;
    height: 38px;
    filter: brightness(0) invert(0.85);           /* Light gray for dark mode */
    transition: all 0.3s ease;
    opacity: 0.9;
}

.tech-icons img:hover {
    opacity: 1;
    transform: scale(1.25) translateY(-4px);
    filter: brightness(0) invert(1) drop-shadow(0 0 8px var(--accent-glow));
}

/* Mobile – smaller icons, less gap */
@media (max-width: 768px) {
    .tech-icons {
        gap: 18px;
        margin-top: 20px;
        margin-bottom: 16px;
    }
    .tech-icons img {
        width: 32px;
        height: 32px;
    }
}</style>

</head>
<body>
<header>
    <a href="2026Resume-IG.pdf" download class="resume-btn">Download Resume</a>
    <img src="images/profile.jpg" alt="Issac Guerrero" class="profile-pic">
    <h1>Issac Guerrero</h1>
    <p>AWS Certified Cloud Practitioner • Terraform • Docker • Fargate • EBS • San Antonio, TX</p>
    
</div>
</header>

     <section id="projects">
        <h2>Featured Project</h2>
        <div>
            <h3>Secure Scalable AWS Fargate ECS Deployment (Live 24/7)</h3>
            <p>Production-ready web app deployed on AWS Fargate using Terraform. Includes custom VPC, ECS cluster with Fargate tasks, Application Load Balancer, security groups, IAM roles, and CloudWatch logging.</p>
            <img 
    src="images/nginx.png" 
    alt="Screenshot of my live AWS Fargate ECS deployment with Nginx" 
    style="width:100%; max-width:900px; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,0.6); margin:30px 0; display:block;"
>
            <ul>
                <li><strong>Tech:</strong> AWS ECS/Fargate, Terraform, Docker</li>
                <li><strong>Outcomes:</strong> Scalable, secure deployment for real-world use.</li>
            </ul>
            <p><a href="https://github.com/issacguerrero67-web/terraform-secure-fargate-demo" target="_blank">View Full Terraform Code on GitHub</a></p>
        </div>
        <div class="project-card">
    <h3>Static Portfolio Website on AWS S3 + CloudFront (Live)</h3>
    <p>Deployed a fast, secure, static personal portfolio website directly on AWS S3 with CloudFront for global CDN delivery, HTTPS enforcement, and low-cost hosting. No servers needed — pure serverless static site.</p>
    <ul>
        <li><strong>Tech:</strong> AWS S3, CloudFront, Route 53 (DNS), ACM (free SSL)</li>
        <li><strong>Key Features:</strong> Versioning enabled, public read access, edge caching for speed, automatic HTTPS</li>
        <li><strong>Outcomes:</strong> Zero-maintenance site, fast load times worldwide, pennies per month hosting cost</li>
    </ul>
    <p>
        <a href="https://github.com/issacguerrero67-web/aws-resume-site" target="_blank">View Code on GitHub</a>
        <!-- Optional: add live demo link if you have one -->
        <!-- <a href="https://your-s3-site-domain.com" target="_blank">Live Demo</a> -->
    </p>

    <!-- Optional: add screenshot if you have one -->
    <!-- <img src="images/s3-portfolio-screenshot.png" alt="Screenshot of S3 + CloudFront portfolio site" style="width:100%; max-width:900px; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,0.6); margin:20px 0; display:block;"> -->
</div>
        <!-- Add more project cards here later -->
    </section>

    <section id="skills">
        <h2>Skills & Technologies</h2>
        <ul>
            <li>AWS (EC2, EBS, ECS, Fargate, S3, IAM, VPC, CloudWatch)</li>
            <li>Terraform (Infrastructure as Code)</li>
            <li>Docker & Containerization</li>
            <li>Linux, Git/GitHub</li>
            <li>Nginx, Troubleshooting & Support</li>
            <li>CI/CD Pipelines (GitHub Actions, Jenkins)</li>
            <li>Networking Basics (DNS, Load Balancing, Security Groups)</li>
            <li>Python (Basic scripting and automation)</li>
            <li>Solution Architecture</li>
        </ul>
    </section>

    <section id="experience">
        <h2>Experience & Certifications</h2>
        <p><strong>AWS Certified Cloud Practitioner (2025)</strong></p>
        <p><strong>AWS Certified Solutions Architect – Associate (in progress)</strong></p>
        <p><strong>AWS Administrator (FinOps & Cloud Optimization) – Ironclad Technology Services (May 2025–Present)</strong></p>
<ul>
    <li>Manage AWS infrastructure as a Windows Server Administrator with focus on FinOps, cost optimization, resource sizing, and architecture — implement cost management strategies, analyze usage patterns for savings, right-size instances/ECS tasks, and support on-call operations in a 100% remote environment.</li>
    <li>Manage and optimize AWS infrastructure for multiple clients, focusing on cost efficiency and performance.</li>
    <li>Implement FinOps best practices to monitor and control cloud spending while ensuring resource availability.</li>
    <li>Collaborate with cross-functional teams to design and deploy secure, scalable cloud solutions that meet client needs.</li>
</ul>
        <p><strong>Spectrum Solutions Architect (2025)</strong></br>
        Provide technical support for IT and cloud managed services — experience troubleshooting network issues and educating staff on tech solutions.</p>
        <p><strong>Geek Squad Agent / Technical Support – Best Buy (2020–2025)</strong><br>
        Diagnose hardware/software issues, build custom PCs, educate customers on tech solutions — strong foundation in problem-solving for cloud ops and infrastructure management.</p>
        
    </section>

    <section id="about">
    <h2>About Me</h2>
    <p>AWS Certified Cloud Practitioner and hands-on cloud builder from San Antonio, Texas. I design, deploy, and optimize scalable, secure AWS infrastructure using Terraform, Docker, and Fargate—focusing on real-world production environments that deliver reliability, performance, and cost efficiency.</p>
    <p>Currently engineering production-grade solutions as side projects, including a live 24/7 secure AWS Fargate ECS deployment (Terraform-managed custom VPC, ALB, IAM roles, CloudWatch logging) that's battle-tested for scalability and resilience. Passionate about Infrastructure as Code, automation, and turning complex challenges into efficient cloud architectures.</p>
    <p>With a strong foundation in troubleshooting high-stakes systems and a drive for continuous learning, I'm building toward advanced certifications and enterprise-level impact. Eager to bring proactive, results-driven cloud expertise to innovative teams—let's build something scalable together.</p>
</section>

    <section id="contact">
        <h2>Get in Touch</h2>
        <p>Ready to collaborate on cloud projects? Reach out!</p>
        <!-- Simple form example – replace with real service later -->
        <form action="https://formspree.io/f/mjggakjr" method="POST"> <!-- Sign up free at formspree.io for this -->
            <input type="text" name="name" placeholder="Your Name" required><br><br>
            <input type="email" name="_replyto" placeholder="Your Email" required><br><br>
            <textarea name="message" placeholder="Your Message" rows="5" required></textarea><br><br>
            <button type="submit">Send Message</button>
        </form>
    </section>
</body>
</html>