Gerald Elroy CV Website

TUGAS 1 PWEB - A

Membuat CV Website


Perkenalkan, nama saya Gerald Elroy Van Ryan. Saya merupakan mahasiswa Institut Teknologi Sepuluh Nopember jurusan Teknik Informatika angkatan 2019.

Pada penugasan kali ini, saya membuat CV Website menggunakan HTML, CSS, dan JS. Website ini masih berbentuk static. Web ini memuat pengelanan singkat akan diri saya dan pendidikan yang pernah saya tempuh.

Tampilan depan dari Website saya :



Atau bisa langsung melalui situs ini : https://geraldelroy.netlify.app/

Source Code HTML :

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Gerald Elroy Van Ryan</title>
  8.     <link rel="stylesheet" href="styles.css"/>
  9.     <script src="script.js"></script>
  10.   </head>
  11.  
  12.   <body>
  13.     <!--Landing Page-->
  14.  
  15.     <section class="landingpage">
  16.       <div class="navbar">
  17.         <ul>
  18.           <li><a href="#start">Profile</a></li>
  19.           <li><a href="#start_two">Education</a></li>
  20.           <!-- <li><a href="#experience">Experience</a></li> -->
  21.           <!-- <li><a href="#hobby">Hobby</a></li> -->
  22.           <!-- <li><a href="#social">Social Media</a></li> -->
  23.         </ul>
  24.       </div>
  25.  
  26.       <div class="welcome">
  27.         <h1>Hello,</h1>
  28.         <h2>I'm Gerald Elroy Van Ryan</h2>
  29.         <hr>
  30.         <p><a href="#start">Start my journey</a></p>
  31.       </div>
  32.     </section>
  33.  
  34.     <!--Profile-->
  35.  
  36.     <section class="profile" id="start">
  37.       <div class="biography">
  38.         <img src="images/me.jpeg" alt="Gerald Elroy Van Ryan" id="myImg">
  39.         <div id="myModal" class="modal">
  40.           <span class="close">&times;</span>
  41.           <img class="modal-content" id="img01">
  42.           <div id="caption"></div>
  43.         </div>
  44.         <div class="content">
  45.           <p class="caption">My Profile</p>
  46.           <p class="caption_two">
  47.             My name is Gerald Elroy Van Ryan.
  48.             <br>
  49.             I'm studying Informatics at
  50.             Institut Teknologi Sepuluh Nopember, Surabaya.
  51.             <br>
  52.             I'm a hard working and ambitious person.
  53.             <br> I really interested to learn
  54.             more about web programming and mobile-app programming.
  55.             <br>
  56.              I also talented in music, especially playing piano. Hope you enjoy it!
  57.           </p>
  58.         </div>
  59.       </div>
  60.     </section>
  61.  
  62.     <!--Education-->
  63.  
  64.     <section class="education" id="start_two">
  65.       <div class="educationn">
  66.         <h1>EDUCATION</h1>
  67.         <div class="school">
  68.           <div class="ipeka">
  69.             <p class="el">
  70.               Elementary School
  71.               <br>
  72.               &
  73.              <br>
  74.              Junior High School
  75.            </p>
  76.            <img src="images/education/ipeka.png" alt="">
  77.            <div class="content_ipeka">
  78.              <div class="sd">
  79.                <p>SDK IPEKA Grand Wisata</p>
  80.                <p>2007-2013</p><br>
  81.                <hr align="center">
  82.              </div>
  83.              <div class="smp">
  84.                <p>SMPK IPEKA Grand Wisata</p>
  85.                <p>2013-2016</p>
  86.              </div>
  87.            </div>
  88.          </div>
  89.          <div class="penabur">
  90.            <p class="elo">
  91.              Senior High School
  92.            </p>
  93.            <img src="images/education/penabur.png" alt="">
  94.            <div class="content_penabur">
  95.              <p>SMAK Penabur Summarecon Bekasi</p>
  96.              <p>2016-2019</p>
  97.            </div>
  98.          </div>
  99.          <div class="its">
  100.            <p class="elo">
  101.              Undergraduate
  102.            </p>
  103.            <img src="images/education/its2.png" alt="">
  104.            <div class="content_its">
  105.              <p>Institut Teknologi Sepuluh Nopember</p>
  106.              <p>2019-present</p>
  107.            </div>
  108.          </div>
  109.        </div>
  110.      </div>
  111.    </section>
  112.  
  113. </html>

