<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢨⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⣠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⣤⠤⢤⣀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠐⣿⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⠴⠒⢋⣉⣀⣠⣄⣀⣈⡇
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠄⠀⠀⠀⠀⠀⠀⠀⠀⣸⡆⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⣠⣴⣾⣯⠴⠚⠉⠉⠀⠀⠀⠀⣤⠏⣿
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⣄⠀⠀⠀⠀⠀⠀⡿⡇⠁⠀⠀⠀⠀⠀⠀⠀⡀⠂⠀⠀⠀⠀⣠⣴⡿⠿⢛⠁⠁⣸⠀⠀⠀⠀⠀⣤⣾⠵⠚⠁
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠱⢄⠀⠀⣠⠀⡇⢧⠀⠀⠀⠀⠀⠀⠖⠁⠀⠀⠀⣠⣴⠿⠋⠁⠀⠀⠀⠀⠘⣿⠀⣀⡠⠞⠛⠁⠂⠁⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡈⣻⡦⣞⡿⣷⠸⣄⣠⢶⡟⠁⠀⠀⠀⣀⣴⠟⠋⠁⠀⠀⠀⠀⠐⠠⡤⣾⣙⣶⡶⠃⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣂⡷⠰⣔⣾⣖⣾⡷⢿⣀⣀⣀⣤⢾⣋⠁⠀⠀⠀⣀⢀⣀⣀⣀⣀⠀⢀⢿⠑⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠠⡦⠴⠴⠤⠦⠤⠤⠤⠤⠤⠴⠶⢾⣽⣙⠒⢺⣿⣿⣿⣿⢾⠶⣧⡼⢏⠑⠚⠋⠉⠉⡉⡉⠉⠉⠹⠈⠁⠉⠀⠨⢾⡂⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠂⠀⠀⠀⠂⠐⠀⠀⠀⠈⣇⡿⢯⢻⣟⣇⣷⣞⡛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣠⣆⠀⠀⠀⠀⢠⡷⡛⣛⣼⣿⠟⢙⣧⠇⡄⠀⠀⠀⠀⠀⠀⠰⡆⠀⠀⠀⠀⢠⣾⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣴⢶⠏⠉⠀⠀⠀⠀⠀⠿⢠⣴⡟⡗⡾⡒⡿⠯⢏⡅⠀⠀⠀⠀⣀⢀⣠⣧⣀⣀⠀⠀⠀⠚⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣠⢴⣿⠟⠁⠀⠀⠀⠀⠀⠀⠀⣠⣷⢿⣫⡽⡿⠿⠗⢷⠀⠀⠑⣗⡀⠀⠀⠀⠈⠙⣿⢭⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢀⡴⢏⡵⠛⠀⠀⠀⠀⠀⠀⠀⣀⣴⠞⠛⠀⠰⡟⣿⠀⡌⠀⠀⠀⠀⠀⠀⠁⠢⡀⠀⠀⠂⢿⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣀⣼⠛⣲⡏⠁⠀⠀⠀⠀⠀⢀⣠⡾⠋⠉⠀⠀⠀⠀⣧⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠣⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⡴⠟⠀⢰⡯⠄⠀⠀⠀⠀⣠⢴⠟⠉⠀⠀⠀⠀⠀⠀⠀⠘⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡾⠁⠁⠀⠘⠧⠤⢤⣤⠶⠏⠙⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠘⣇⠂⢀⣀⣀⠤⠞⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠈⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Primary Meta Tags -->
    <title>KiSI - Portfolio</title>
    <meta name="title" content="KiSI - Portfolio" />
    <meta name="description" content="A portfolio by Bagas Dwi. I love anything related to art, not to be the best but to be unique." />
    <meta name="keywords" content="kisi,kisidev,kisiisadev,sketch,design,develop">

    <!-- Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://kisi.is-a.dev" />
    <meta property="og:title" content="KiSI - Portfolio" />
    <meta property="og:description" content="A portfolio by Bagas Dwi. I love anything related to art, not to be the best but to be unique." />
    <meta property="og:image" content="Assets/Cover.avif" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="http://kisi.is-a.dev" />
    <meta property="twitter:title" content="KiSI - Portfolio" />
    <meta property="twitter:description" content="A portfolio by Bagas Dwi. I love anything related to art, not to be the best but to be unique." />
    <meta property="twitter:image" content="Assets/Cover.avif" />

    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="Assets/icon.png">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>
