<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vlad.dev | Portfolio</title>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="Vlad-logo.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
</head>
<body>
    <div class="loader-wrapper">
        <div class="loader">
            <img src="Vlad-logo-removebg.png" alt="">
            <div class="loader-bar"></div>
        </div>
    </div>

    <div class="cursor"></div>



    <!-- Navbar -->
    <nav class="navbar">
        <div class="container">
            <div class="logo">
                <div class="logo-glow"></div>
                <img src="Vlad-logo-removebg.png" alt="">
            </div>
            
            <div class="nav-links">
                <a href="#about" class="nav-link">
                    <span class="nav-link-number">02.</span>
                    <span class="nav-link-text">About</span>
                </a>
                <a href="#services" class="nav-link">
                    <span class="nav-link-number">03.</span>
                    <span class="nav-link-text">Services</span>
                </a>
                <a href="#skills" class="nav-link">
                    <span class="nav-link-number">04.</span>
                    <span class="nav-link-text">Skills</span>
                </a>
                <a href="#work" class="nav-link">
                    <span class="nav-link-number">05.</span>
                    <span class="nav-link-text">Work</span>
                </a>
                <a href="#contact" class="nav-link">
                    <span class="nav-link-number">06.</span>
                    <span class="nav-link-text">Contact</span>
                </a>
            </div>

            <button class="menu-toggle">
                <span></span>
                <span></span>
            </button>

            <button class="close-menu">
                <span class="close-icon"></span>
            </button>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <div class="hero-subtitle">
                        <div class="line"></div>
                        <span>Frontend & Backend Developer</span>
                    </div>
                    
                    <h1 class="hero-title">
                        Transforming Ideas
                        <span class="accent-text">Into Reality</span>
                        <span class="outline-text">With Code</span>
                    </h1>

                    <p class="hero-description">
                        Transforming ideas into exceptional digital experiences. 
                        Crafting clean code and innovative solutions that make an impact.
                    </p>
                    

                    <div class="cta-group">
                        <a href="#contact" class="cta-primary">
                            <span>Let's Collaborate</span>
                            <i class='bx bx-right-arrow-alt'></i>
                        </a>
                        <a href="#work" class="cta-secondary">
                            <span>My Projects</span>
                            <div class="cta-icon">
                                <i class='bx bx-folder-open'></i>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="hero-visual">
                    <div class="tech-stack">
                        <div class="tech-item" data-tech="React">
                            <i class='bx bxl-react'></i>
                        </div>
                        <div class="tech-item" data-tech="JavaScript">
                            <i class='bx bxl-javascript'></i>
                        </div>
                        <div class="tech-item" data-tech="Node.js">
                            <i class='bx bxl-nodejs'></i>
                        </div>
                        <div class="tech-item" data-tech="MongoDB">
                            <i class='bx bxl-mongodb'></i>
                        </div>
                        <div class="tech-item" data-tech="PHP">
                            <i class='bx bxl-php'></i>
                        </div>
                    </div>
                    
                    <div class="stats">
                        <div class="stat-item">
                            <span class="stat-number">10+</span>
                            <span class="stat-label">Completed Projects</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">7+</span>
                            <span class="stat-label">Satisfied Clients</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Background Elements -->
        <div class="hero-bg">
            <div class="gradient-sphere"></div>
            <div class="grid-overlay"></div>
            <div class="particles"></div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features-section">
        <div class="container">
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class='bx bx-time'></i>
                    </div>
                    <h3>Fast Delivery</h3>
                    <p>Quick project delivery while maintaining high quality and attention to detail</p>
                    <div class="feature-hover">
                        <ul>
                            <li>Optimized delivery times</li>
                            <li>Efficient workflow</li>
                            <li>Constant communication</li>
                        </ul>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class='bx bx-support'></i>
                    </div>
                    <h3>24/7 Support</h3>
                    <p>Continuous support and post-launch maintenance for every project</p>
                    <div class="feature-hover">
                        <ul>
                            <li>Technical assistance</li>
                            <li>Regular updates</li>
                            <li>Constant monitoring</li>
                        </ul>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class='bx bx-trending-up'></i>
                    </div>
                    <h3>Scalable Solutions</h3>
                    <p>Solutions that grow with your business and adapt to your needs</p>
                    <div class="feature-hover">
                        <ul>
                            <li>Flexible architecture</li>
                            <li>Optimized performance</li>
                            <li>Easy maintenance</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- About Section -->
    <section id="about" class="about">
        <div class="container">
            <div class="section-header">
                <span class="section-number">02.</span>
                <h2 class="section-title">About Me</h2>
                <p class="section-subtitle">
                    My experience and skills developed over the years
                </p>
            </div>

            <div class="about-content">
                <div class="about-text">
                    <p class="lead-text">
                        With over 5 years of experience in web development, 
                        I dedicate myself to creating digital solutions that 
                        combine innovative design with exceptional performance.
                    </p>
                    
                    <div class="experience-grid">
                        <div class="experience-card">
                            <div class="card-icon">
                                <i class='bx bx-code-block'></i>
                            </div>
                            <h3>Frontend Development</h3>
                            <p>Creating modern and responsive interfaces with React and Next.js</p>
                            <div class="card-techs">
                                <span>React</span>
                                <span>Next.js</span>
                                <span>TypeScript</span>
                            </div>
                        </div>
                        
                        <div class="experience-card">
                            <div class="card-icon">
                                <i class='bx bx-server'></i>
                            </div>
                            <h3>Backend Development</h3>
                            <p>Scalable architectures with Node.js and NoSQL databases</p>
                            <div class="card-techs">
                                <span>Node.js</span>
                                <span>MongoDB</span>
                                <span>AWS</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="services" id="services"></section>
        <div class="container">
            <div class="section-header">
                <span class="section-number">03.</span>
                <h2 class="section-title">Services</h2>
                <p class="section-subtitle">What I can do for you</p>
            </div>

            <div class="services-grid">
                <!-- Web Development Card -->
                <div class="service-card">
                    <div class="service-icon">
                        <i class='bx bx-code-block'></i>
                    </div>
                    <h3>Web Development</h3>
                    <p>Creating modern and responsive websites with the latest technologies</p>
                    <div class="service-tech">
                        <span>React.js</span>
                        <span>Next.js</span>
                        <span>TypeScript</span>
                        <span>Tailwind</span>
                    </div>
                    <div class="service-hover">
                        <ul>
                            <li>Responsive Design</li>
                            <li>Performance Optimization</li>
                            <li>Modern UI/UX</li>
                        </ul>
                    </div>
                </div>

                <!-- Bot Development Card -->
                <div class="service-card">
                    <div class="service-icon">
                        <i class='bx bx-bot'></i>
                    </div>
                    <h3>Bot Development</h3>
                    <p>Building automated solutions and chatbots for various platforms</p>
                    <div class="service-tech">
                        <span>Discord.js</span>
                        <span>Node.js</span>
                        <span>Python</span>
                        <span>API Integration</span>
                    </div>
                    <div class="service-hover">
                        <ul>
                            <li>Custom Commands</li>
                            <li>Automation Scripts</li>
                            <li>Data Processing</li>
                            <li>24/7 Hosting</li>
                        </ul>
                    </div>
                </div>

                <!-- Backend Development Card -->
                <div class="service-card">
                    <div class="service-icon">
                        <i class='bx bx-server'></i>
                    </div>
                    <h3>Backend Development</h3>
                    <p>Developing robust and scalable server-side solutions</p>
                    <div class="service-tech">
                        <span>PHP</span>
                        <span>MySQL</span>
                        <span>REST API</span>
                    </div>
                    <div class="service-hover">
                        <ul>
                            <li>Php Scripts</li>
                            <li>Databases</li>
                            <li>Authentication</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Skills Section -->
    <section id="skills" class="skills">
        <div class="container">
            <div class="section-header">
                <span class="section-number">04.</span>
                <h2 class="section-title">Skills</h2>
                <p class="section-subtitle">Technologies and tools I use daily</p>
            </div>

            <div class="skills-grid">
                <div class="skill-card">
                    <div class="skill-icon">
                        <i class='bx bxl-html5'></i>
                    </div>
                    <h3>HTML5</h3>
                    <div class="skill-level">
                        <div class="level-bar" style="width: 95%"></div>
                    </div>
                </div>

                <div class="skill-card">
                    <div class="skill-icon">
                        <i class='bx bxl-css3'></i>
                    </div>
                    <h3>CSS3</h3>
                    <div class="skill-level">
                        <div class="level-bar" style="width: 90%"></div>
                    </div>
                </div>

                <div class="skill-card">
                    <div class="skill-icon">
                        <i class='bx bxl-javascript'></i>
                    </div>
                    <h3>JavaScript</h3>
                    <div class="skill-level">
                        <div class="level-bar" style="width: 85%"></div>
                    </div>
                </div>

                <div class="skill-card">
                    <div class="skill-icon">
                        <i class='bx bxl-php'></i>
                    </div>
                    <h3>Php</h3>
                    <div class="skill-level">
                        <div class="level-bar" style="width: 20%"></div>
                    </div>
                </div>


                <div class="skill-card">
                    <div class="skill-icon">
                        <i class='bx bxl-bootstrap'></i>
                    </div>
                    <h3>Bootstrap</h3>
                    <div class="skill-level">
                        <div class="level-bar" style="width: 88%"></div>
                    </div>
                </div>

                <div class="skill-card">
                    <div class="skill-icon">
                        <i class='bx bxl-tailwind-css'></i>
                    </div>
                    <h3>Tailwind</h3>
                    <div class="skill-level">
                        <div class="level-bar" style="width: 82%"></div>
                    </div>
                </div>

                <div class="skill-card">
                    <div class="skill-icon">
                        <i class='bx bxl-python'></i>
                    </div>
                    <h3>Python</h3>
                    <div class="skill-level">
                        <div class="level-bar" style="width: 75%"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Work Section -->
    <section id="work" class="work">
        <div class="container">
            <div class="section-header">
                <span class="section-number">05.</span>
                <h2 class="section-title">Selected Work</h2>
            </div>

            <div class="projects-grid">

                
                     <!--TiagoReplicass-->
                     <article class="project-card">
                        <div class="project-header">
                            <div>
                                <h3 class="project-title">TiagoReplicass</h3>
                                <span class="project-duration">January 2025 - Current</span>
                            </div>
                        </div>
    
                        <div class="project-tags">
                            <span class="project-tag tag-html">HTML</span>
                            <span class="project-tag tag-tailwind">Tailwind</span>
                            <span class="project-tag tag-js">Javascript</span>
                        </div>
    
                        <p class="project-description">
                            TiagoReplicass is an online platform that curates and shares various product recommendations, commonly referred to as "finds." The site offers users access to a range of resources, including:

                        Registration Link for AllChinaBuy: Users can sign up through a provided link to receive €200 in discounts.

                        Telegram Channel: A channel named "Tiago X Finds" where users can stay updated with the latest product recommendations.

                        Spreadsheet of Finds: A comprehensive spreadsheet detailing various product finds.

                        Discord Community: A Discord server offering 24/7 assistance to members.

                        AllChinaBuy is a cross-border purchasing agency that assists international users in buying products from China. They provide a one-stop e-commerce service, including procurement, order fulfillment, quality inspection, international logistics, and after-sales support. The platform collaborates with over 60 international logistics providers, offering more than 200 high-quality routes to users in over 100 countries. 
                        M.ALLCHINABUY.COM

                        By registering through TiagoReplicass's link, users can benefit from significant discounts on AllChinaBuy, making it an attractive option for those looking to purchase products from China.
                        </p>
    
                        <div class="project-links">
                            <a href="https://tiagoxfinds.vercel.app" class="project-link" target="_blank">
                                <span>View Project</span>
                                <i class='bx bx-link-external'></i>
                            </a>
                          
                        </div>
                           
    
                    </article>

                
                <!--AstralHost-->
                <article class="project-card">
                    <div class="project-header">
                        <div>
                            <h3 class="project-title">AstralHost</h3>
                            <span class="project-duration">December 2024</span>
                        </div>
                    </div>

                    <div class="project-tags">
                        <span class="project-tag tag-html">HTML</span>
                        <span class="project-tag tag-tailwind">Tailwind</span>
                        <span class="project-tag tag-js">Javascript</span>
                    </div>

                    <p class="project-description">
                        AstralHost provides reliable hosting solutions, including scalable VPS, powerful dedicated servers, shared hosting, and optimized Minecraft servers. With SSD performance, DDoS protection, and user-friendly tools like Multicraft, it ensures high performance and security. Backed by 24/7 support, AstralHost is ideal for gamers, developers, and businesses seeking robust hosting services.
                    </p>

                    <div class="project-links">
                        <a href="https://astralhost.cloud" class="project-link" target="_blank">
                            <span>View Project</span>
                            <i class='bx bx-link-external'></i>
                        </a>
                      
                    </div>
                       

                </article>

                

                <!-- HollowMC Project -->
                <article class="project-card">
                    <div class="project-header">
                        <div>
                            <h3 class="project-title">HollowMC</h3>
                            <span class="project-duration">September 2024</span>
                        </div>
                    </div>

                    <div class="project-tags">
                        <span class="project-tag tag-html">HTML</span>
                        <span class="project-tag tag-css">CSS</span>
                        <span class="project-tag tag-tailwind">Tailwind</span>
                        <span class="project-tag tag-php">PHP</span>
                    </div>

                    <p class="project-description">
                        HollowMC is one of Italy's longest-running Minecraft MMORPG communities. 
                        Built with HTML, CSS, Tailwind, and PHP for optimal performance. Features 
                        include custom player profiles, server statistics, and an integrated 
                        shop system with real-time updates.
                    </p>

                   
                </article>

                <!-- Vencord Theme Project -->
                <article class="project-card">
                    <div class="project-header">
                        <div>
                            <h3 class="project-title">Vencord Theme</h3>
                            <span class="project-duration">December 2023</span>
                        </div>
                    </div>

                    <div class="project-tags">
                        <span class="project-tag tag-css">CSS</span>
                    </div>

                    <p class="project-description">
                        A custom CSS theme for Vencord client that enhances the Discord experience. 
                        Features a clean and modern design with custom animations, improved readability, 
                        and dark mode optimization. Easy to customize through CSS variables.
                    </p>

                    <div class="project-links">
                        <a download="nissantheme.theme.css" href="nissantheme.theme.css" class="project-link">
                            <span>Download Project</span>
                            <i class='bx bx-download'></i>
                        </a>
                       
                    </div>
                </article>

                <!-- HEIC Converter Project -->
                <article class="project-card">
                    <div class="project-header">
                        <div>
                            <h3 class="project-title">HEIC Converter</h3>
                            <span class="project-duration">January 2024</span>
                        </div>
                    </div>

                    <div class="project-tags">
                        <span class="project-tag tag-python">Python</span>
                    </div>

                    <p class="project-description">
                        A Python-based desktop utility that simplifies HEIC to PNG conversion. 
                        The application offers batch processing capabilities, drag-and-drop 
                        functionality, and maintains image quality throughout the conversion process.
                    </p>

                    <div class="project-links">
                        <a download="HeicToJpg Converter.exe" href="HeicToJpg Converter.exe" class="project-link" target="_blank">
                            <span>Download Project</span>
                            <i class='bx bx-download'></i>
                        </a>
                       
                    </div>
                </article>

                <!-- Image Format Hub Project -->
                <article class="project-card">
                    <div class="project-header">
                        <div>
                            <h3 class="project-title">Image Format Hub</h3>
                            <span class="project-duration">February 2023</span>
                        </div>
                    </div>

                    <div class="project-tags">
                        <span class="project-tag tag-html">Html</span>
                        <span class="project-tag tag-css">Css</span>
                        <span class="project-tag tag-js">Javascript</span>
                    </div>

                    <p class="project-description">
                        A web-based tool built with HTML, CSS, and JavaScript that converts images 
                        between different formats. Features include format preview, bulk conversion 
                        options, and a responsive interface for seamless user experience.
                    </p>

                    <div class="project-links">
                        <a href="https://vladimagedownloaderv2.netlify.app/" class="project-link">
                            <span>View Project</span>
                            <i class='bx bx-link-external'></i>
                        </a>
                      
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
        <div class="container">
            <div class="section-header">
                <span class="section-number">05.</span>
                <h2 class="section-title">Get In Touch</h2>
                <p class="section-subtitle">
                    Have a project in mind? Let's discuss and make it happen
                </p>
            </div>

            <div class="contact-content">
                <div class="contact-info">
                    <h3>Let's create something amazing together</h3>
                    <p>Available for freelance projects and full-time opportunities</p>
                    <div class="contact-methods">
                        <a href="mailto:vladimirryabko@outlook.it" class="contact-method">
                            <i class='bx bx-envelope'></i>
                            <span>vladimirryabko@outlook.it</span>
                        </a>
                        
                    </div>
                </div>
                <form class="contact-form" action="https://formspree.io/f/myzypqpq" method="post">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Your Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" placeholder="Your Email" required>
                    </div>
                    <div class="form-group">
                        <textarea placeholder="Your Message" name="message" required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">
                        Send Message
                        <i class='bx bx-send'></i>
                    </button>
                </form>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-left">
                    <div class="logo-footer">
                        <div class="logo-glow"></div>
                        <img src="Vlad-logo-removebg.png" alt="">
                    </div>
                    <p class="footer-description">
                        Crafting digital experiences that matter
                    </p>
                </div>
                
                <div class="footer-links">
                    <div class="footer-column">
                        <h3>Navigation</h3>
                        <a href="#about">About</a>
                        <a href="#services">Services</a>
                        <a href="#skills">Skills</a>
                        <a href="#work">Work</a>
                        <a href="#contact">Contact</a>
                    </div>
                    
                    <div class="footer-column">
                        <h3>Social</h3>
                        <div class="social-links">
                            <a href="https://github.com/Vl4dua" class="social-link" target="_blank">
                                <i class='bx bxl-github'></i>
                                <span>GitHub</span>
                            </a>
                            <a href="https://steamcommunity.com/profiles/76561199222854438/" class="social-link" target="_blank">
                                <i class='bx bxl-steam'></i>
                                <span>Steam</span>
                            </a>
                            <a href="https://instagram.com/vl4d_ua" class="social-link" target="_blank">
                                <i class='bx bxl-instagram'></i>
                                <span>Instagram</span>
                            </a>
                            <a href="https://discord.com/users/vl4d_ua" class="social-link" target="_blank">
                                <i class='bx bxl-discord'></i>
                                <span>Discord</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2024 Vlad.dev. All rights reserved.</p>
            </div>
        </div>
    </footer>

   

</body>
</html>
