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