<body>

    <section class="hero" id="home">
        <div class="hero-constructor">
            <div class="con-hero">
                <h1>kisi<br class="br">.labs</h1>
                <div class="passion">
                    <h2>Illustration</h2>
                    <h2>Front End</h2>
                    <h2>Visual Design</h2>
                </div>
            </div>
            <div class="con-hero-det">
                <p class="overview">I'm passionate about crafting designs that are both visually appealing and strategically effective, transforming random ideas into compelling visuals.</p>
            </div>
        </div>
        
    </section>

    <nav>
        <div class="con-nav">
            <img src="Assets/icon.png" alt="" srcset="">
            <div class="nav-menu">
                <ul>
                    <li>
                        <a href="#home" class="active">Home</a>
                        <a href="#works">Works</a>
                        <a href="#about">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <section class="works" id="works">
        <div class="works-constructor">
            <div class="con-works">
                <h3 class="sub-title">Recent Works</h3>
                <div class="showcase">
                    <div class="gallery" data-tilt onclick="window.open('https://github.com/imkisi/Kotlin-study-archive', '_blank');"">
                        <img src="Assets/ui1.webp" alt="" srcset="" data-aos="fade-up" data-aos-delay="200">
                    </div>
                    <div class="gallery" data-tilt onclick="window.open('https://vgen.co/KiSI/portfolio', '_blank');">
                        <img src="Assets/illust1.webp" alt="" srcset="" data-aos="fade-up" data-aos-delay="300">
                    </div>
                    <div class="gallery" data-tilt onclick="window.open('https://www.figma.com/design/dtkDUINpsOKLPfU88JbQKc/Solitude---smart-notes-and-todo?node-id=0-1&t=Mu2BIt4DN27Lnr5h-1', '_blank');">
                        <img src="Assets/ui2.webp" alt="" srcset="" data-aos="fade-up" data-aos-delay="400">
                    </div>
                    <div class="gallery" data-tilt onclick="window.open('https://vgen.co/KiSI/portfolio', '_blank');">
                        <img src="Assets/illust2.webp" alt="" srcset="" data-aos="fade-up" data-aos-delay="200">
                    </div>
                    <div class="gallery" data-tilt onclick="window.open('https://www.instagram.com/wiseline.id/', '_blank');">
                        <img src="Assets/d1.webp" alt="" srcset="" data-aos="fade-up" data-aos-delay="300">
                    </div>
                    <div class="gallery" data-tilt onclick="window.open('https://vgen.co/KiSI/portfolio', '_blank');">
                        <img src="Assets/illust3.webp" alt="" srcset="" data-aos="fade-up" data-aos-delay="400">
                    </div>
                    <div class="gallery" data-tilt onclick="window.open('https://www.instagram.com/wiseline.id/', '_blank');">
                        <img src="Assets/d2.webp" alt="" srcset="" data-aos="fade-up" data-aos-delay="400">
                    </div>
                    <div class="gallery" data-tilt onclick="window.open('https://vgen.co/KiSI/portfolio', '_blank');">
                        <img src="Assets/illust4.webp" alt="" srcset="" data-aos="fade-up" data-aos-delay="400">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about" id="about">
        <div class="about-constructor">
            <div class="con-about">
                <div class="profile">
                    <img src="Assets/star.png" alt="" srcset="">
                    <h3>I am <span class="min">Bagas Dwi Anggoro</span> known as <img class="ext" src="Assets/icon.png"> KiSI, a computer science <span class="sub">&lt;/&gt;</span> student specializing in <span class="del a">illustration</span>, <span class="del b">front-end</span> development, <span class="del c">motion</span> graphics, and <span class="del d">visual design</span>. I am driven by a <span class="elf">desire to expand my knowledge <img class="def" src="Assets/path.png"> and explore creative solutions.</span></h3>
                </div>
            </div>
            <div class="detail-parent">
                <div class="affiliation">
                    <h3>Affiliation</h3>
                    <div class="wrapper">
                        <div class="instance">
                            <p>NTC Department</p>
                            <div class="role">
                                <h4>Illustrator</h4>
                                <h4 class="yr">2023 - Present</h4>
                            </div>
                        </div>
                        <div class="instance">
                            <p>Neoteric HQ</p>
                            <div class="role">
                                <h4>Illustrator</h4>
                                <h4 class="yr">2023 - Present</h4>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="experience">
                    <h3>Experience</h3>
                    <div class="wrapper">
                        <div class="instance">
                            <p>Wiseline.id</p>
                            <div class="role">
                                <h4>Graphic & Motion Designer</h4>
                                <h4 class="yr">2024 - Present</h4>
                            </div>
                        </div>
                        <div class="instance">
                            <p>Mahakarya Studio</p>
                            <div class="role">
                                <h4>Illustrator</h4>
                                <h4 class="yr">June 2025</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <svg _ngcontent-pnb-c22="" aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><pattern _ngcontent-pnb-c22="" id="a" width="91" height="8" patternUnits="userSpaceOnUse"><g _ngcontent-pnb-c22="" clip-path="url(#clip0_2426_11367)"><path _ngcontent-pnb-c22="" d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0" stroke="#E1E3E1" stroke-linecap="square"></path></g></pattern><rect _ngcontent-pnb-c22="" width="100%" height="100%" fill="url(#a)"></rect></svg>

    <footer>
        <div class="foo-constructor">
            <div class="foo-content">
                <div class="right">
                    <div class="g">
                        
                    <h3>Get in Touch</h3>
                    <p>labs.kisi@gmail.com</p>
                    </div>
                    <div class="h">
                        <p>© 2025 KiSI. All right reserved</p>
                    </div>
                    <div class="i">
                        <a onclick="window.open('https://web.facebook.com/bagas.anggoro.942/', '_blank');">
                            <img src="Assets/Facebook.png" alt="facebok" srcset="">
                        </a>
                        <a onclick="window.open('https://dribbble.com/kisi-si', '_blank');">
                            <img src="Assets/Dribbble.png" alt="dribbble" srcset="">
                        </a>
                        <a onclick="window.open('https://github.com/imkisi', '_blank');">
                            <img src="Assets/Github.png" alt="github" srcset="">
                        </a>
                        <a onclick="window.open('https://www.behance.net/bagasanggoro1', '_blank');">
                            <img src="Assets/Behance.png" alt="behance" srcset="">
                        </a>
                        <a onclick="window.open('https://vgen.co/KiSI/portfolio', '_blank');">
                            <img src="Assets/Vgen.png" alt="vgen" srcset="">
                        </a>
                    </div>
                </div>
                <div class="left">

                </div>
            </div>
        </div>
    </footer>
    
    <script type="text/javascript" src="vanilla-tilt.min.js"></script>
    <script>
        AOS.init();
        window.sr = ScrollReveal({ reset: true });
    </script>
</body>
</html>