Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="theme-color" content="#ffffff">
- <link href="css/main.css" rel="stylesheet">
- <title>Arkanaulia Portofolio</title>
- </head>
- <body class="js-header-main">
- <main class="main">
- <header class="header">
- <div class="header__wrapper">
- <div class="header__burger"><span> </span></div>
- <div class="header__menu"><a class="header__menu-logo" href="index.html">arkanaulia</a>
- <div class="header__menu-exit"></div>
- <div class="header__menu-content">
- <ul class="header__menu-list" id="myMenu">
- <li class="header__menu-item" data-menuanchor="home" data-anchor=".section_home"><a class="header__menu-link" href="#home">Home</a></li>
- <li class="header__menu-item" data-menuanchor="about" data-anchor=".section_about"><a class="header__menu-link" href="#about">About</a></li>
- <li class="header__menu-item" data-menuanchor="experience" data-anchor=".section__experience"><a class="header__menu-link" href="#experience">Experience</a></li>
- <li class="header__menu-item" data-menuanchor="recognition" data-anchor=".section__recognition"><a class="header__menu-link" href="#recognition">Recognition</a></li>
- <li class="header__menu-item" data-menuanchor="contacts" data-anchor=".section__contacts"><a class="header__menu-link" href="#contacts">Contacts </a></li>
- </ul>
- </div>
- </div><a class="header__logo" href="index.html">arkanaulia</a>
- <ul class="header__links">
- <li><a href="https://arkanaulia.wixsite.com/portofolio">Work</a></li>
- <li><a href="#contacts">Contacts</a></li>
- </ul>
- </div>
- </header>
- <div class="wrapper" id="preloader">
- <div class="main-circle">
- <div class="green-circle">
- <div class="brown-circle"></div>
- </div>
- </div>
- </div>
- <div class="nav-widget__wrapper">
- <div class="nav-widget">
- <div class="nav-widget__line">
- <div class="nav-widget__line-active progress-line-js"></div>
- </div>
- <div class="nav-widget__page-number js-page-number">1/6</div>
- </div>
- </div>
- <div id="pagepiling">
- <div class="section section_home pp-scrollable">
- <div class="home js-section" id="home">
- <div class="home-container"><img class="home-image home-image--desktop home__image js-img-home" src="img/main/home/king.gif" alt="Author's photo"><img class="home-image home-image--mobile home__image js-img-home-adapt" src="img/main/home/home.png" alt="Author's photo">
- <div class="home-container__info home-author">
- <h1 class="neue neue-headline1 home-author__name js-author-home">I’m Arkan Aulia</h1>
- <p class="manrope manrope-text2 home-author__description">an informatics student who passionate for Motion//Graphic Design, UI/UX Design, and 3D Stuff</p><a class="home-author__button home-button" href="#contacts">
- <div class="home-button__item"></div></a>
- </div>
- <div class="home-ticker js-ticker">
- <div class="home-ticker__wrapper">
- <p class="neue neue-headline2 home-ticker__text">a UI/UX designer // a 3D Artist // a Motion Designer // a Graphic Designer // a UI/UX designer // a 3D Artist // a Motion Designer // a Graphic Designer // </p>
- <p class="neue neue-headline2 home-ticker__text">a UI/UX designer // a 3D Artist // a Motion Designer // a Graphic Designer // a UI/UX designer // a 3D Artist // a Motion Designer // a Graphic Designer // </p>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="section section__about pp-scrollable">
- <div class="section-main about js-section" id="about">
- <div class="container-main about__container">
- <div class="about__row">
- <div class="about__title neue-headline2-green">My creative journey</div>
- <div class="about__work-info neue-headline3">"Don't be trapped by dogma – which is living with the results of other people's thinking."-Steve Jobs</div>
- <div class="about__img-wrapper"><img class="about__img" src="img/main/about/img1.png" alt="img"></div>
- <div class="about__skills">
- <div class="about__skill-desc about__skill-desc-one manrope-text2">My name is Arkan Aulia Farhan. I'm a 20-year-old informatics student at Institut Teknologi Sepuluh Nopember in Indonesia. I'm currently passionate with art and design, such as UI design, motion design, and everything else. I'm quite active in community and organizations.
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="section section__experience pp-scrollable">
- <div class="section-main experience js-section" id="experience">
- <div class="container-main experience__container">
- <div class="experience__title neue-headline2-green">experience</div>
- <div class="experience__row">
- <div class="experience__resume">
- <div class="experience__resume-text manrope-text2">
- this is a part of my experiences. most of my experience is on the art field, especially motion and 3d.
- </div>
- <a class="experience__resume-button button-primary" href="https://www.linkedin.com/in/arkanaulia/"><span>All experiences</span><img src="img/main/arrow.svg" alt="img"></a>
- </div>
- <div class="experience__history"><a class="experience__card active" href="https://www.paragon-innovation.com/" data-cursor="img/main/experience/cursor1.png">
- <div class="experience__card-top">
- <div class="experience__position neue-headline3">IPL Production Director Intern</div>
- <div class="experience__company neue-text1">Paragon Tech&Innovation</div>
- </div>
- <div class="experience__date manrope-text2">2021 - Present</div></a><a class="experience__card active" href="https://iysre.com/" data-cursor="img/main/experience/cursor2.png">
- <div class="experience__card-top">
- <div class="experience__position neue-headline3">Production Manager</div>
- <div class="experience__company neue-text1">IYSRE 2021</div>
- </div>
- <div class="experience__date manrope-text2">2021 - Present</div></a><a class="experience__card active" href="http://barunastra.its.ac.id/" data-cursor="img/main/experience/cursor3.png">
- <div class="experience__card-top">
- <div class="experience__position neue-headline3">Audiovisual Officers</div>
- <div class="experience__company neue-text1">Barunastra ITS</div>
- </div>
- <div class="experience__date manrope-text2">2020 - Present</div></a><a class="experience__card active" href="https://schematics.its.ac.id/" data-cursor="img/main/experience/cursor4.png">
- <div class="experience__card-top">
- <div class="experience__position neue-headline3">Design, Documentation, Decoration Coordinator</div>
- <div class="experience__company neue-text1">Schematics 2021</div>
- </div>
- <div class="experience__date manrope-text2">2021 - Present</div></a><a class="experience__card active" href="https://www.instagram.com/xdkreativ_/?hl=en" data-cursor="img/main/experience/cursor5.png">
- <div class="experience__card-top">
- <div class="experience__position neue-headline3">3D Designer Intern</div>
- <div class="experience__company neue-text1">XD Collective</div>
- </div>
- <div class="experience__date manrope-text2">2020</div></a><a class="experience__card active" href="https://sxceosleague.com/" data-cursor="img/main/experience/cursor6.png">
- <div class="experience__card-top">
- <div class="experience__position neue-headline3">UI Designer</div>
- <div class="experience__company neue-text1">StudentxCEOs League</div>
- </div>
- <div class="experience__date manrope-text2">2021</div></a></div>
- </div>
- </div>
- </div>
- </div>
- <div class="section section__recognition pp-scrollable">
- <div class="section-main recognition js-section" id="recognition">
- <div class="container-main recognition__container">
- <div class="recognition__row">
- <div class="recognition__title neue-headline2-green">Honors and Awards</div>
- <div class="recognition__inner">
- <div class="recognition__img-wrapper">
- <picture class="recognition__img">
- <source class="recognition__img" srcset="img/main/recognition/img1.png" media="(min-width:767px)"><img class="recognition__img" src="img/main/recognition/img1-adapt.png" alt="img">
- </picture>
- </div>
- <div class="recognition__resource">
- <ul class="recognition__resource-list manrope-text2">
- <li class="recognition__resource-list-title neue-headline3"><span>National</span></li>
- <li class="recognition__resource-list-item"><a href="https://kkctbn2020.umm.ac.id/">1st Place Kontes Kapal Cepat Tak Berawak Nasional (KKCTBN) 2020</a></li>
- <li class="recognition__resource-list-item"><a href="https://codig.mercubuana.ac.id/">2nd Place - UX Design - CODIG 3.0</a></li>
- <li class="recognition__resource-list-item"><a href="https://gemastik.kemdikbud.go.id/">Finalist - Desain Pengalaman Pengguna - GEMASTIK 2020</a></li>
- </ul>
- <ul class="recognition__resource-list manrope-text2">
- <li class="recognition__resource-list-title neue-headline3"><span>International</span></li>
- <li class="recognition__resource-list-item"><a href="https://roboboat.org/programs/2021/">1st Place - Hull Design Skills Video - International Roboboat Competition (IRC) 2021</a></li>
- <li class="recognition__resource-list-item"><a href="https://roboboat.org/programs/2021/">1st Place - Team's Website - International Roboboat Competition (IRC) 2021</a></li>
- <li class="recognition__resource-list-item"><a href="https://roboboat.org/programs/2021/">2nd Place - Technical Design Report - International Roboboat Competition (IRC) 2021</a></li>
- <li class="recognition__resource-list-item"><a href="https://sis.binus.ac.id/bitprotoathon/">Top 10 - Web Design - Proto-a-thon International Prototype Design Competition 2021</a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="section section__contacts pp-scrollable">
- <div class="section-main contact js-section" id="contact">
- <div class="contacts__private neue-text2">© 2021. Arkan Aulia.</div>
- <div class="container-main contacts__container">
- <div class="contacts__row">
- <div class="contacts__column">
- <div class="contacts__work">
- <div class="contacts__work-text manrope-text2">Feel free to reach out to me if you have any questions or comments about the services I offer. Also, you could always just send me a friendly hello.</div>
- <div class="contacts__button-wrapper"><a class="contacts__button" href="#"><svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M200 100C200 155.228 155.228 200 100 200C44.7715 200 0 155.228 0 100C0 44.7715 44.7715 0 100 0C155.228 0 200 44.7715 200 100Z" fill="#99E836"/>
- <path d="M180.205 102.224L179.876 104.243L164.665 104.839L164.573 105.403L178.824 110.692L178.108 115.078L162.916 115.565L162.824 116.129L177.057 121.527L176.727 123.546L161.929 117.923L162.638 113.58L177.834 113.072L177.926 112.507L163.679 107.197L164.387 102.854L180.205 102.224Z" fill="#0D0D0C"/>
- <path d="M167.815 124.737C169.895 125.757 171.316 127.19 172.078 129.034C172.84 130.877 172.721 132.82 171.72 134.861C170.725 136.889 169.265 138.166 167.341 138.692C165.417 139.219 163.414 138.972 161.334 137.951C159.24 136.924 157.812 135.489 157.05 133.645C156.288 131.801 156.405 129.865 157.399 127.837C158.4 125.796 159.863 124.513 161.787 123.986C163.712 123.46 165.721 123.71 167.815 124.737ZM166.875 126.653C165.202 125.833 163.669 125.579 162.274 125.891C160.879 126.204 159.808 127.124 159.058 128.651C158.309 130.179 158.241 131.583 158.854 132.864C159.461 134.158 160.601 135.215 162.273 136.035C163.932 136.849 165.459 137.1 166.854 136.787C168.242 136.488 169.311 135.575 170.06 134.047C170.81 132.52 170.881 131.109 170.274 129.815C169.667 128.521 168.534 127.467 166.875 126.653Z" fill="#0D0D0C"/>
- <path d="M153.06 136.26L165.014 146.143L161.635 150.229C160.345 151.789 159.121 152.775 157.962 153.187C156.794 153.61 155.582 153.303 154.328 152.266C152.723 150.939 152.449 149.371 153.507 147.562L153.066 147.198L151.832 148.69C151.253 149.391 150.624 149.461 149.946 148.9L145.588 145.297L146.948 143.652L151.628 147.522L156.38 141.774L151.7 137.905L153.06 136.26ZM157.804 142.951L155.786 145.393C155.412 145.845 155.124 146.216 154.922 146.506C154.711 146.807 154.529 147.132 154.374 147.48C154.21 147.839 154.142 148.163 154.169 148.453C154.197 148.742 154.304 149.049 154.491 149.375C154.69 149.711 154.992 150.046 155.399 150.383C155.806 150.719 156.187 150.949 156.543 151.071C156.898 151.194 157.22 151.242 157.51 151.214C157.799 151.187 158.104 151.059 158.426 150.83C158.739 150.613 159.024 150.373 159.28 150.109C159.527 149.856 159.837 149.504 160.211 149.052L162.23 146.61L157.804 142.951Z" fill="#0D0D0C"/>
- <path d="M143.395 166.952L146.126 155.053L133.909 154.681L136.381 152.77L146.361 153.091L142.472 148.061L144.161 146.756L153.647 159.027L151.958 160.332L148.07 155.302L145.866 165.041L143.395 166.952Z" fill="#0D0D0C"/>
- <path d="M133.303 172.999L131.346 173.594L124.105 160.204L123.558 160.371L125.094 175.493L120.842 176.785L113.706 163.363L113.159 163.53L114.59 178.684L112.632 179.279L111.155 163.518L115.365 162.239L122.521 175.654L123.069 175.487L121.554 160.359L125.764 159.08L133.303 172.999Z" fill="#0D0D0C"/>
- <path d="M98.8661 177.781L102.339 177.634L101.838 165.83L98.3647 165.978L98.2863 164.132L107.364 163.746L107.443 165.592L103.97 165.74L104.471 177.543L107.944 177.396L108.022 179.242L98.9445 179.628L98.8661 177.781Z" fill="#0D0D0C"/>
- <path d="M81.6968 177.656L81.9733 175.828L87.2374 176.625L89.2815 163.117L91.3915 163.436L89.3474 176.944L94.6114 177.741L94.3349 179.568L81.6968 177.656Z" fill="#0D0D0C"/>
- <path d="M66.5361 172.267L64.5351 171.464L70.309 157.069L72.31 157.872L69.8121 164.1L78.0408 167.4L80.5388 161.172L82.5194 161.967L76.7455 176.362L74.7649 175.568L77.3529 169.115L69.1241 165.815L66.5361 172.267Z" fill="#0D0D0C"/>
- <path d="M63.4754 153.297L53.0383 164.77L49.8812 161.898L56.9731 148.185L56.5337 147.785L43.5508 156.139L40.3937 153.267L50.8308 141.794L52.4094 143.23L43.3491 153.19L42.1116 154.027L42.5347 154.412L55.5827 146.117L58.7398 148.989L51.6967 162.747L52.1361 163.146L52.8366 161.821L61.8969 151.861L63.4754 153.297Z" fill="#0D0D0C"/>
- <path d="M49.5392 139.667L36.6714 148.326L31.1566 140.131L32.6898 139.099L37.0132 145.524L41.1382 142.748L37.4289 137.236L38.9621 136.205L42.6714 141.717L46.8146 138.929L42.4912 132.504L44.0244 131.472L49.5392 139.667Z" fill="#0D0D0C"/>
- <path d="M19.8508 95.9748L20.2265 93.9635L35.4463 93.7178L35.5513 93.1555L21.4261 87.5406L22.242 83.1722L37.4417 83.0345L37.5467 82.4722L23.4417 76.7492L23.8174 74.738L38.482 80.6998L37.6742 85.025L22.4705 85.1843L22.3655 85.7466L36.4867 91.3831L35.6788 95.7083L19.8508 95.9748Z" fill="#0D0D0C"/>
- <path d="M32.6772 73.8935C30.6199 72.827 29.2308 71.3636 28.5101 69.5032C27.7894 67.6429 27.9522 65.7035 28.9983 63.6852C30.0378 61.68 31.5253 60.4356 33.461 59.9521C35.3966 59.4687 37.3931 59.7602 39.4505 60.8266C41.5208 61.8998 42.9164 63.3665 43.6371 65.2269C44.3578 67.0873 44.1984 69.0201 43.159 71.0254C42.1128 73.0437 40.6219 74.2946 38.6863 74.778C36.7506 75.2615 34.7476 74.9666 32.6772 73.8935ZM33.6593 71.9989C35.313 72.8561 36.8405 73.144 38.2419 72.8627C39.6432 72.5813 40.7354 71.6854 41.5183 70.175C42.3013 68.6645 42.4004 67.2621 41.8158 65.9679C41.2379 64.6606 40.1221 63.5784 38.4684 62.7212C36.8277 61.8707 35.3067 61.5862 33.9053 61.8675C32.5108 62.1358 31.422 63.0252 30.639 64.5357C29.8561 66.0462 29.7536 67.455 30.3314 68.7623C30.9093 70.0696 32.0186 71.1484 33.6593 71.9989Z" fill="#0D0D0C"/>
- <path d="M47.5666 62.7874L35.8318 52.6457L39.2987 48.6342C40.6222 47.1028 41.8677 46.1439 43.0354 45.7573C44.2126 45.3596 45.4171 45.693 46.6489 46.7576C48.2246 48.1194 48.464 49.6929 47.367 51.4781L47.7997 51.8521L49.0656 50.3874C49.6602 49.6994 50.2904 49.6431 50.9562 50.2185L55.234 53.9156L53.8386 55.5301L49.2446 51.5597L44.3679 57.2024L48.962 61.1728L47.5666 62.7874ZM42.9698 55.9941L45.0413 53.5972C45.4249 53.1533 45.7207 52.7886 45.9286 52.5031C46.1462 52.2065 46.336 51.8859 46.4981 51.5414C46.6698 51.1857 46.7451 50.8631 46.724 50.5735C46.7029 50.2839 46.6023 49.974 46.4223 49.644C46.2312 49.3044 45.9359 48.9619 45.5364 48.6167C45.137 48.2714 44.7609 48.0337 44.4083 47.9034C44.0556 47.7731 43.7345 47.7185 43.4449 47.7396C43.1553 47.7606 42.8469 47.8819 42.5199 48.1033C42.2025 48.3136 41.9128 48.5478 41.6508 48.8061C41.3985 49.0532 41.0805 49.3987 40.6969 49.8426L38.6254 52.2395L42.9698 55.9941Z" fill="#0D0D0C"/>
- <path d="M57.9619 32.194L54.9713 44.0305L67.177 44.6696L64.6641 46.5257L54.693 45.9865L58.4706 51.1006L56.754 52.3685L47.5389 39.8928L49.2555 38.625L53.033 43.7391L55.449 34.0501L57.9619 32.194Z" fill="#0D0D0C"/>
- <path d="M67.939 26.3803L69.9097 25.8301L76.8443 39.3806L77.3953 39.2268L76.203 24.0733L80.4834 22.8785L87.3121 36.4585L87.8631 36.3047L86.7768 21.1217L88.7475 20.5716L89.8663 36.3622L85.6283 37.5452L78.7784 23.9711L78.2275 24.1249L79.3985 39.2843L75.1605 40.4673L67.939 26.3803Z" fill="#0D0D0C"/>
- <path d="M102.881 22.2676L99.4053 22.3347L99.6333 34.1465L103.109 34.0794L103.144 35.9271L94.06 36.1024L94.0243 34.2547L97.4997 34.1877L97.2717 22.3759L93.7963 22.4429L93.7607 20.5953L102.845 20.4199L102.881 22.2676Z" fill="#0D0D0C"/>
- <path d="M119.667 22.7117L119.349 24.532L114.104 23.6147L111.75 37.0723L109.648 36.7046L112.002 23.247L106.758 22.3296L107.076 20.5092L119.667 22.7117Z" fill="#0D0D0C"/>
- <path d="M134.811 28.392L136.793 29.2393L130.698 43.5014L128.715 42.6541L131.352 36.484L123.2 32.9998L120.563 39.1699L118.6 38.3313L124.696 24.0691L126.658 24.9078L123.926 31.3005L132.079 34.7847L134.811 28.392Z" fill="#0D0D0C"/>
- <path d="M137.483 47.3338L148.167 36.0912L151.261 39.0314L143.872 52.5866L144.303 52.9958L157.465 44.9269L160.558 47.8672L149.873 59.1097L148.327 57.6396L157.602 47.8801L158.857 47.0701L158.443 46.6761L145.217 54.6843L142.123 51.7441L149.465 38.1434L149.034 37.7342L148.305 39.0443L139.03 48.8039L137.483 47.3338Z" fill="#0D0D0C"/>
- <path d="M151.371 61.5057L164.457 53.1796L169.759 61.5137L168.2 62.5057L164.043 55.9721L159.848 58.6412L163.415 64.2467L161.856 65.2388L158.289 59.6332L154.075 62.3141L158.233 68.8477L156.673 69.8397L151.371 61.5057Z" fill="#0D0D0C"/>
- <circle cx="170.735" cy="82.3784" r="3.5" fill="#0D0D0C"/>
- <circle cx="29.1455" cy="116.176" r="3.5" fill="#0D0D0C"/>
- </svg>
- </a></div>
- </div>
- </div>
- <div class="contacts__column">
- <div class="contacts__title neue-headline2-green">how to reach me</div>
- <div class="contacts__inner">
- <div class="contacts__wrapper">
- <div class="contacts__contacts">
- <div class="contacts__contact">
- <div class="contacts__contact-title manrope-text2">based on</div>
- <div class="contacts__contact-item contacts__adress neue-headline3">Bekasi<br/> Jakarta<br/> Surabaya<br/></div>
- <br/><br/>
- </div>
- </div>
- <div class="contacts__contact">
- <div class="contacts__contact-title manrope-text2">Email</div><a class="contacts__contact-item contacts__mail neue-headline3" href="mailto:#">[email protected]</a>
- </div>
- </div>
- <ul class="contacts__follow">
- <li class="contacts__contact-title">
- <div class="manrope-text2">Follow me</div>
- </li>
- <li class="contacts__follow-link-wrapper"><a class="contacts__follow-link neue-headline3" href="https://www.instagram.com/arkanaulia/">Instagram</a></li>
- <li class="contacts__follow-link-wrapper"><a class="contacts__follow-link neue-headline3" href="https://www.linkedin.com/in/arkanaulia/">LinkedIn</a></li>
- <li class="contacts__follow-link-wrapper"><a class="contacts__follow-link neue-headline3" href="https://github.com/arkanaulia">Github</a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </main>
- <script src="js/main.js"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment