Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>PROFIL DIRI</title>
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin"/>
  9. <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&amp;family=Roboto:wght@300;400;500;700&amp;display=swap"/>
  10. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&amp;family=Roboto:wght@300;400;500;700&amp;display=swap" media="print" onload="this.media='all'"/>
  11. <noscript>
  12. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&amp;family=Roboto:wght@300;400;500;700&amp;display=swap"/>
  13. </noscript>
  14. <link href="css/font-awesome/css/all.min.css?ver=1.2.0" rel="stylesheet">
  15. <link href="css/bootstrap.min.css?ver=1.2.0" rel="stylesheet">
  16. <link href="css/aos.css?ver=1.2.0" rel="stylesheet">
  17. <link href="css/main.css?ver=1.2.0" rel="stylesheet">
  18. <noscript>
  19. <style type="text/css">
  20. [data-aos] {
  21. opacity: 1 !important;
  22. transform: translate(0) scale(1) !important;
  23. }
  24. </style>
  25. </noscript>
  26. </head>
  27. <body id="top">
  28. <header class="d-print-none">
  29. <div class="container text-center text-lg-left">
  30. <div class="py-3 clearfix">
  31. <h1 class="site-title mb-0">Aaron Astonvilla</h1>
  32. </div>
  33. </div>
  34. </header>
  35. <div class="page-content">
  36. <div class="container">
  37. <div class="cover shadow-lg bg-white">
  38. <div class="cover-bg p-3 p-lg-4 text-white">
  39. <div class="row">
  40. <div class="col-lg-4 col-md-5">
  41. <div><img src="images/foto.jpg" width="200" height="250"/></div>
  42. </div>
  43. </div>
  44.  
  45. </div>
  46. <div class="about-section pt-4 px-3 px-lg-4 mt-1">
  47. <div class="row">
  48. <div class="col-md-6">
  49. <h2 class="h3 mb-3">About Me</h2>
  50. <p>Hello! Nama saya Aaron. Saya berkuliah di Teknik Informatika ITS sejak 2018. </p>
  51. </div>
  52. <div class="col-md-5 offset-md-1">
  53. <div class="row mt-2">
  54. <div class="col-sm-4">
  55. <div class="pb-1">Place, Date of Birth</div>
  56. </div>
  57. <div class="col-sm-8">
  58. <div class="pb-1 text-secondary">Bontang, 18 August 2000</div>
  59. </div>
  60. <div class="col-sm-4">
  61. <div class="pb-1">Email</div>
  62. </div>
  63. <div class="col-sm-8">
  64. <div class="pb-1 text-secondary">[email protected]</div>
  65. </div>
  66. <div class="col-sm-4">
  67. <div class="pb-1">Phone</div>
  68. </div>
  69. <div class="col-sm-8">
  70. <div class="pb-1 text-secondary">085375754414</div>
  71. </div>
  72. <div class="col-sm-4">
  73. <div class="pb-1">Hometown</div>
  74. </div>
  75. <div class="col-sm-8">
  76. <div class="pb-1 text-secondary">Bontang</div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <hr class="d-print-none"/>
  83. <div class="skills-section px-3 px-lg-4">
  84. <h2 class="h3 mb-3">Professional Skills</h2>
  85. <div class="row">
  86. <div class="col-md-6">
  87. <div class="mb-2"><span>HTML</span>
  88. <div class="progress my-1">
  89. <div class="progress-bar" role="progressbar" style="width: 65%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  90. </div>
  91. </div>
  92. <div class="mb-2"><span>CSS</span>
  93. <div class="progress my-1">
  94. <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  95. </div>
  96. </div>
  97. <div class="mb-2"><span>JavaScript</span>
  98. <div class="progress my-1">
  99. <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  100. </div>
  101. </div>
  102. </div>
  103. <div class="col-md-6">
  104. <div class="mb-2"><span>Adobe Illustrator & Photoshop</span>
  105. <div class="progress my-1">
  106. <div class="progress-bar" role="progressbar" style="width: 95%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  107. </div>
  108. </div>
  109. <div class="mb-2"><span>MS Office</span>
  110. <div class="progress my-1">
  111. <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  112. </div>
  113. </div>
  114. <div class="mb-2"><span>Figma</span>
  115. <div class="progress my-1">
  116. <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <hr class="d-print-none"/>
  123. <div class="work-experience-section px-3 px-lg-4">
  124. <h2 class="h3 mb-4">Pengalaman Organisasi</h2>
  125. <div class="timeline">
  126. <div class="timeline-card timeline-card-primary card shadow-sm">
  127. <div class="card-body">
  128. <div class="h5 mb-1">HMTC <span class="text-muted h6">Staff Ahli - Minat Bakat</span></div>
  129. <div class="text-muted text-small mb-2">2021 - Sekarang</div>
  130.  
  131. </div>
  132. </div>
  133. <div class="timeline-card timeline-card-primary card shadow-sm">
  134. <div class="card-body">
  135. <div class="h5 mb-1">PMK ITS<span class="text-muted h6"> BPH - NaPas</span></div>
  136. <div class="text-muted text-small mb-2">2021 - sekarang</div>
  137. </div>
  138. </div>
  139. <div class="timeline-card timeline-card-primary card shadow-sm">
  140. <div class="card-body">
  141. <div class="h5 mb-1">Schematics ITS<span class="text-muted h6"> 3DC</span></div>
  142. <div class="text-muted text-small mb-2">2019</div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. <hr class="d-print-none"/>
  148. <hr class="d-print-none"/>
  149. </div></div>
  150. </div>
  151. <footer class="pt-4 pb-4 text-muted text-center d-print-none">
  152. <div class="container">
  153. <div class="text-small">
  154. <div class="mb-1">&copy; Right Resume. All rights reserved.</div>
  155. <div>Design - <a href="https://templateflip.com/" target="_blank">TemplateFlip</a></div>
  156. </div>
  157. </div>
  158. </footer>
  159. <script src="scripts/bootstrap.bundle.min.js?ver=1.2.0"></script>
  160. <script src="scripts/aos.js?ver=1.2.0"></script>
  161. <script src="scripts/main.js?ver=1.2.0"></script>
  162. </body>
  163. </html>