Source Code CSS :


  1. @font-face {
  2.   font-family: SecularOne;
  3.   src: url("../fonts/SecularOne-Regular.ttf");
  4. }
  5.  
  6. @font-face {
  7.   font-family: MontserratSubrayada;
  8.   src: url("../fonts/MontserratSubrayada-Regular.ttf");
  9. }
  10.  
  11. @font-face {
  12.   font-family: Montserrat;
  13.   src: url("../fonts/Montserrat-Medium.ttf");
  14. }
  15.  
  16. @font-face {
  17.   font-family: SongMyung;
  18.   src: url("../fonts/SongMyung-Regular.ttf");
  19. }
  20.  
  21. @keyframes zoom {
  22.   from {
  23.     transform: scale(0.1);
  24.   }
  25.   to {
  26.     transform: scale(1);
  27.   }
  28. }
  29.  
  30. /* The Close Button */
  31. .close {
  32.   position: absolute;
  33.   top: 15px;
  34.   right: 35px;
  35.   color: #f1f1f1;
  36.   font-size: 40px;
  37.   font-weight: bold;
  38.   transition: 0.3s;
  39. }
  40.  
  41. .close:hover,
  42. .close:focus {
  43.   color: #bbb;
  44.   text-decoration: none;
  45.   cursor: pointer;
  46. }
  47.  
  48. /* 100% Image Width on Smaller Screens */
  49. @media only screen and (max-width: 700px) {
  50.   .modal-content {
  51.     width: 100%;
  52.   }
  53. }
  54.  
  55. /* The Modal (background) */
  56. .modal {
  57.   display: none; /* Hidden by default */
  58.   position: fixed; /* Stay in place */
  59.   z-index: 1; /* Sit on top */
  60.   padding-top: 100px; /* Location of the box */
  61.   left: 0;
  62.   top: 0;
  63.   width: 100%; /* Full width */
  64.   height: 100%; /* Full height */
  65.   overflow: auto; /* Enable scroll if needed */
  66.   background-color: rgb(0, 0, 0); /* Fallback color */
  67.   background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
  68. }
  69.  
  70. /* Modal Content (image) */
  71. .modal-content {
  72.   margin: auto;
  73.   display: block;
  74.   width: 80%;
  75.   max-width: 700px;
  76. }
  77.  
  78. /* Caption of Modal Image */
  79. #caption {
  80.   margin: auto;
  81.   display: block;
  82.   width: 80%;
  83.   max-width: 700px;
  84.   text-align: center;
  85.   color: #ccc;
  86.   padding: 10px 0;
  87.   height: 150px;
  88. }
  89.  
  90. /* Add Animation */
  91. .modal-content,
  92. #caption {
  93.   animation-name: zoom;
  94.   animation-duration: 0.6s;
  95. }
  96.  
  97. #myImg {
  98.   border-radius: 5px;
  99.   cursor: pointer;
  100.   transition: 0.3s;
  101. }
  102.  
  103. #myImg:hover {
  104.   opacity: 0.7;
  105. }
  106.  
  107. html {
  108.   scroll-behavior: smooth;
  109. }
  110.  
  111. * {
  112.   padding: 0;
  113.   margin: 0;
  114.   box-sizing: border-box;
  115. }
  116.  
  117. .landingpage {
  118.   width: 100%;
  119.   height: 100vh;
  120.   background: url(skye.jpg);
  121.   background-repeat: no-repeat;
  122.   background-size: cover;
  123.   background-position: center;
  124.   object-fit: none;
  125. }
  126.  
  127. .navbar {
  128.   overflow: hidden;
  129.   background-color: whitesmoke;
  130.   position: fixed;
  131.   opacity: 0.8;
  132.   width: 100%;
  133.   border-radius: 0px 0px 8px 8px;
  134.   padding: 15px;
  135. }
  136.  
  137. .navbar li {
  138.   display: inline;
  139.   margin-left: auto;
  140.   margin-right: auto;
  141.   float: right;
  142. }
  143.  
  144. .navbar li a {
  145.   font-size: 20px;
  146.   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  147.   text-align: center;
  148.   padding: 60px;
  149.   color: #4f5964;
  150.   text-decoration: none;
  151. }
  152.  
  153. .navbar li a:hover {
  154.   background-color: #4f5964;
  155.   color: white;
  156. }
  157.  
  158. .welcome h1 {
  159.   font-size: 150px;
  160.   font-family: SecularOne;
  161.   color: whitesmoke;
  162.   text-align: left;
  163.   padding: 200px 120px 0px;
  164.   letter-spacing: 10px;
  165.   /* padding-top: 50px; */
  166. }
  167.  
  168. .welcome h2 {
  169.   font-size: 52px;
  170.   font-family: SecularOne;
  171.   color: whitesmoke;
  172.   padding: 0px 128px 10px;
  173. }
  174.  
  175. .welcome p {
  176.   font-size: 18px;
  177.   font-family: SecularOne;
  178.   text-align: center;
  179.   padding-top: 130px;
  180. }
  181.  
  182. .welcome p a {
  183.   text-decoration: none;
  184.   border-radius: 8px;
  185.   border: 2px solid #4f8caf;
  186.   padding: 15px 20px;
  187.   background-color: white;
  188.   color: #4f8caf;
  189.   /* position: relative; */
  190. }
  191.  
  192. .welcome hr {
  193.   background-color: white;
  194.   height: 5px;
  195.   width: 50%;
  196. }
  197.  
  198. .welcome p a:hover {
  199.   background-color: #4f8caf;
  200.   color: white;
  201.   transition-duration: 0.4s;
  202. }
  203.  
  204. .profile {
  205.   background-image: url(images/profile_background.png);
  206.   width: 100%;
  207.   height: 100vh;
  208.   background-repeat: no-repeat;
  209.   background-size: cover;
  210.   background-position: center;
  211.   object-fit: none;
  212. }
  213.  
  214. .biography {
  215.   display: flex;
  216.   gap: 20px;
  217.   box-sizing: border-box;
  218.   padding: 40px;
  219.   margin: 40px;
  220.   color: red;
  221. }
  222.  
  223. .biography img {
  224.   margin: 30px 0px 0px 45px;
  225.   border-radius: 5px;
  226.   border: 8px solid white;
  227.   width: 33%;
  228.   height: 30%;
  229. }
  230.  
  231. .caption {
  232.   font-size: 70px;
  233.   /* float: right; */
  234.   margin: 22px 0px 0px 35px;
  235.   color: #4f5964;
  236.   font-family: MontserratSubrayada;
  237.   /* background-color: red; */
  238. }
  239.  
  240. .caption_two {
  241.   margin: 40px 10px 0px 35px;
  242.   font-size: 20px;
  243.   font-family: Montserrat;
  244.   line-height: 3;
  245.   color: #4f5964;
  246.   text-align: left;
  247. }
  248.  
  249. .education {
  250.   background-image: url(images/profile_background_flip_2.png);
  251.   width: 100%;
  252.   height: auto;
  253.   background-repeat: no-repeat;
  254.   background-size: cover;
  255.   background-position: center;
  256.   object-fit: none;
  257. }
  258.  
  259. .educationn h1 {
  260.   font-family: MontserratSubrayada;
  261.   font-size: 70px;
  262.   text-align: center;
  263.   color: #4f5964;
  264.   padding: 55px 0px 0px 0px;
  265. }
  266.  
  267. .school {
  268.   display: flex;
  269. }
  270.  
  271. .ipeka {
  272.   margin-left: 5%;
  273.   height: 500px;
  274.   margin-bottom: 20px;
  275.   margin-top: 3%;
  276.   background-color: white;
  277.   border-radius: 20px;
  278.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  279. }
  280.  
  281. .el {
  282.   text-align: center;
  283.   background-color: #f89a7f;
  284.   font-family: SecularOne;
  285.   border-top-left-radius: 20px;
  286.   border-top-right-radius: 20px;
  287.   font-size: 19px;
  288.   padding: 10px;
  289.   color: white;
  290. }
  291.  
  292. .ipeka img {
  293.   margin: 25px 45px 20px 45px;
  294.   height: 160px;
  295.   width: auto;
  296. }
  297.  
  298. .content_ipeka {
  299.   text-align: center;
  300.   font-size: 16px;
  301.   margin: 20px 0px 30px 0px;
  302.   font-family: SecularOne;
  303.   color: #4f5964;
  304. }
  305.  
  306. .sd {
  307.   margin-top: 20px;
  308. }
  309.  
  310. .sd hr {
  311.   width: 40%;
  312.   margin-right: auto;
  313.   margin-left: auto;
  314.   margin-top: 1px;
  315.   margin-bottom: 20px;
  316. }
  317.  
  318. .penabur {
  319.   margin-left: 7.5%;
  320.   height: 500px;
  321.   margin-top: 3%;
  322.   background-color: white;
  323.   border-radius: 20px;
  324.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  325.   padding-bottom: 5px;
  326. }
  327.  
  328. .elo {
  329.   text-align: center;
  330.   background-color: #f89a7f;
  331.   font-family: SecularOne;
  332.   border-top-left-radius: 20px;
  333.   border-top-right-radius: 20px;
  334.   font-size: 24px;
  335.   padding: 34px;
  336.   color: white;
  337. }
  338.  
  339. .penabur img {
  340.   margin: 9px 90px 35px 90px;
  341.   height: 220px;
  342.   width: auto;
  343. }
  344.  
  345. .content_penabur {
  346.   text-align: center;
  347.   font-size: 20px;
  348.   font-family: SecularOne;
  349.   color: #4f5964;
  350. }
  351.  
  352. .its {
  353.   margin-left: 7%;
  354.   height: 500px;
  355.   margin-top: 3%;
  356.   background-color: white;
  357.   border-radius: 20px;
  358.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  359. }
  360.  
  361. .its img {
  362.   margin: 6px 87px 28px 87px;
  363.   height: 230px;
  364.   width: auto;
  365. }
  366.  
  367. .content_its {
  368.   text-align: center;
  369.   font-size: 20px;
  370.   font-family: SecularOne;
  371.   color: #4f5964;
  372. }


