<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>F1r3 Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>

<header>
    <div class="nav-container">
        <nav>
            <div class="logo">F1R3 PORTFOLIO</div>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#progetti">Progetti</a></li>
                <li><a href="#competenze">Skill</a></li>
                <li><a href="#recensioni">Recensioni</a></li>
                <li><a href="#contatti">Contattami</a></li>
                <li><a href="#statistics">Risultati</a></li>
            </ul>
        </nav>
    </div>
</header>

    <section id="home" class="hero fade-in-section">
        <div class="hero-content">
            <h1>Trasformando i tuoi sogni in realtà!</h1>
            <p>Ciao! Sono F1r3, Developer e Texture Pack Maker</p>
            <a href="#progetti" class="cta-button">I miei Lavori</a>
        </div>
    </section>

    <section id="progetti" class="progetti fade-in-section">
        <div class="section-title">
            <span class="subtitle">Portfolio</span>
            <h2>I Miei Progetti</h2>
            <div class="title-decoration"></div>
        </div>
        
        <div class="progetti-container">
            <div class="progetto-card">
                <span class="progetto-type">Script Development</span>
                <div class="progetto-image">
                    <img src="path/to/qbcore.png" alt="Nome Progetto">
                </div>
                <div class="progetto-content">
                    <h3>FiveM Anticheat</h3>
                    <p>Anche se non gioco a FiveM mi sono messo alla prova per realizzare questo innovativo script</p>
                    <div class="progetto-tech">
                        <span class="tech-tag">Lua</span>
                        <span class="tech-tag">QB-CORE</span>
                    </div>
                </div>
                <div class="progetto-links">
                    <a href="https://github.com/F1r3eee/qb-anticheat.git" class="progetto-btn code">
                        <i class='bx bx-code-alt'></i>
                        Codice
                    </a>
                </div>
            </div>
            <div class="progetto-card">
                <span class="progetto-type">Server/Bot Development</span>
                <div class="progetto-image">
                    <img src="path/to/tiago.png" alt="Nome Secondo Progetto">
                </div>
                <div class="progetto-content">
                    <h3>Tiago Replicass</h3>
                    <p>Creazione di bot custom e migliorie lato estetica al server discord</p>
                    <div class="progetto-tech">
                        <span class="tech-tag">Discord</span>
                        <span class="tech-tag">Node.js</span>
                    </div>
                </div>
                <div class="progetto-links">
                    <a href="https://discord.gg/hS5tXdVEXX" class="progetto-btn demo">
                        <i class='bx bx-link-external'></i>
                        Discord
                    </a>
                </div>
            </div>

            <!-- Terza card progetto -->
            <div class="progetto-card">
                <span class="progetto-type">Site Development</span>
                <div class="progetto-image">
                    <img src="path/to/site.PNG" alt="Nome Terzo Progetto">
                </div>
                <div class="progetto-content">
                    <h3>Tiago Replicass Site</h3>
                    <p>Sito realizzato per il server discord di tiago replicass, con un design molto semplice ma bello.</p>
                    <div class="progetto-tech">
                        <span class="tech-tag">HTML</span>
                        <span class="tech-tag">CSS</span>
                        <span class="tech-tag">JavaScript</span>
                    </div>
                </div>
                <div class="progetto-links">
                    <a href="https://tiagoxfinds.vercel.app/" class="progetto-btn demo">
                        <i class='bx bx-link-external'></i>
                        Sito Live
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section id="competenze" class="competenze fade-in-section">
        <div class="section-title">
            <span class="subtitle">Skills</span>
            <h2>Le Mie Competenze</h2>
            <div class="title-decoration"></div>
        </div>

        <div class="skills-container">
            <div class="skills-category">
                <h3>Linguaggi di Programmazione</h3>
                <div class="skills-grid">
                    <div class="skill-item">
                        <div class="skill-icon">
                            <i class='bx bxl-html5'></i>
                        </div>
                        <div class="skill-info">
                            <h4>HTML5</h4>
                            <div class="skill-level">
                                <div class="skill-progress" style="width: 95%"></div>
                            </div>
                        </div>
                    </div>

                    <div class="skill-item">
                        <div class="skill-icon">
                            <i class='bx bxl-css3'></i>
                        </div>
                        <div class="skill-info">
                            <h4>CSS3</h4>
                            <div class="skill-level">
                                <div class="skill-progress" style="width: 90%"></div>
                            </div>
                        </div>
                    </div>

                    <div class="skill-item">
                        <div class="skill-icon">
                            <i class='bx bxl-javascript'></i>
                        </div>
                        <div class="skill-info">
                            <h4>JavaScript</h4>
                            <div class="skill-level">
                                <div class="skill-progress" style="width: 85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="skills-category">
                <h3>Framework & Tools</h3>
                <div class="skills-grid">
                    <div class="skill-item">
                        <div class="skill-icon">
                            <i class='bx bxl-react'></i>
                        </div>
                        <div class="skill-info">
                            <h4>React</h4>
                            <div class="skill-level">
                                <div class="skill-progress" style="width: 85%"></div>
                            </div>
                        </div>
                    </div>

                    <div class="skill-item">
                        <div class="skill-icon">
                            <i class='bx bxl-nodejs'></i>
                        </div>
                        <div class="skill-info">
                            <h4>Node.js</h4>
                            <div class="skill-level">
                                <div class="skill-progress" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>

                    <div class="skill-item">
                        <div class="skill-icon">
                            <i class='bx bxl-git'></i>
                        </div>
                        <div class="skill-info">
                            <h4>Git</h4>
                            <div class="skill-level">
                                <div class="skill-progress" style="width: 90%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="skills-category">
                <h3>Design & Creative</h3>
                <div class="skills-grid">
                    <div class="skill-item">
                        <div class="skill-icon">
                            <i class='bx bx-paint'></i>
                        </div>
                        <div class="skill-info">
                            <h4>Texture Pack Making</h4>
                            <div class="skill-level">
                                <div class="skill-progress" style="width: 95%"></div>
                            </div>
                        </div>
                    </div>

                    <div class="skill-item">
                        <div class="skill-icon">
                            <i class='bx bx-palette'></i>
                        </div>
                        <div class="skill-info">
                            <h4>UI/UX Design</h4>
                            <div class="skill-level">
                                <div class="skill-progress" style="width: 85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="recensioni" class="recensioni fade-in-section">
        <div class="section-title">
            <span class="subtitle">Feedback</span>
            <h2>Le opinioni dei clienti</h2>
            <div class="title-decoration"></div>
        </div>
        <div class="recensioni-slider">
            <div class="recensioni-track">
                <div class="recensione">
                    <div class="recensione-content">
                        <div class="stars">
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                        </div>
                        <p>??</p>
                        <p>??</p>
                        <div class="cliente">- ??</div>
                    </div>
                </div>
                <div class="recensione">
                    <div class="recensione-content">
                        <div class="stars">
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                        </div>
                        <p>Professionale, creativo e puntuale. Consigliatissimo.  Se cerchi un developer, non perdere questa occasione!.</p>
                    </p>Ogni prodotto che realizza è perfetto</p>
                        <div class="cliente">- StarMC</div>
                    </div>
                </div>
                <div class="recensione">
                    <div class="recensione-content">
                        <div class="stars">
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                        </div>
                        <p>"??"</p>
                        <p>??</p>
                        <div class="cliente">- ??</div>
                    </div>
                </div>
                <div class="recensione">
                    <div class="recensione-content">
                        <div class="stars">
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                            <i class='bx bxs-star'></i>
                        </div>
                        <p>"??"</p>
                        <p>??</p>
                        <div class="cliente">- ??</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="contatti" class="contatti fade-in-section">
        <div class="section-title">
            <span class="subtitle">Contattami</span>
            <h2>Iniziamo a lavorare insieme</h2>
            <div class="title-decoration"></div>
        </div>
        
        <div class="contatti-wrapper">
            <div class="contatti-card">
                <div class="contatti-info">
                    <div class="info-header">
                        <h3>Informazioni di contatto</h3>
                        <p>Scegli il modo migliore per raggiungermi</p>
                    </div>
                    
                    <div class="contact-info-container">
                        <div class="contact-info-box">
                            <i class='bx bx-envelope'></i>
                            <h4>Email</h4>
                            <p>supporto@f1r3ee.it</p>
                        </div>
                        
                        <div class="contact-info-box">
                            <i class='bx bx-map'></i>
                            <h4>Location</h4>
                            <p>Italy</p>
                        </div>
                    </div>

                    <div class="social-links">
                        <a href="#" class="social-link" aria-label="GitHub">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="social-link" aria-label="Discord">
                            <i class="fab fa-discord"></i>
                        </a>
                        <a href="#" class="social-link" aria-label="Instagram">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>

                <form id="contact-form" class="contact-form" action="https://formspree.io/f/xvgzodgn" method="POST">
                    <div class="form-group">
                        <h3>Inviami un messaggio</h3>
                        <p>Raccontami del tuo progetto</p>
                    </div>
                    
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-user"></i>
                            <input type="text" placeholder="Nome completo" name="name" required>
                        </div>
                        <div class="input-wrapper">
                            <i class="fas fa-envelope"></i>
                            <input type="email" placeholder="Email" name="email" required>
                        </div>
                    </div>
                    
                    <div class="input-wrapper">
                        <i class="fas fa-message"></i>
                        <textarea placeholder="Il tuo messaggio" name="message" required></textarea>
                    </div>
                    
                    <button type="submit" name="submit" class="submit-btn">
                        <span>Invia Messaggio</span>
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </div>
    </section>
    <section class="statistics fade-in-section">
        <div class="section-title">
            <span class="subtitle">Numeri</span>
            <h2>I Miei Risultati</h2>
            <div class="title-decoration"></div>
        </div>
        
        <div class="stats-container">
            <div class="stat-item">
                <div class="stat-icon">
                    <i class="fas fa-code-branch"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-number" data-target="150">6</div>
                    <div class="stat-plus">+</div>
                    <p>Progetti Completati</p>
                </div>
                <div class="stat-bg"></div>
            </div>
            <div class="stat-item">
                <div class="stat-icon">
                    <i class="fas fa-smile-beam"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-number" data-target="80">6</div>
                    <div class="stat-plus">+</div>
                    <p>Clienti Soddisfatti</p>
                </div>
                <div class="stat-bg"></div>
            </div>
            
            <div class="stat-item">
                <div class="stat-icon">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-number" data-target="5">4</div>
                    <div class="stat-plus">+</div>
                    <p>Anni di Esperienza</p>
                </div>
                <div class="stat-bg"></div>
            </div>
            
            <div class="stat-item">
                <div class="stat-icon">
                    <i class="fas fa-star"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-number" data-target="100">99</div>
                    <div class="stat-percent">%</div>
                    <p>Tasso di Successo</p>
                </div>
                <div class="stat-bg"></div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-container">
            <div class="footer-section">
                <h3>F1R3 Portfolio</h3>
                <p>Sviluppatore web e creatore di texture pack, specializzato in soluzioni creative e design innovativo.</p>
            </div>
            <div class="footer-section">
                <h3>Link Utili</h3>
                <div class="footer-links">
                    <a href="index.html#home"><i class='bx bx-home'></i>Home</a>
                    <a href="index.html#progetti"><i class='bx bx-code-alt'></i>Progetti</a>
                    <a href="index.html#recensioni"><i class='bx bx-star'></i>Recensioni</a>
                    <a href="index.html#contatti"><i class='bx bx-envelope'></i>Contatti</a>
                </div>
            </div>
            <div class="footer-section">
                <h3>Social</h3>
                <div class="footer-social">
                    <a href="https://github.com/F1r3eee" class="social-icon"><i class='bx bxl-github'></i></a>
                    <a href="https://discord.gg/hS5tXdVEXX" class="social-icon"><i class='bx bxl-discord-alt'></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="copyright">
                <p>&copy; 2024 F1R3. Tutti i diritti riservati.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>
