<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="
web developer Butwal, app developer Butwal, mobile app developer Butwal,
software developer Butwal, Flutter developer Butwal, React Native developer Butwal,
Android developer Butwal, iOS developer Butwal,
web developer Devdaha, app developer Devdaha, software developer Devdaha,
mobile app developer Nepal, software development Nepal, Flutter developer Nepal
">

    <title>Sameer Lamichhane - Web & App Developer in Butwal, Nepal</title>


    <link rel="icon" type="image/x-icon" href="https://i.imgur.com/jJL3YZC.jpeg">
    <meta name="google-adsense-account" content="ca-pub-8866402201533614">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8866402201533614"
     crossorigin="anonymous"></script>
</head>
<body>
    <!-- Preloader -->
    <div id="preloader" class="preloader">
        <div class="preloader__content">
            <div class="preloader__spinner"></div>
            <p class="preloader__text">Loading...</p>
        </div>
    </div>

    <!-- Sidebar Backdrop -->
    <div id="sidebar-backdrop" class="sidebar-backdrop"></div>

    <!-- Left Sidebar Navigation -->
    <nav id="sidebar" class="sidebar">
        <div class="sidebar__content">
            <!-- Profile Section -->
            <div class="profile">
                <div class="profile__image">
                    <img src="https://i.imgur.com/jJL3YZC.jpeg" alt="Sameer Lamichhane" id="profile-img">
                </div>
                <h2 class="profile__name">Sameer Lamichhane</h2>
                <p class="profile__title">Full Stack Developer</p>
                
                <!-- Social Media Icons -->
                <div class="social-links">
                    <a href="https://www.instagram.com/itssamir.py" class="social-link" aria-label="Instagram">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://discord.com/users/1419030432292409515" class="social-link" aria-label="Discord">
                        <i class="fab fa-discord"></i>
                    </a>
                    <a href="https://github.com/sameer-lamichhane" class="social-link" aria-label="GitHub">
                        <i class="fab fa-github"></i>
                    </a>
                </div>
                
                <!-- Theme Toggle -->
                <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
                    <i class="fas fa-moon"></i>
                </button>
            </div>

            <!-- Navigation Menu -->
            <ul class="nav-menu">
                <li><a href="#home" class="nav-link active" data-section="home">
                    <i class="fas fa-home"></i>
                    <span>Home</span>
                </a></li>
                <li><a href="#about" class="nav-link" data-section="about">
                    <i class="fas fa-user"></i>
                    <span>About</span>
                </a></li>
                <li><a href="#resume" class="nav-link" data-section="resume">
                    <i class="fas fa-file-alt"></i>
                    <span>Resume</span>
                </a></li>
                <li><a href="#portfolio" class="nav-link" data-section="portfolio">
                    <i class="fas fa-briefcase"></i>
                    <span>Portfolio</span>
                </a></li>
                <li><a href="#contact" class="nav-link" data-section="contact">
                    <i class="fas fa-envelope"></i>
                    <span>Contact</span>
                </a></li>
            </ul>
        </div>
    </nav>

    <!-- Mobile Menu Toggle -->
    <button id="mobile-menu-toggle" class="mobile-menu-toggle">
        <span></span>
        <span></span>
        <span></span>
    </button>

    <!-- Main Content -->
    <main id="main-content" class="main-content">
        <!-- Home Section -->
        <section id="home" class="section hero active">
            <div class="container">
                <div class="hero__content">
                    <div class="hero__text">
                        <h1 class="hero__title">
                            <span class="hero__greeting">Hello, I'm</span>
                            <span class="hero__name">Sameer Lamichhane</span>
                        </h1>
                        <p class="hero__subtitle">
                            <span class="hero__subtitle-text" id="typing-text"></span>
                        </p>
                        <div class="status-indicator">
                            <span class="status-dot"></span>
                            <span class="status-text">Active for Freelancing</span>
                        </div>
                        <p class="hero__description">
                            I create beautiful, functional, and user-centered digital experiences that solve real-world problems.
                        </p>
                        <div class="hero__buttons">
                            <a href="#portfolio" class="btn btn--primary">View My Work</a>
                            <a href="#contact" class="btn btn--secondary">Get In Touch</a>
                        </div>
                    </div>

                </div>
            </div>
        </section>

<!-- About Section -->
<section id="about" class="section">
    <div class="container">
        <div class="section__header">
            <h2 class="section__title">About Me</h2>
            <p class="section__subtitle">Get to know me better</p>
        </div>

        <div class="about__content">
            <div class="about__text">
                <p>
                    I'm a passionate full-stack developer with hands-on experience in building
                    modern web and mobile applications. I enjoy creating clean, scalable solutions
                    with a strong focus on performance and user experience.
                </p>
                <p>
                    When I'm not coding, I explore new technologies, work on side projects,
                    and continuously improve my development skills.
                </p>
            </div>

            <div class="skills">
                <h3>Skills & Technologies</h3>

                <div class="skills-grid">
                    <!-- Frontend -->
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fab fa-html5"></i></div>
                        <span>HTML5</span>
                    </div>
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fab fa-css3-alt"></i></div>
                        <span>CSS3</span>
                    </div>
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fab fa-js-square"></i></div>
                        <span>JavaScript (ES6+)</span>
                    </div>
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fab fa-react"></i></div>
                        <span>React</span>
                    </div>

                    <!-- Mobile -->
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fas fa-mobile-alt"></i></div>
                        <span>Flutter</span>
                    </div>

                    <!-- Backend -->
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fab fa-node-js"></i></div>
                        <span>Node.js</span>
                    </div>
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fab fa-python"></i></div>
                        <span>Python</span>
                    </div>

                    <!-- Databases -->
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fas fa-database"></i></div>
                        <span>MongoDB</span>
                    </div>
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fas fa-server"></i></div>
                        <span>SQL</span>
                    </div>

                    <!-- Tools -->
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fab fa-git-alt"></i></div>
                        <span>Git</span>
                    </div>
                    <div class="skill-item">
                        <div class="skill-icon"><i class="fab fa-github"></i></div>
                        <span>GitHub</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


        <!-- Resume Section -->
        <section id="resume" class="section">
            <div class="container">
                <div class="section__header">
                    <h2 class="section__title">Resume</h2>
                    <p class="section__subtitle">My professional journey</p>
                </div>
                
                        <div class="timeline-item">
                            <div class="timeline-marker"></div>
                            <div class="timeline-content">
                                <h3>+2 in Computer Science</h3>
                                <h4>Tilottama Campus</h4>
                                <span class="timeline-date">2024 - Present</span>
                                
                                <!-- Achievements and Activities -->
                                <div class="timeline-achievements">
                                    <h5>Key Achievements & Activities:</h5>
                                    <ul class="achievement-list">
                                        <li>
                                            <i class="fas fa-trophy"></i>
                                            <div class="achievement-content">
                                                <strong>1st Prize Winner</strong>
                                                <span class="achievement-description">Won the 1st HISAAN Rupandehi Hackathon 2082 representing Tilottama Campus.</span>
                                            </div>
                                        </li>

                                        <li>
                                            <i class="fas fa-mobile-alt"></i>
                                            <div class="achievement-content">
                                                <strong>Bazaarly App</strong>
                                                <span class="achievement-description">Developed a mobile marketplace app, similar to OLX, for buying and selling items locally.</span>
                                            </div>
                                        </li>
                                                                                <li>
                                            <i class="fas fa-mobile-alt"></i>
                                            <div class="achievement-content">
                                                <strong>HealthBridge</strong>
                                                <span class="achievement-description">Built a rural-focused web app with AI disease detection and instant emergency call feature.</span>
                                            </div>
                                        </li>
                                        <li>
                                            <i class="fas fa-calculator"></i>
                                            <div class="achievement-content">
                                                <strong>Mero Khata App</strong>
                                                <span class="achievement-description">Built a personal finance app to track and manage expenses efficiently.</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<!-- Portfolio Section -->
