Notification texts go here Contact Us Buy Now!

Contoh Project Html Css Javascript

goweb3

 <!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta name="description" content="Portfolio pribadi Sihabudin Alwi">

    <meta name="author" content="Sihabudin Alwi">


    <title>Wibi | Portfolio</title>


    <!-- Google Font -->

    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">


    <style>


        /* =====================================================

           RESET

        ===================================================== */


        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }


        html {

            scroll-behavior: smooth;

        }


        body {

            font-family: "Inter", sans-serif;

            background: #ffffff;

            color: #171717;

            line-height: 1.6;

            transition: 0.3s ease;

        }


        img {

            max-width: 100%;

            display: block;

        }


        a {

            text-decoration: none;

            color: inherit;

        }


        button,

        input,

        textarea {

            font-family: inherit;

        }



        /* =====================================================

           VARIABLES

        ===================================================== */


        :root {

            --primary: #dc2626;

            --primary-dark: #b91c1c;


            --dark: #111111;

            --text: #525252;

            --light-text: #737373;


            --white: #ffffff;


            --background: #ffffff;

            --background-alt: #fafafa;


            --border: #e5e5e5;


            --shadow:

                0 20px 50px rgba(0, 0, 0, 0.08);

        }



        /* =====================================================

           GENERAL

        ===================================================== */


        .container {

            width: min(1120px, 90%);

            margin: auto;

        }


        .section {

            padding: 110px 0;

        }


        .section-alt {

            background: var(--background-alt);

        }



        /* =====================================================

           NAVBAR

        ===================================================== */


        .header {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;


            background: rgba(255, 255, 255, 0.9);


            backdrop-filter: blur(15px);


            border-bottom: 1px solid rgba(0, 0, 0, 0.05);


            z-index: 1000;

        }


        .navbar {

            height: 75px;


            display: flex;

            align-items: center;

            justify-content: space-between;

        }


        .logo {

            font-size: 22px;

            font-weight: 800;

            letter-spacing: -1px;

        }


        .logo span {

            color: var(--primary);

        }


        .nav-menu {

            display: flex;

            gap: 30px;

            list-style: none;

        }


        .nav-link {

            font-size: 14px;

            font-weight: 500;


            color: #525252;


            position: relative;


            transition: 0.3s;

        }


        .nav-link:hover,

        .nav-link.active {

            color: var(--primary);

        }


        .nav-link::after {

            content: "";


            position: absolute;


            left: 0;

            bottom: -8px;


            width: 0;

            height: 2px;


            background: var(--primary);


            transition: 0.3s;

        }


        .nav-link:hover::after,

        .nav-link.active::after {

            width: 100%;

        }


        .theme-toggle {

            border: none;

            background: transparent;


            font-size: 20px;


            cursor: pointer;

        }


        .menu-toggle {

            display: none;


            border: none;

            background: transparent;


            font-size: 25px;


            cursor: pointer;

        }



        /* =====================================================

           HERO

        ===================================================== */


        .hero {

            min-height: 100vh;


            display: flex;

            align-items: center;


            padding-top: 75px;

        }


        .hero-content {

            display: grid;


            grid-template-columns: 1.2fr 0.8fr;


            gap: 70px;


            align-items: center;

        }


        .hero-subtitle {

            color: var(--primary);


            font-size: 14px;


            font-weight: 700;


            letter-spacing: 3px;


            margin-bottom: 10px;

        }


        .hero h1 {

            font-size: clamp(45px, 7vw, 75px);


            line-height: 1;


            letter-spacing: -4px;


            margin-bottom: 20px;

        }


        .hero h1 span {

            color: var(--primary);

        }


        .hero h2 {

            font-size: 25px;


            margin-bottom: 20px;

        }


        .hero-description {

            max-width: 620px;


            color: var(--text);


            margin-bottom: 30px;

        }


        .hero-buttons {

            display: flex;


            gap: 15px;


            flex-wrap: wrap;

        }


        .btn {

            display: inline-flex;


            justify-content: center;

            align-items: center;


            padding: 13px 25px;


            border-radius: 8px;


            font-size: 14px;


            font-weight: 600;


            transition: 0.3s;


            border: none;


            cursor: pointer;

        }


        .btn-primary {

            background: var(--primary);

            color: white;

        }


        .btn-primary:hover {

            background: var(--primary-dark);


            transform: translateY(-3px);

        }


        .btn-outline {

            border: 1px solid var(--border);


            color: var(--dark);

        }


        .btn-outline:hover {

            border-color: var(--primary);


            color: var(--primary);

        }


        .social-links {

            display: flex;


            gap: 20px;


            margin-top: 30px;

        }


        .social-links a {

            font-size: 13px;


            color: var(--light-text);


            transition: 0.3s;

        }


        .social-links a:hover {

            color: var(--primary);

        }



        /* =====================================================

           PROFILE IMAGE

        ===================================================== */


        .hero-image {

            display: flex;


            justify-content: center;

        }


        .image-wrapper {

            width: 390px;

            height: 390px;


            border-radius: 50%;


            padding: 5px;


            background:

                linear-gradient(

                    135deg,

                    var(--primary),

                    #171717

                );

        }


        .image-wrapper img {

            width: 100%;

            height: 100%;


            object-fit: cover;


            border-radius: 50%;


            border: 4px solid white;

        }



        /* =====================================================

           SECTION TITLE

        ===================================================== */


        .section-heading {

            text-align: center;


            margin-bottom: 60px;

        }


        .section-heading span {

            color: var(--primary);


            font-size: 12px;


            font-weight: 800;


            letter-spacing: 3px;

        }


        .section-heading h2 {

            font-size: 38px;


            letter-spacing: -1px;


            margin: 10px 0;

        }


        .section-heading p {

            color: var(--text);

        }



        /* =====================================================

           ABOUT

        ===================================================== */


        .about-grid {

            display: grid;


            grid-template-columns: 0.8fr 1.2fr;


            gap: 70px;


            align-items: center;

        }


        .about-image img {

            width: 100%;

            height: 500px;


            object-fit: cover;


            border-radius: 15px;

        }


        .about-content h3 {

            font-size: 28px;


            margin-bottom: 20px;

        }


        .about-content p {

            color: var(--text);


            margin-bottom: 15px;

        }


        .about-info {

            display: grid;


            grid-template-columns: 1fr 1fr;


            gap: 20px;


            margin-top: 30px;

        }


        .about-info div {

            display: flex;


            flex-direction: column;

        }


        .about-info strong {

            font-size: 13px;

        }


        .about-info span {

            color: var(--text);


            font-size: 14px;

        }



        /* =====================================================

           SKILLS

        ===================================================== */


        .skills-grid {

            display: grid;


            grid-template-columns:

                repeat(4, 1fr);


            gap: 20px;

        }


        .skill-card {

            background: white;


            padding: 30px;


            border: 1px solid var(--border);


            border-radius: 12px;


            transition: 0.3s;

        }


        .skill-card:hover {

            transform: translateY(-8px);


            box-shadow: var(--shadow);

        }


        .skill-icon {

            width: 55px;

            height: 55px;


            display: flex;


            align-items: center;

            justify-content: center;


            border-radius: 10px;


            background: #fef2f2;


            color: var(--primary);


            font-weight: 800;


            margin-bottom: 20px;

        }


        .skill-card h3 {

            margin-bottom: 5px;

        }


        .skill-card p {

            font-size: 13px;


            color: var(--text);


            margin-bottom: 20px;

        }


        .skill-bar {

            width: 100%;


            height: 5px;


            background: #eeeeee;


            border-radius: 10px;


            overflow: hidden;

        }


        .skill-bar span {

            display: block;


            height: 100%;


            background: var(--primary);

        }


        .skill-card small {

            display: block;


            margin-top: 7px;


            text-align: right;


            color: var(--light-text);

        }



        /* =====================================================

           PORTFOLIO FILTER

        ===================================================== */


        .portfolio-filter {

            display: flex;


            justify-content: center;


            gap: 10px;


            margin-bottom: 40px;


            flex-wrap: wrap;

        }


        .filter-btn {

            padding: 10px 20px;


            border: 1px solid var(--border);


            background: white;


            border-radius: 50px;


            cursor: pointer;


            font-size: 13px;


            transition: 0.3s;

        }


        .filter-btn:hover,

        .filter-btn.active {

            background: var(--primary);


            color: white;


            border-color: var(--primary);

        }



        /* =====================================================

           PORTFOLIO

        ===================================================== */


        .portfolio-grid {

            display: grid;


            grid-template-columns:

                repeat(3, 1fr);


            gap: 25px;

        }


        .project-card {

            border: 1px solid var(--border);


            border-radius: 14px;


            overflow: hidden;


            background: white;


            transition: 0.3s;

        }


        .project-card:hover {

            transform: translateY(-8px);


            box-shadow: var(--shadow);

        }


        .project-image {

            height: 220px;


            overflow: hidden;

        }


        .project-image img {

            width: 100%;

            height: 100%;


            object-fit: cover;


            transition: 0.5s;

        }


        .project-card:hover img {

            transform: scale(1.05);

        }


        .project-content {

            padding: 25px;

        }


        .project-content span {

            color: var(--primary);


            font-size: 12px;


            font-weight: 700;

        }


        .project-content h3 {

            margin: 7px 0;

        }


        .project-content p {

            color: var(--text);


            font-size: 14px;


            margin-bottom: 15px;

        }


        .project-link {

            color: var(--primary);


            font-size: 13px;


            font-weight: 700;

        }



        /* =====================================================

           TIMELINE

        ===================================================== */


        .timeline {

            max-width: 800px;


            margin: auto;


            position: relative;

        }


        .timeline::before {

            content: "";


            position: absolute;


            left: 10px;


            top: 0;

            bottom: 0;


            width: 2px;


            background: var(--border);

        }


        .timeline-item {

            position: relative;


            padding-left: 45px;


            margin-bottom: 45px;

        }


        .timeline-dot {

            position: absolute;


            left: 3px;

            top: 5px;


            width: 16px;

            height: 16px;


            background: var(--primary);


            border-radius: 50%;


            border: 3px solid white;

        }


        .timeline-content span {

            font-size: 12px;


            color: var(--primary);


            font-weight: 700;

        }


        .timeline-content h3 {

            margin: 5px 0;

        }


        .timeline-content h4 {

            font-size: 14px;


            color: var(--text);


            margin-bottom: 8px;

        }


        .timeline-content p {

            color: var(--text);


            font-size: 14px;

        }



        /* =====================================================

           CONTACT

        ===================================================== */


        .contact-grid {

            display: grid;


            grid-template-columns: 0.8fr 1.2fr;


            gap: 60px;

        }


        .contact-info {

            display: flex;


            flex-direction: column;


            gap: 25px;

        }


        .contact-item {

            display: flex;


            gap: 15px;


            align-items: center;

        }


        .contact-icon {

            width: 50px;

            height: 50px;


            background: #fef2f2;


            color: var(--primary);


            border-radius: 10px;


            display: flex;


            align-items: center;

            justify-content: center;

        }


        .contact-item div:last-child {

            display: flex;


            flex-direction: column;

        }


        .contact-item span {

            font-size: 12px;


            color: var(--light-text);

        }


        .contact-item strong {

            font-size: 14px;

        }


        .contact-form {

            display: flex;


            flex-direction: column;


            gap: 20px;

        }


        .form-group {

            display: flex;


            flex-direction: column;


            gap: 7px;

        }


        .form-group label {

            font-size: 13px;


            font-weight: 600;

        }


        .form-group input,

        .form-group textarea {

            width: 100%;


            padding: 14px;


            border: 1px solid var(--border);


            border-radius: 8px;


            outline: none;


            resize: vertical;


            transition: 0.3s;

        }


        .form-group input:focus,

        .form-group textarea:focus {

            border-color: var(--primary);

        }



        /* =====================================================

           FOOTER

        ===================================================== */


        .footer {

            background: #111111;


            color: white;


            padding-top: 50px;

        }


        .footer-content {

            display: flex;


            justify-content: space-between;


            align-items: center;

        }


        .footer p {

            color: #a3a3a3;


            font-size: 13px;


            margin-top: 8px;

        }


        .footer-social {

            display: flex;


            gap: 20px;


            font-size: 13px;

        }


        .footer-social a:hover {

            color: #ef4444;

        }


        .copyright {

            text-align: center;


            border-top: 1px solid #262626;


            margin-top: 40px;


            padding: 20px;


            font-size: 12px;


            color: #737373;

        }



        /* =====================================================

           BACK TO TOP

        ===================================================== */


        .back-to-top {

            position: fixed;


            right: 25px;

            bottom: 25px;


            width: 45px;

            height: 45px;


            border: none;


            border-radius: 50%;


            background: var(--primary);


            color: white;


            font-size: 20px;


            cursor: pointer;


            opacity: 0;


            visibility: hidden;


            transition: 0.3s;


            z-index: 100;

        }


        .back-to-top.show {

            opacity: 1;


            visibility: visible;

        }



        /* =====================================================

           DARK MODE

        ===================================================== */


        body.dark {


            --dark: #ffffff;


            --text: #d4d4d4;


            --light-text: #a3a3a3;


            --background: #111111;


            --background-alt: #171717;


            --border: #2a2a2a;


            background: #111111;


            color: white;

        }


        body.dark .header {

            background: rgba(17, 17, 17, 0.9);


            border-color: #2a2a2a;

        }


        body.dark .nav-link {

            color: #d4d4d4;

        }


        body.dark .btn-outline {

            color: white;

        }


        body.dark .skill-card,

        body.dark .project-card {

            background: #171717;

        }


        body.dark .filter-btn {

            background: #171717;


            color: white;

        }


        body.dark .image-wrapper img {

            border-color: #171717;

        }



        /* =====================================================

           RESPONSIVE

        ===================================================== */


        @media (max-width: 900px) {


            .hero-content {

                grid-template-columns: 1fr;


                text-align: center;

            }


            .hero-description {

                margin-left: auto;

                margin-right: auto;

            }


            .hero-buttons,

            .social-links {

                justify-content: center;

            }


            .hero-image {

                order: -1;

            }


            .image-wrapper {

                width: 280px;

                height: 280px;

            }


            .about-grid,

            .contact-grid {

                grid-template-columns: 1fr;

            }


            .about-image {

                max-width: 500px;


                margin: auto;

            }


            .skills-grid {

                grid-template-columns:

                    repeat(2, 1fr);

            }


            .portfolio-grid {

                grid-template-columns:

                    repeat(2, 1fr);

            }

        }



        @media (max-width: 700px) {


            .menu-toggle {

                display: block;

            }


            .nav-menu {

                position: absolute;


                top: 75px;

                left: 0;


                width: 100%;


                background: white;


                flex-direction: column;


                padding: 25px;


                gap: 20px;


                transform: translateY(-150%);


                transition: 0.3s;


                box-shadow:

                    0 10px 30px rgba(0,0,0,.05);

            }


            .nav-menu.active {

                transform: translateY(0);

            }


            body.dark .nav-menu {

                background: #111111;

            }


            .theme-toggle {

                margin-left: auto;


                margin-right: 15px;

            }


            .hero h1 {

                font-size: 48px;


                letter-spacing: -3px;

            }


            .section {

                padding: 80px 0;

            }


            .section-heading h2 {

                font-size: 30px;

            }


            .skills-grid,

            .portfolio-grid {

                grid-template-columns: 1fr;

            }


            .about-info {

                grid-template-columns: 1fr;

            }


            .footer-content {

                flex-direction: column;


                gap: 25px;


                text-align: center;

            }

        }


    </style>

