Tugas 1 - CV Web
Disini saya membuat Portofolio dengan menggunakan HTML dan CSS, di CSS saya ini dibantu dengan framework tailwind. Isi konten dari CV saya ada tentang diri saya sendiri, edukasi yang telah saya tempuh, pengalaman saya dalam hal berorganisasi dan proyekan, proyek, dan kontak yang bisa dihubungi. Link Website : Web CV
Source Code :
HTML :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CV Ezhie</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> | |
| </head> | |
| <body class="bg-primary"> | |
| <nav> | |
| <div class="flex flex-row justify-between items-center mt-10 font-main max-w-7xl mx-auto text-secondary"> | |
| <h1 class="text-4xl font-medium">Ezhie</h1> | |
| <div class="flex space-x-10"> | |
| <button> | |
| <h2 class="text-base">About Me</h2> | |
| </button> | |
| <button> | |
| <h2 class="text-base">Education</h2> | |
| </button> | |
| <button> | |
| <h2 class="text-base">Projects</h2> | |
| </button> | |
| <button> | |
| <h2 class="text-base">Experience</h2> | |
| </button> | |
| <button> | |
| <h2 class="text-base">Contact</h2> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Welcome --> | |
| <div data-aos="fade-right" data-aos-duration="1000" class="mt-44 font-main max-w-7xl mx-auto text-secondary"> | |
| <div class="w-full"> | |
| <div class="text-3xl pb-2 border-b w-full"> | |
| Welcome | |
| </div> | |
| <div class="w-1/2 text-6xl pt-6"> | |
| Hello There! | |
| </div> | |
| <div class="flex justify-center pt-20"> | |
| <div class="rounded-full w-72 h-72 overflow-hidden"> | |
| <img src="pictures/Ezhie.jpg" alt=""> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center pt-6 text-justify"> | |
| <div class="w-2/5 text-base"> | |
| I'm Ezhie Undergraduate Informatics Student at Institut Teknologi Sepuluh Nopember. | |
| I'm fueled by a passion for being a front end web developer, still continously | |
| improving my skills. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Education --> | |
| <div data-aos="fade-right" data-aos-duration="1000" class="mt-32 pt-20 pb-36 font-main bg-secondary text-primary"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-3xl border-b pb-2 border-primary"> | |
| Education | |
| </div> | |
| <div class="flex justify-center items-center space-x-96 mt-36"> | |
| <div> | |
| <div class="w-36 pb-4"> | |
| <img src="pictures/logo-vidatra.png" alt=""> | |
| </div> | |
| <div class="flex justify-center font-semibold"> | |
| 2016 - 2019 | |
| </div> | |
| </div> | |
| <div> | |
| <div class="w-56 pb-4"> | |
| <img src="pictures/Logo-ITS.png" alt=""> | |
| </div> | |
| <div class="flex justify-center font-semibold"> | |
| 2019 - Now | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Experience --> | |
| <div data-aos="fade-right" data-aos-duration="1000" class="my-24 font-main max-w-7xl mx-auto text-secondary"> | |
| <div class=""> | |
| <div class="text-3xl border-b pb-2"> | |
| Experience | |
| </div> | |
| <div class="flex justify-around"> | |
| <div class="pt-10"> | |
| <div class="text-lg pb-4"> | |
| Organization/Committee | |
| </div> | |
| <ul class="pl-10 space-y-4"> | |
| <li> | |
| Security Division in Faculty Inaguration Night (2019) | |
| </li> | |
| <li> | |
| Security Division in Regional ILITS (2020) | |
| </li> | |
| <li> | |
| Liason Officer TC CUP (2020) | |
| </li> | |
| <li> | |
| Staff of PSDU in VSNMC (2020 - now) | |
| </li> | |
| <li> | |
| Staff of KDPM in HMTC (2021 - now) | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="pt-10"> | |
| <div class="text-lg pb-4"> | |
| Projects | |
| </div> | |
| <ul class="pl-10 space-y-4"> | |
| <li> | |
| Cerebrum - Project Manager (2021) | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects --> | |
| <div data-aos="fade-right" data-aos-duration="1000" class="mt-32 pt-20 pb-36 font-main bg-secondary text-primary"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-3xl border-b border-black pb-2"> | |
| Projects | |
| </div> | |
| <div class="flex justify-center items-center mx-auto w-1/2 my-20 pb-4"> | |
| <div> | |
| <img class="pb-6 border-b-2 border-black" src="pictures/cerebrum.jpg" alt=""> | |
| <div class="text-2xl pt-4 font-medium"> | |
| Cerebrum | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact --> | |
| <div class="my-24 font-main max-w-7xl mx-auto text-secondary"> | |
| <div class=""> | |
| <div class="border-b text-3xl"> | |
| Contact | |
| </div> | |
| <div class="flex items-center space-x-10 pt-4"> | |
| <img class="w-6" src="pictures/email.png" alt=""> | |
| <div class="font-medium text-xl"> | |
| ezie2001@gmail.com | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-10 pt-4"> | |
| <img class="w-6" src="pictures/Phone.png" alt=""> | |
| <div class="font-medium text-xl"> | |
| 08xxxxxxxx | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/aos@next/dist/aos.js"></script> | |
| <script> | |
| AOS.init(); | |
| </script> | |
| </body> | |
| </html> |
Comments
Post a Comment