<section id="portfolio" class="section">
    <div class="container">
        <div class="section__header">
            <h2 class="section__title">Portfolio</h2>
            <p class="section__subtitle">Some of my recent work</p>
        </div>
        <div class="portfolio-filters">
            <button class="filter-btn active" data-filter="web">Web Apps</button>
        </div>
        <div class="portfolio-grid">
            <div class="portfolio-item" data-category="web" 
                 data-title="Oracle Education Portal"
                 data-description="A comprehensive full-stack educational platform designed to streamline course management and student progress tracking. Features separate admin and student panels with real-time analytics, course creation tools, and interactive learning modules."
                 data-image="https://oracleedu.sameerlamichhane.com.np/favicon.ico"
                 data-link="https://oracleedu.sameerlamichhane.com.np/"
                 data-tech="React,Node.js,MongoDB,Express.js,JWT Authentication"
                 data-features="Admin Dashboard,Student Portal,Course Management,Progress Tracking,Real-time Analytics,Responsive Design">
                <div class="portfolio-image">
                    <img src="https://oracleedu.sameerlamichhane.com.np/favicon.ico" alt="Oracle Education Portal" loading="lazy">
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3>Oracle Education Portal</h3>
                            <div class="portfolio-click-hint">
                                <i class="fas fa-mouse-pointer"></i>
                                <span>Click for full details</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item" data-category="web"
                 data-title="HealthBridge"
                 data-description="An innovative AI-powered health platform specifically designed for rural areas with limited healthcare access. Features advanced disease detection using machine learning algorithms and instant emergency call functionality to connect users with medical professionals."
                 data-image="https://healthbridge.bhuwan.xyz/favicon.ico"
                 data-link="https://healthbridge.sameerlamichhane.com.np/"
                 data-tech="AI/ML,React,Python,TensorFlow,Flask,Emergency API"
                 data-features="AI Disease Detection,Emergency Call System,Rural Healthcare Focus,Symptom Analysis,Medical Consultation,Offline Capability">
                <div class="portfolio-image">
                    <img src="https://healthbridge.bhuwan.xyz/favicon.ico" alt="HealthBridge" loading="lazy">
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3>HealthBridge</h3>
                            <div class="portfolio-click-hint">
                                <i class="fas fa-mouse-pointer"></i>
                                <span>Click for full details</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item" data-category="web"
                 data-title="RDNSTravel"
                 data-description="A modern and comprehensive travel booking platform that simplifies trip planning with advanced itinerary management, real-time booking capabilities, and responsive design optimized for all devices. Perfect for travelers seeking seamless booking experiences."
                 data-image="https://scontent.fbwa1-1.fna.fbcdn.net/v/t39.30808-1/548631683_122093515365041903_5409197823120351153_n.jpg?stp=dst-jpg_s200x200_tt6&_nc_cat=106&ccb=1-7&_nc_sid=2d3e12&_nc_ohc=m7vEcekFI3MQ7kNvwGADW6V&_nc_oc=AdnQSvizbIVknfZrvSXPd5WonYbpY4APIHoDd-MXiR655Ia5eNBOnDyDKAIfGlwHqpfUCCGXeC5ig7MsUDNP3Vgl&_nc_zt=24&_nc_ht=scontent.fbwa1-1.fna&_nc_gid=cTHOnvK6JrbnU90jVwbjnw&oh=00_AfnzRCOzjU3_Y7-vHgtGHzVULjcR5rvqwrmSL3tmQtAE_w&oe=6955AF91"
                 data-link="https://rdnstravel.sameerlamichhane.com.np/"
                 data-tech="Vue.js,Express.js,MySQL,Payment Gateway,Google Maps API"
                 data-features="Trip Planning,Real-time Booking,Itinerary Management,Payment Integration,Location Services,Mobile Responsive">
                <div class="portfolio-image">
                    <img src="https://scontent.fbwa1-1.fna.fbcdn.net/v/t39.30808-1/548631683_122093515365041903_5409197823120351153_n.jpg?stp=dst-jpg_s200x200_tt6&_nc_cat=106&ccb=1-7&_nc_sid=2d3e12&_nc_ohc=m7vEcekFI3MQ7kNvwGADW6V&_nc_oc=AdnQSvizbIVknfZrvSXPd5WonYbpY4APIHoDd-MXiR655Ia5eNBOnDyDKAIfGlwHqpfUCCGXeC5ig7MsUDNP3Vgl&_nc_zt=24&_nc_ht=scontent.fbwa1-1.fna&_nc_gid=cTHOnvK6JrbnU90jVwbjnw&oh=00_AfnzRCOzjU3_Y7-vHgtGHzVULjcR5rvqwrmSL3tmQtAE_w&oe=6955AF91" alt="RDNSTravel" loading="lazy">
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3>RDNSTravel</h3>
                            <div class="portfolio-click-hint">
                                <i class="fas fa-mouse-pointer"></i>
                                <span>Click for full details</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item" data-category="web"
                 data-title="DentalButwal"
                 data-description="A professional and modern dental clinic website featuring comprehensive service information, easy appointment booking system, detailed team profiles, and patient resources. Designed to enhance patient experience and streamline clinic operations."
                 data-image="https://www.creativefabrica.com/wp-content/uploads/2019/02/Dental-tooth-logo-vector-by-Mansel-Brist-2.jpg"
                 data-link="https://dentalbutwal.sameerlamichhane.com.np/"
                 data-tech="HTML5,CSS3,JavaScript,PHP,MySQL,Bootstrap"
                 data-features="Appointment Booking,Service Catalog,Team Profiles,Patient Portal,Contact Forms,SEO Optimized">
                <div class="portfolio-image">
                    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Dental-tooth-logo-vector-by-Mansel-Brist-2.jpg" alt="DentalButwal" loading="lazy">
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3>DentalButwal</h3>
                            <div class="portfolio-click-hint">
                                <i class="fas fa-mouse-pointer"></i>
                                <span>Click for full details</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        
        </div>
    </div>
