<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sohan Mia | Professional Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@300;400;700&display=swap');

        /* প্রফেশনাল সলিড কালার প্যালেট */
        :root {
            --primary-bg: #0f172a;    /* গাঢ় নেভি ব্লু */
            --secondary-bg: #1e293b;  /* কার্ড ব্যাকগ্রাউন্ড */
            --accent-color: #38bdf8;  /* স্কাই ব্লু হাইলাইট */
            --text-main: #f8fafc;     /* সাদা টেক্সট */
            --text-muted: #94a3b8;    /* ধূসর টেক্সট */
            --white: #ffffff;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            background-color: var(--primary-bg); 
            color: var(--text-main); 
            font-family: 'Roboto', sans-serif; 
            line-height: 1.6;
            scroll-behavior: smooth;
        }

        h1, h2, h3, .logo { font-family: 'Montserrat', sans-serif; }

        /* Navigation */
        header {
            background-color: rgba(15, 23, 42, 0.95);
            padding: 20px 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid #334155;
        }
        nav {
            max-width: 1200px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .logo { font-size: 1.5rem; font-weight: bold; color: var(--accent-color); text-transform: uppercase; }
        nav ul { display: flex; list-style: none; gap: 30px; }
        nav ul li a { text-decoration: none; color: var(--text-main); font-weight: 500; transition: 0.3s; }
        nav ul li a:hover { color: var(--accent-color); }

        /* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 20px;
        }
        .hero h1 { font-size: 4rem; margin-bottom: 10px; color: var(--white); }
        .hero p { font-size: 1.5rem; color: var(--accent-color); font-weight: 300; margin-bottom: 30px; }
        .btn-main {
            padding: 12px 30px;
            background-color: var(--accent-color);
            color: var(--primary-bg);
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            transition: 0.3s;
        }
        .btn-main:hover { transform: translateY(-3px); opacity: 0.9; }

        /* About Section */
        .about { padding: 100px 20px; max-width: 900px; margin: auto; text-align: center; }
        .about h2 { font-size: 2.5rem; margin-bottom: 30px; }
        .about p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 20px; }

        /* Services Section */
        section { padding: 100px 20px; max-width: 1200px; margin: auto; }
        .section-title { text-align: center; font-size: 2.5rem; margin-bottom: 60px; }
        
        .services-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
            gap: 25px; 
        }
        .service-card { 
            background-color: var(--secondary-bg); 
            padding: 40px; 
            border-radius: 10px; 
            border: 1px solid #334155;
            transition: 0.3s; 
        }
        .service-card:hover { border-color: var(--accent-color); transform: translateY(-5px); }
        .service-card i { font-size: 2.5rem; color: var(--accent-color); margin-bottom: 20px; }
        .service-card h3 { font-size: 1.5rem; margin-bottom: 15px; }
        .service-card p { color: var(--text-muted); font-size: 0.95rem; }

        /* Verification Section */
        .docs { background-color: var(--secondary-bg); text-align: center; padding: 100px 20px; }
        .doc-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
        .doc-btn { 
            padding: 12px 25px; 
            border: 1px solid var(--accent-color); 
            color: var(--accent-color); 
            text-decoration: none; 
            border-radius: 5px; 
            transition: 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .doc-btn:hover { background-color: var(--accent-color); color: var(--primary-bg); }

        /* Contact Section */
        .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-bottom: 100px; }
        .contact-info h2 { font-size: 2.5rem; margin-bottom: 20px; }
        .contact-info p { margin-bottom: 20px; font-size: 1.1rem; color: var(--text-muted); }
        
        .contact-link {
            text-decoration: none;
            color: var(--text-main);
            background: var(--secondary-bg);
            padding: 12px 20px;
            border-radius: 8px;
            border: 1px solid #334155;
            transition: 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
            width: fit-content;
            margin-bottom: 15px;
        }
        .contact-link:hover { border-color: var(--accent-color); background: #2d3e5a; }
        .contact-link i { color: var(--accent-color); font-size: 1.2rem; }

        .social-icons { margin-top: 40px; display: flex; gap: 20px; }
        .social-icons a { color: var(--white); font-size: 2rem; transition: 0.3s; }
        .social-icons a:hover { color: var(--accent-color); transform: translateY(-5px); }

        /* Form */
        .form-group input, .form-group textarea {
            width: 100%; padding: 15px; background: var(--secondary-bg); 
            border: 1px solid #334155; color: var(--white); border-radius: 5px; margin-bottom: 20px;
        }
        .submit-btn {
            width: 100%; padding: 15px; background: var(--accent-color);
            color: var(--primary-bg); border: none; font-weight: bold; cursor: pointer; border-radius: 5px;
        }

        footer { text-align: center; padding: 60px 0; border-top: 1px solid #334155; color: var(--text-muted); }

        @media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            .contact { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>

    <header>
        <nav>
            <div class="logo">Sohan Mia</div>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="home" class="hero">
        <p>Expert Digital Solutions</p>
        <h1>Welcome to My Portfolio Website</h1>
        <p>Hi Tree I'm SOHAN MIA</p>
        <a href="#contact" class="btn-main">Work With Me</a>
    </section>

    <section id="about" class="about">
        <h2>About Me</h2>
        <p>
            I am a professional Web Designer and Digital Marketing Expert with a focus on delivering high-performance results. Trained at Outsourcing BD Institute and Ulipur IT, I specialize in creating secure, high-speed websites and data-driven marketing campaigns.
        </p>
        <p>
            With expertise in Cyber Security and SEO, I help businesses build a strong and secure online presence. My goal is to transform your vision into a successful digital reality.
        </p>
    </section>

    <section id="services">
        <h2 class="section-title">Professional Services</h2>
        <div class="services-grid">
            <div class="service-card">
                <i class="fas fa-code"></i>
                <h3>Web Design</h3>
                <p>Building modern, responsive, and high-speed websites tailored to your brand.</p>
            </div>
            <div class="service-card">
                <i class="fas fa-bullhorn"></i>
                <h3>Digital Marketing</h3>
                <p>Strategic brand positioning and social media marketing to reach a global audience.</p>
            </div>
            <div class="service-card">
                <i class="fas fa-user-shield"></i>
                <h3>Cyber Security</h3>
                <p>Advanced security audits and protection against modern digital threats.</p>
            </div>
            <div class="service-card">
                <i class="fas fa-search-plus"></i>
                <h3>SEO Optimization</h3>
                <p>Improving search rankings to ensure your business stays ahead of the competition.</p>
            </div>
            <div class="service-card">
                <i class="fas fa-ad"></i>
                <h3>Ads Management</h3>
                <p>Professional management of Facebook, Instagram, and Google ad campaigns.</p>
            </div>
            <div class="service-card">
                <i class="fas fa-rocket"></i>
                <h3>Speed Optimization</h3>
                <p>Making your website lightning fast for better user experience and SEO.</p>
            </div>
        </div>
    </section>

     <section class="trust-verification" id="verify">
        <div class="container">
            <h2 class="section-title">Professional Expertise & Verification</h2>
            <div class="v-grid">
                
                <div class="v-card">
                    <div class="v-icon"><i class="fas fa-certificate"></i></div>
                    <h3>Verified Specialist</h3>
                    <p>Training in <strong>Digital Marketing</strong>, <strong>Web Design</strong>, and <strong>Cyber Security</strong> from Outsourcing BD Institute.</p>
                    <span class="v-badge">Certified 2018</span>
                </div>

                <div class="v-card">
                    <div class="v-icon"><i class="fas fa-file-invoice-dollar"></i></div>
                    <h3>Legal Identity</h3>
                    <p><strong>Name:</strong> SOHAN MIA<br>
                       <strong>TIN:</strong> 124188828577<br>
                       <strong>Circle:</strong> 017 (Ulipur), Rangpur</p>
                    <span class="v-badge">Taxpayer Since 2020</span>
                </div>

            </div>
        </div>
    </section>

    <script>
        // হেডারের ব্যাকগ্রাউন্ড পরিবর্তন
        window.onscroll = function() {
            const header = document.querySelector('header');
            if (header && (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80)) {
                header.style.background = "rgba(15, 23, 42, 0.98)";
                header.style.boxShadow = "0 4px 20px rgba(0,0,0,0.3)";
            }
        };

        // স্মুথ স্ক্রলিং লজিক
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) target.scrollIntoView({ behavior: 'smooth' });
            });
        });
    </script>

    <section id="contact" class="contact">
        <div class="contact-info">
            <h2>Connect With Me</h2>
            <p>Ready to start your next project? Reach out via any platform below.</p>
            
            <a href="tel:+8801609678044" class="contact-link"><i class="fas fa-phone"></i> Call Me</a>
            <a href="https://wa.me/8801609678044" target="_blank" class="contact-link"><i class="fab fa-whatsapp"></i> WhatsApp</a>
            <a href="mailto:sohanrakib759@gmail.com" class="contact-link"><i class="fas fa-envelope"></i> Send Email</a>
            <a href="https://t.me/depositking38" target="_blank" class="contact-link"><i class="fab fa-telegram"></i> Telegram</a>

            <div class="social-icons">
                <a href="https://www.facebook.com/profile.php?id=100090028777043" target="_blank" title="Facebook"><i class="fab fa-facebook"></i></a>
                <a href="https://www.linkedin.com/in/sohan-mia" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
                <a href="https://t.me/depositking38" target="_blank" title="Telegram"><i class="fab fa-telegram"></i></a>
                <a href="https://www.facebook.com/profile.php?id=100090028777043" target="_blank" title="Pinterest"><i class="fab fa-pinterest"></i></a>
                <a href="https://github.com/sohanmia" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
            </div>
        </div>
       <section class="contact" id="contact">
    <div class="container">
        
        
        <div class="contact-wrapper" style="display: flex; gap: 40px; flex-wrap: wrap;">
            <div class="contact-info" style="flex: 1; min-width: 300px;">
                
                <div class="social-btns">
                    </div>
            </div>

            <form action="https://formspree.io/f/আপনার-আইডি" method="POST" id="my-form" style="flex: 1; min-width: 300px;">
                <input type="text" name="name" placeholder="Your Full Name" required style="width:100%; padding:12px; margin-bottom:15px; background:#1e293b; border:1px solid #334155; color:white;">
                
                <input type="email" name="email" placeholder="Email Address" required style="width:100%; padding:12px; margin-bottom:15px; background:#1e293b; border:1px solid #334155; color:white;">
                
                <textarea name="message" rows="5" placeholder="Project Details" required style="width:100%; padding:12px; margin-bottom:15px; background:#1e293b; border:1px solid #334155; color:white;"></textarea>

                <input type="text" name="_gotcha" style="display:none">

                <button type="submit" id="submit-btn" style="width:100%; padding:15px; background:#38bdf8; border:none; color:#0f172a; font-weight:bold; cursor:pointer;">
                    SEND MESSAGE
                </button>
                <p id="status"></p>
            </form>
        </div>
    </div>
</section>

    </section>

    <footer>
        <p>&copy; 2026 freelancersohan.online | All Rights Reserved.</p>
    </footer>
<script>
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });

    window.onscroll = function() {
        const header = document.querySelector('header');
        const scrollBtn = document.getElementById("scrollTop");
        
        if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
            header.style.background = "rgba(15, 23, 42, 0.98)";
            header.style.boxShadow = "0 4px 20px rgba(0,0,0,0.3)";
            if(scrollBtn) scrollBtn.style.display = "flex";
        } else {
            header.style.background = "rgba(15, 23, 42, 0.9)";
            header.style.boxShadow = "none";
            if(scrollBtn) scrollBtn.style.display = "none";
        }
    };

    const downloadLinks = document.querySelectorAll('.download-btn');
    downloadLinks.forEach(link => {
        link.addEventListener('click', () => {
            console.log("Processing...");
        });
    });
</script>

</body>
</html>