{% extends "base.html" %}

{% block title %}Nico Sicat - Portfolio{% endblock %}

{% block content %}
<section class="hero">
    <div class="hero-content">
        <h1>HELLO!</h1>
        <h2>I AM NICO SICAT.</h2>
        <p>A TECH-DRIVEN PROBLEM SOLVER READY TO INNOVATE. OPEN FOR HIRE.</p>
    </div>
    <div class="scroll-indicator">
        <i class="fas fa-chevron-down"></i>
    </div>
</section>

<section id="about" class="section-container">
    <div class="section-header">
        <h2>About Me</h2>
        <div class="section-line"></div>
    </div>
    <div class="about-content">
        <div class="about-image">
            <img src="{{ url_for('static', filename='images/IMG_7117.jpg') }}" alt="Nico Sicat with the Oregon Duck mascot" class="profile-image">
        </div>
        <div class="about-text">
            <p class="about-intro">I am a junior studying Computer Science at the University of Oregon with a concentration in cybersecurity and networking.</p>
            
            <div class="experience-section">
                <h3>Experience</h3>
                <div class="experience-list">
                    <div class="experience-item">
                        <h4>Security Systems Specialist</h4>
                        <p class="experience-meta">University of Oregon Housing IT, Eugene, OR | June 2023 - Present</p>
                        <ul class="experience-details">
                            <li>Manage and troubleshoot access control systems (AMAG Symmetry, LenelS2, Onguard) for 300 staff and 4,200 students</li>
                            <li>Perform system integrity checks, firmware updates, and network management to ensure smooth operations of ID cards and wireless locks</li>
                            <li>Deliver customer support, resolving access issues with a 90% first-contact resolution rate</li>
                        </ul>
                    </div>

                    <div class="experience-item">
                        <h4>Accessible Technology Assistant</h4>
                        <p class="experience-meta">UO Accessibility Education Center, Eugene, OR | September 2023 - Present</p>
                        <ul class="experience-details">
                            <li>Convert academic content into accessible formats using specialized software and ensure compliance with ADA and WCAG standards</li>
                            <li>Collaborate with faculty to modify course materials, improving accessibility for students with disabilities in various academic fields</li>
                        </ul>
                    </div>

                    <div class="experience-item">
                        <h4>Educational Assistant</h4>
                        <p class="experience-meta">UO Accessibility Education Center, Eugene, OR | September 2023 - June 2024</p>
                        <ul class="experience-details">
                            <li>Provide one-on-one assistance to a student with physical disabilities, adapting classroom environments and materials for computer science courses</li>
                            <li>Utilize assistive technologies to ensure equal access to course content</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="projects" class="section-container">
    <div class="section-header">
        <h2>Projects</h2>
        <div class="section-line"></div>
    </div>
    <div class="projects-list">
        <div class="project-card">
            <div class="project-info">
                <h3>Global Infection Simulator</h3>
                <div class="project-description">
                    <p class="project-highlight">Built for the Winter 2025 University of Oregon Hackathon (QuackHacks)</p>
                    <p>An interactive visualization tool that simulates global infection spread, incorporating real-world data and complex modeling systems.</p>
                    <div class="project-details">
                        <h4>Key Features:</h4>
                        <ul>
                            <li>Interactive world map with real-time visualization of infection spread</li>
                            <li>Advanced modeling using Human Development Index (HDI) and geographic data</li>
                            <li>Comprehensive data analytics integration for accurate disease spread patterns</li>
                            <li>Custom-designed UI for intuitive simulation control and monitoring</li>
                        </ul>
                        <h4>Technical Implementation:</h4>
                        <ul>
                            <li>Built with Python, utilizing tkinter for GUI development</li>
                            <li>Implemented data analytics pipeline for processing country-specific metrics</li>
                            <li>Developed probabilistic modeling system for infection spread simulation</li>
                            <li>Integrated real-time visualization using PIL and numpy</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="project-card">
            <div class="project-info">
                <h3>Brevet Time Calculator</h3>
                <div class="project-description">
                    <p>A full-stack web application that streamlines control time calculations for long-distance cycling events.</p>
                    <div class="project-details">
                        <h4>Key Features:</h4>
                        <ul>
                            <li>Intuitive interface for calculating various control times</li>
                            <li>Robust back-end logic using Flask and MongoDB</li>
                            <li>Containerized deployment with Docker for scalability</li>
                            <li>RESTful API design for seamless data handling</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="project-card">
            <div class="project-info">
                <h3>HCOO.net Website Management</h3>
                <div class="project-description">
                    <p>Lead the digital presence strategy and implementation for HCOO through comprehensive website management.</p>
                    <div class="project-details">
                        <h4>Responsibilities:</h4>
                        <ul>
                            <li>Strategic content planning and implementation</li>
                            <li>Custom page layout design and development</li>
                            <li>Digital asset management and optimization</li>
                            <li>User experience enhancement and performance optimization</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="project-card">
            <div class="project-info">
                <h3>Personal Portfolio Website</h3>
                <div class="project-description">
                    <p>A custom-designed portfolio website showcasing my work and skills.</p>
                    <div class="project-details">
                        <h4>Technical Stack:</h4>
                        <ul>
                            <li>Built with Flask, HTML5, CSS3, and JavaScript</li>
                            <li>Responsive design for optimal viewing across all devices</li>
                            <li>Modern UI/UX principles for enhanced user engagement</li>
                            <li>Secure contact form with email integration</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="section-container">
    <div class="section-header">
        <h2>Say Hi!</h2>
        <div class="section-line"></div>
    </div>
    <div class="contact-container">
        <div class="contact-info">
            <div class="social-links-large">
                <a href="https://github.com/nsicat" target="_blank" class="social-icon">
                    <i class="fab fa-github"></i>
                    <span>GitHub</span>
                </a>
                <a href="https://www.linkedin.com/in/nicosicat" target="_blank" class="social-icon">
                    <i class="fab fa-linkedin"></i>
                    <span>LinkedIn</span>
                </a>
            </div>
        </div>
        <form class="contact-form" action="{{ url_for('contact') }}" method="POST">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit" class="submit-btn">Send Message</button>
        </form>
    </div>
</section>

<div class="development-notice">
    <p>🚧 This website is currently under development. Please stay tuned for more updates! 🚧</p>
</div>
{% endblock %}