</head>



<body>



    <!-- =====================================================

         NAVBAR

    ====================================================== -->


    <header class="header">


        <nav class="navbar container">


            <a href="#home" class="logo">

                <span>Si</span>habudinalwi.id

            </a>



            <button

                class="menu-toggle"

                id="menu-toggle"

                aria-label="Menu"

            >

                ☰

            </button>



            <ul class="nav-menu" id="nav-menu">


                <li>

                    <a href="#home" class="nav-link active">

                        Home

                    </a>

                </li>


                <li>

                    <a href="#about" class="nav-link">

                        Tentang

                    </a>

                </li>


                <li>

                    <a href="#skills" class="nav-link">

                        Skills

                    </a>

                </li>


                <li>

                    <a href="#portfolio" class="nav-link">

                        Portfolio

                    </a>

                </li>


                <li>

                    <a href="#experience" class="nav-link">

                        Pengalaman

                    </a>

                </li>


                <li>

                    <a href="#contact" class="nav-link">

                        Kontak

                    </a>

                </li>


            </ul>



            <button

                id="theme-toggle"

                class="theme-toggle"

                aria-label="Dark mode"

            >

                🌙

            </button>


        </nav>


    </header>




    <!-- =====================================================

         MAIN

    ====================================================== -->


    <main>



        <!-- =================================================

             HERO

        ================================================== -->


        <section id="home" class="hero">


            <div class="container hero-content">



                <div class="hero-text">


                    <p class="hero-subtitle">

                        HALO, SAYA

                    </p>



                    <h1>

                        Sihabudin <span>Alwi</span>

                    </h1>



                    <h2>

                        Web Developer & IT Enthusiast

                    </h2>



                    <p class="hero-description">

                        Saya adalah seorang yang memiliki ketertarikan

                        pada teknologi, pengembangan website, desain

                        digital, dan pembuatan solusi berbasis teknologi.

                    </p>



                    <div class="hero-buttons">


                        <a

                            href="#portfolio"

                            class="btn btn-primary"

                        >

                            Lihat Portfolio

                        </a>



                        <a

                            href="#contact"

                            class="btn btn-outline"

                        >

                            Hubungi Saya

                        </a>


                    </div>



                    <div class="social-links">


                        <a href="#">

                            Instagram

                        </a>


                        <a href="#">

                            GitHub

                        </a>


                        <a href="#">

                            LinkedIn

                        </a>


                    </div>


                </div>




                <div class="hero-image">


                    <div class="image-wrapper">


                        <!-- GANTI URL FOTO DI SINI -->


                        <img

                            src="sa.JPG"

                            alt="Foto Profile"

                        >


                    </div>


                </div>



            </div>


        </section>




        <!-- =================================================

             ABOUT

        ================================================== -->


        <section id="about" class="section">


            <div class="container">



                <div class="section-heading">


                    <span>

                        TENTANG SAYA

                    </span>


                    <h2>

                        Mengenal Saya Lebih Dekat

                    </h2>


                    <p>

                        Beberapa hal tentang saya dan bidang yang saya tekuni.

                    </p>


                </div>




                <div class="about-grid">



                    <div class="about-image">


                        <img

                            src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=800&q=80"

                            alt="Workspace"

                        >


                    </div>




                    <div class="about-content">


                        <h3>

                            Membangun sesuatu yang bermanfaat melalui teknologi.

                        </h3>



                        <p>

                            Saya memiliki minat dalam dunia teknologi informasi,

                            pengembangan website, desain digital, dan berbagai

                            solusi teknologi yang dapat membantu pekerjaan

                            menjadi lebih efektif.

                        </p>



                        <p>

                            Saya senang mempelajari teknologi baru dan

                            mengembangkan berbagai project untuk meningkatkan

                            kemampuan serta memberikan solusi yang bermanfaat.

                        </p>




                        <div class="about-info">


                            <div>

                                <strong>

                                    Nama

                                </strong>


                                <span>

                                    Sihabudin Alwi

                                </span>

                            </div>



                            <div>

                                <strong>

                                    Profesi

                                </strong>


                                <span>

                                    Web Developer

                                </span>

                            </div>



                            <div>

                                <strong>

                                    Fokus

                                </strong>


                                <span>

                                    Web Development

                                </span>

                            </div>



                            <div>

                                <strong>

                                    Lokasi

                                </strong>


                                <span>

                                    Indonesia

                                </span>

                            </div>


                        </div>


                    </div>


                </div>


            </div>


        </section>




        <!-- =================================================

             SKILLS

        ================================================== -->


        <section id="skills" class="section section-alt">


            <div class="container">



                <div class="section-heading">


                    <span>

                        KEAHLIAN

                    </span>


                    <h2>

                        Skills & Technologies

                    </h2>


                    <p>

                        Teknologi dan kemampuan yang saya gunakan.

                    </p>


                </div>




                <div class="skills-grid">



                    <div class="skill-card">


                        <div class="skill-icon">

                            HTML

                        </div>


                        <h3>

                            HTML

                        </h3>


                        <p>

                            Struktur dan semantic website.

                        </p>


                        <div class="skill-bar">

                            <span style="width:95%"></span>

                        </div>


                        <small>

                            95%

                        </small>


                    </div>




                    <div class="skill-card">


                        <div class="skill-icon">

                            CSS

                        </div>


                        <h3>

                            CSS

                        </h3>


                        <p>

                            Responsive design dan animasi.

                        </p>


                        <div class="skill-bar">

                            <span style="width:90%"></span>

                        </div>


                        <small>

                            90%

                        </small>


                    </div>




                    <div class="skill-card">


                        <div class="skill-icon">

                            JS

                        </div>


                        <h3>

                            JavaScript

                        </h3>


                        <p>

                            Interaksi dan fitur website.

                        </p>


                        <div class="skill-bar">

                            <span style="width:85%"></span>

                        </div>


                        <small>

                            85%

                        </small>


                    </div>




                    <div class="skill-card">


                        <div class="skill-icon">

                            UI

                        </div>


                        <h3>

                            UI Design

                        </h3>


                        <p>

                            Desain antarmuka modern.

                        </p>


                        <div class="skill-bar">

                            <span style="width:80%"></span>

                        </div>


                        <small>

                            80%

                        </small>


                    </div>



                </div>


            </div>


        </section>




        <!-- =================================================

             PORTFOLIO

        ================================================== -->


        <section id="portfolio" class="section">


            <div class="container">



                <div class="section-heading">


                    <span>

                        PORTFOLIO

                    </span>


                    <h2>

                        Project Terbaru

                    </h2>


                    <p>

                        Beberapa project yang pernah saya kerjakan.

                    </p>


                </div>




                <div class="portfolio-filter">


                    <button

                        class="filter-btn active"

                        data-filter="all"

                    >

                        Semua

                    </button>


                    <button

                        class="filter-btn"

                        data-filter="website"

                    >

                        Website

                    </button>


                    <button

                        class="filter-btn"

                        data-filter="design"

                    >

                        Design

                    </button>


                    <button

                        class="filter-btn"

                        data-filter="app"

                    >

                        Application

                    </button>


                </div>




                <div class="portfolio-grid">



                    <!-- PROJECT 1 -->


                    <article

                        class="project-card"

                        data-category="website"

                    >


                        <div class="project-image">


                            <img

                                src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80"

                                alt="Website Project"

                            >


                        </div>



                        <div class="project-content">


                            <span>

                                Website

                            </span>


                            <h3>

                                Sistem Informasi Sekolah

                            </h3>


                            <p>

                                Website informasi sekolah dengan tampilan

                                responsive dan modern.

                            </p>


                            <a

                                href="#"

                                class="project-link"

                            >

                                Lihat Project →

                            </a>


                        </div>


                    </article>




                    <!-- PROJECT 2 -->


                    <article

                        class="project-card"

                        data-category="app"

                    >


                        <div class="project-image">


                            <img

                                src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80"

                                alt="Application Project"

                            >


                        </div>



                        <div class="project-content">


                            <span>

                                Application

                            </span>


                            <h3>

                                Sistem Jadwal Mengajar

                            </h3>


                            <p>

                                Sistem untuk mengelola jadwal mengajar

                                guru secara digital.

                            </p>


                            <a

                                href="#"

                                class="project-link"

                            >

                                Lihat Project →

                            </a>


                        </div>


                    </article>




                    <!-- PROJECT 3 -->


                    <article

                        class="project-card"

                        data-category="design"

                    >


                        <div class="project-image">


                            <img

                                src="https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=800&q=80"

                                alt="Design Project"

                            >


                        </div>



                        <div class="project-content">


                            <span>

                                Design

                            </span>


                            <h3>

                                Social Media Design

                            </h3>


                            <p>

                                Desain visual untuk kebutuhan branding

                                dan media sosial.

                            </p>


                            <a

                                href="#"

                                class="project-link"

                            >

                                Lihat Project →

                            </a>


                        </div>


                    </article>



                </div>


            </div>


        </section>




        <!-- =================================================

             EXPERIENCE

        ================================================== -->


        <section id="experience" class="section section-alt">


            <div class="container">



                <div class="section-heading">


                    <span>

                        PENGALAMAN

                    </span>


                    <h2>

                        Pendidikan & Pengalaman

                    </h2>


                </div>




                <div class="timeline">



                    <div class="timeline-item">


                        <div class="timeline-dot"></div>



                        <div class="timeline-content">


                            <span>

                                2024 - Sekarang

                            </span>


                            <h3>

                                Web Developer

                            </h3>


                            <h4>

                                Freelance / Personal Project

                            </h4>


                            <p>

                                Mengembangkan berbagai website dan aplikasi

                                berbasis web untuk kebutuhan digital.

                            </p>


                        </div>


                    </div>




                    <div class="timeline-item">


                        <div class="timeline-dot"></div>



                        <div class="timeline-content">


                            <span>

                                2022 - 2024

                            </span>


                            <h3>

                                IT & Technology

                            </h3>


                            <h4>

                                Pengembangan Teknologi

                            </h4>


                            <p>

                                Mempelajari berbagai teknologi web,

                                desain, dan sistem informasi.

                            </p>


                        </div>


                    </div>




                    <div class="timeline-item">


                        <div class="timeline-dot"></div>



                        <div class="timeline-content">


                            <span>

                                2020 - 2022

                            </span>


                            <h3>

                                Pendidikan

                            </h3>


                            <h4>

                                Teknologi Informasi

                            </h4>


                            <p>

                                Memulai perjalanan dan memperdalam

                                pengetahuan di bidang teknologi.

                            </p>


                        </div>


                    </div>



                </div>


            </div>


        </section>




        <!-- =================================================

             CONTACT

        ================================================== -->


        <section id="contact" class="section">


            <div class="container">



                <div class="section-heading">


                    <span>

                        KONTAK

                    </span>


                    <h2>

                        Mari Berkolaborasi

                    </h2>


                    <p>

                        Punya project atau ingin berdiskusi?

                        Silakan hubungi saya.

                    </p>


                </div>




                <div class="contact-grid">



                    <div class="contact-info">



                        <div class="contact-item">


                            <div class="contact-icon">

                                ✉

                            </div>


                            <div>


                                <span>

                                    Email

                                </span>


                                <strong>

                                    emailanda@gmail.com

                                </strong>


                            </div>


                        </div>




                        <div class="contact-item">


                            <div class="contact-icon">

                                ☎

                            </div>


                            <div>


                                <span>

                                    WhatsApp

                                </span>


                                <strong>

                                    +62 8XX XXXX XXXX

                                </strong>


                            </div>


                        </div>




                        <div class="contact-item">


                            <div class="contact-icon">

                                📍

                            </div>


                            <div>


                                <span>

                                    Lokasi

                                </span>


                                <strong>

                                    Indonesia

                                </strong>


                            </div>


                        </div>



                    </div>




                    <form

                        class="contact-form"

                        id="contact-form"

                    >



                        <div class="form-group">


                            <label for="name">

                                Nama

                            </label>


                            <input

                                type="text"

                                id="name"

                                placeholder="Masukkan nama"

                                required

                            >


                        </div>




                        <div class="form-group">


                            <label for="email">

                                Email

                            </label>


                            <input

                                type="email"

                                id="email"

                                placeholder="Masukkan email"

                                required

                            >


                        </div>




                        <div class="form-group">


                            <label for="message">

                                Pesan

                            </label>


                            <textarea

                                id="message"

                                rows="6"

                                placeholder="Tuliskan pesan..."

                                required

                            ></textarea>


                        </div>




                        <button

                            type="submit"

                            class="btn btn-primary"

                        >

                            Kirim Pesan

                        </button>



                    </form>



                </div>


            </div>


        </section>



    </main>




    <!-- =====================================================

         FOOTER

    ====================================================== -->


    <footer class="footer">


        <div class="container footer-content">



            <div>


                <a

                    href="#home"

                    class="logo"

                >

                    <span>S</span>ihabudin

                </a>


                <p>

                    Web Developer & IT Enthusiast.

                </p>


            </div>



            <div class="footer-social">


                <a href="#">

                    Instagram

                </a>


                <a href="#">

                    GitHub

                </a>


                <a href="#">

                    LinkedIn

                </a>


            </div>



        </div>



        <div class="copyright">


            ©

            <span id="year"></span>


            Sihabudin Alwi.


            All Rights Reserved.


        </div>


    </footer>




    <!-- BACK TO TOP -->


    <button

        id="back-to-top"

        class="back-to-top"

    >

        ↑

    </button>




    <!-- =====================================================

         JAVASCRIPT

    ====================================================== -->


    <script>


        /* =================================================

           MOBILE MENU

        ================================================= */


        const menuToggle =

            document.getElementById("menu-toggle");


        const navMenu =

            document.getElementById("nav-menu");



        menuToggle.addEventListener("click", () => {


            navMenu.classList.toggle("active");


        });



        document

            .querySelectorAll(".nav-link")

            .forEach(link => {


                link.addEventListener("click", () => {


                    navMenu.classList.remove("active");


                });


            });




        /* =================================================

           DARK MODE

        ================================================= */


        const themeToggle =

            document.getElementById("theme-toggle");



        const savedTheme =

            localStorage.getItem("theme");



        if (savedTheme === "dark") {


            document.body.classList.add("dark");


            themeToggle.textContent = "☀️";


        }



        themeToggle.addEventListener("click", () => {


            document.body.classList.toggle("dark");



            const isDark =

                document.body.classList.contains("dark");



            if (isDark) {


                themeToggle.textContent = "☀️";


                localStorage.setItem(

                    "theme",

                    "dark"

                );


            } else {


                themeToggle.textContent = "🌙";


                localStorage.setItem(

                    "theme",

                    "light"

                );


            }


        });




        /* =================================================

           PORTFOLIO FILTER

        ================================================= */


        const filterButtons =

            document.querySelectorAll(".filter-btn");



        const projects =

            document.querySelectorAll(".project-card");



        filterButtons.forEach(button => {


            button.addEventListener("click", () => {



                filterButtons.forEach(btn => {


                    btn.classList.remove("active");


                });



                button.classList.add("active");



                const filter =

                    button.getAttribute("data-filter");



                projects.forEach(project => {


                    const category =

                        project.getAttribute(

                            "data-category"

                        );



                    if (

                        filter === "all" ||

                        filter === category

                    ) {


                        project.style.display =

                            "block";


                    } else {


                        project.style.display =

                            "none";


                    }


                });


            });


        });




        /* =================================================

           BACK TO TOP

        ================================================= */


        const backToTop =

            document.getElementById("back-to-top");



        window.addEventListener("scroll", () => {


            if (window.scrollY > 500) {


                backToTop.classList.add("show");


            } else {


                backToTop.classList.remove("show");


            }


        });



        backToTop.addEventListener(

            "click",

            () => {


                window.scrollTo({


                    top: 0,


                    behavior: "smooth"


                });


            }

        );




        /* =================================================

           ACTIVE NAVIGATION

        ================================================= */


        const sections =

            document.querySelectorAll("section");



        const navLinks =

            document.querySelectorAll(".nav-link");



        window.addEventListener("scroll", () => {



            let current = "";



            sections.forEach(section => {


                const sectionTop =

                    section.offsetTop - 150;



                if (

                    window.scrollY >= sectionTop

                ) {


                    current =

                        section.getAttribute("id");


                }


            });



            navLinks.forEach(link => {


                link.classList.remove("active");



                if (

                    link.getAttribute("href") ===

                    "#" + current

                ) {


                    link.classList.add("active");


                }


            });


        });




        /* =================================================

           CONTACT FORM

        ================================================= */


        const contactForm =

            document.getElementById("contact-form");



        contactForm.addEventListener(

            "submit",

            function(event) {


                event.preventDefault();



                const name =

                    document.getElementById(

                        "name"

                    ).value;



                const email =

                    document.getElementById(

                        "email"

                    ).value;



                const message =

                    document.getElementById(

                        "message"

                    ).value;



                if (

                    !name ||

                    !email ||

                    !message

                ) {


                    alert(

                        "Silakan lengkapi semua data."

                    );


                    return;


                }



                alert(

                    "Terima kasih " +

                    name +

                    "! Pesan Anda berhasil dibuat."

                );



                contactForm.reset();


            }

        );




        /* =================================================

           CURRENT YEAR

        ================================================= */


        document.getElementById(

            "year"

        ).textContent =

            new Date().getFullYear();


    </script>


</body>

</html>

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
NextGen Digital Welcome to WhatsApp chat
Howdy! How can we help you today?
Type here...