Source Code JS :

  1. var modal = document.getElementById('myModal');
  2.  
  3. // Get the image and insert it inside the modal - use its "alt" text as a caption
  4. var img = document.getElementById('myImg');
  5. var modalImg = document.getElementById("img01");
  6. var captionText = document.getElementById("caption");
  7. img.onclick = function(){
  8.   modal.style.display = "block";
  9.   modalImg.src = this.src;
  10.   captionText.innerHTML = this.alt;
  11. }
  12.  
  13. // Get the <span> element that closes the modal
  14. var span = document.getElementsByClassName("close")[0];
  15.  
  16. // When the user clicks on <span> (x), close the modal
  17. span.onclick = function() {
  18.   modal.style.display = "none";
  19. }

Sekian penjelasan untuk penugasan ini, apabila ada kekurangan serta kesalahan mohon dimaafkan. Terima kasih.

Comments

Post a Comment

Popular posts from this blog

PBKK - Tugas 2

Image
Kalkulator Sederhana Gerald Elroy Van Ryan - 05111940000187  Pada tugas kali ini, mahasiswa diminta untuk membuat aplikasi desktop sederhana menggunakan framework .NET. Ini adalah tampilan dari aplikasi kalkulator yang saya buat. Pemakaiannya pun cukup mudah, berikut prosedurnya : User memasukkan dua nilai yang ingin dioperasikan. User memilih operasi matematika, seperti penjumlahan atau pengurangan. Hasil operasi aritmatika akan tertulis di bagian "Hasil" Ada pula tombol "Clear" untuk menghapus angka-angka yang telah dimasukkan / mereset kalkulator. Berikut merupakan source code untuk pembuatan kalkulator sederhana : Referensi pembuatan kalkulator ini berasal dari video ini :
Read more

EAS PWEB A 2021

Nama : Gerald Elroy Van Ryan NRP : 05111940000187 Kelas PWEB A 2021 Berikut adalah jawaban dari EAS PWEB : 1. Definisikan fitur dari aplikasi yang akan dibangun 2. Rancang aplikasi menggunakan Figma Saya mengambil fitur portal login orang tua 3. Implementasi Website (Portal Login Orang Tua) Pada soal ini, saya memilih 1 fitur yaitu portal login orang tua. Untuk pengerjannya, saya kerjakan secara individual. Link source code & link youtube tertera di bawah : Link Github Link Youtube
Read more