</section>


        <!-- Contact Section -->
        <section id="contact" class="section">
            <div class="container">
                <div class="section__header">
                    <h2 class="section__title">Get In Touch</h2>
                    <p class="section__subtitle">Let's work together</p>
                </div>
                <div class="contact__content">
                    <div class="contact-info">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="contact-details">
                                <h3>Email</h3>
                                <p>sameerlamichhane00@gmail.com</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="contact-details">
                                <h3>Phone</h3>
                                <p>+977 9745440930</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="contact-details">
                                <h3>Location</h3>
                                <p>Butwal, Nepal</p>
                            </div>
                        </div>
                    </div>
                    <form id="contact-form" class="contact-form" action="https://api.web3forms.com/submit" method="POST">
                        <input type="hidden" name="access_key" value="760f4768-092e-4297-94aa-c564ed49b095">
                        <input type="hidden" name="subject" value="New Contact Form Submission from Portfolio">
                        <input type="hidden" name="from_name" value="Sameer Lamichhane Portfolio">
                        <input type="hidden" name="redirect" value="true">
                        
                        <div class="form-group">
                            <input type="text" id="name" name="name" placeholder="Your Name" required>
                            <label for="name">Name</label>
                        </div>
                        <div class="form-group">
                            <input type="email" id="email" name="email" placeholder="Your Email" required>
                            <label for="email">Email</label>
                        </div>
                        <div class="form-group">
                            <textarea id="message" name="message" placeholder="Your Message" rows="5" required></textarea>
                            <label for="message">Message</label>
                        </div>
                        <button type="submit" class="btn btn--primary">Send Message</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <!-- Portfolio Modal -->
    <div id="portfolio-modal" class="portfolio-modal">
        <div class="portfolio-modal-backdrop"></div>
        <div class="portfolio-modal-content">
            <button class="portfolio-modal-close" aria-label="Close modal">
                <i class="fas fa-times"></i>
            </button>
            <div class="portfolio-modal-body">
                <div class="portfolio-modal-image">
                    <img id="modal-image" src="" alt="" loading="lazy">
                </div>
                <div class="portfolio-modal-info">
                    <h3 id="modal-title"></h3>
                    <p id="modal-description"></p>
                    <div class="portfolio-modal-details">
                        <div class="modal-tech-section">
                            <h4>Technologies Used</h4>
                            <div id="modal-tech" class="modal-tech-tags"></div>
                        </div>
                        <div class="modal-features-section">
                            <h4>Key Features</h4>
                            <ul id="modal-features" class="modal-features-list"></ul>
                        </div>
                    </div>
                    <div class="portfolio-modal-actions">
                        <a id="modal-link" href="" target="_blank" rel="noopener" class="modal-btn modal-btn-primary">
                            <i class="fas fa-external-link-alt"></i>
                            <span>View Project</span>
                        </a>
                        <button class="modal-btn modal-btn-secondary" onclick="closePortfolioModal()">
                            <i class="fas fa-arrow-left"></i>
                            <span>Back to Portfolio</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div style="display:none;">
    web developer Butwal, app developer Butwal, mobile app developer Butwal,
    software developer Butwal, Flutter developer Butwal, React Native developer Butwal,
    Android developer Butwal, iOS developer Butwal,
    web developer Devdaha, app developer Devdaha, software developer Devdaha,
    mobile app developer Nepal, software development Nepal, Flutter developer Nepal
</div>



    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer__content">
                <p>&copy; 2024 Sameer Lamichhane. All rights reserved.</p>
                <div class="footer-social">
                    <a href="https://www.instagram.com/itssamir.py" class="footer-social-link"><i class="fab fa-instagram"></i></a>
                    <a href="https://discord.com/users/1419030432292409515" class="footer-social-link"><i class="fab fa-discord"></i></a>
                    <a href="https://github.com/sameer-lamichhane" class="footer-social-link"><i class="fab fa-github"></i></a>
                </div>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8866402201533614"
     crossorigin="anonymous"></script>
<!-- Ads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8866402201533614"
     data-ad-slot="4070055213"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</body>
</html>
