API tools faq
paste
Advertisement
zwliew

My resume

zwliew
Nov 28th, 2018
138
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.56 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
  6.     <title>My resume</title>
  7.     <style>
  8.       body {
  9.         --primary-color: #0093c4;
  10.         --secondary-color: #b61827;
  11.         --faux-white-color: #fefefe;
  12.  
  13.         background-color: var(--faux-white-color);
  14.         color: #333;
  15.         font-family: Roboto, Helvetica, Arial, sans-serif;
  16.         line-height: 1.4;
  17.         margin: 0 16px;
  18.       }
  19.      
  20.       @media screen and (min-width: 600px) {
  21.         body {
  22.           margin: 0 64px;
  23.         }
  24.       }
  25.      
  26.       @media screen and (min-width: 1000px) {
  27.         body {
  28.           margin: 0 128px;
  29.         }
  30.       }
  31.  
  32.       li {
  33.         list-style: none;
  34.       }
  35.      
  36.       .header {
  37.         display: flex;
  38.       }
  39.      
  40.       .header__title {
  41.         font-size: 32px;
  42.         line-height: 1.2;
  43.       }
  44.      
  45.       .header__aside {
  46.         margin-left: auto;
  47.       }
  48.      
  49.       .section-container {
  50.         display: grid;
  51.         grid-template-columns: 60% 40%;
  52.       }
  53.      
  54.       .section {
  55.         grid-column: 1 / 1;
  56.       }
  57.      
  58.       .section--aside {
  59.         grid-row: 1 / 1;
  60.         grid-column: 2 / 2;
  61.         padding-left: 16px;
  62.       }
  63.      
  64.       .section__title {
  65.         color: var(--primary-color);
  66.         font-family: Nunito, Roboto, Helvetica, Arial, sans-serif;
  67.         line-height: 1.2;
  68.       }
  69.      
  70.       .section__article {
  71.         border-left: 2px solid var(--secondary-color);
  72.         padding: 4px 8px;
  73.         margin: 8px 0;
  74.       }
  75.  
  76.       .section__article__title {
  77.         font-size: 20px;
  78.         font-weight: bold;
  79.         line-height: 22px;
  80.       }
  81.      
  82.       .section__article__subtitle {
  83.         font-size: 16px;
  84.         font-style: italic;
  85.         font-weight: bold;
  86.         line-height: 0px;
  87.         padding-bottom: 8px;
  88.       }
  89.      
  90.       .chip {
  91.         background-color: var(--secondary-color);
  92.         border-radius: 4px;
  93.         color: var(--faux-white-color);
  94.         display: inline-block;
  95.         margin: 4px;
  96.         padding: 4px 8px;
  97.       }
  98.     </style>
  99.     <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
  100.     <script src="https://code.iconify.design/1/1.0.0-rc3/iconify.min.js" defer></script>
  101.   </head>
  102.   <body>
  103.     <header class="header">
  104.       <h1 class="header__title">Liew Zhao Wei</h1>
  105.       <aside class="header__aside">
  106.         <ul>
  107.           <li>
  108.             <span class="iconify" data-icon="mdi:email"></span>
  109.             <span>zhaoweiliew@gmail.com</span>
  110.           </li>
  111.           <li>
  112.             <span class="iconify" data-icon="mdi:web"></span>
  113.             <span>https://zwliew.netlify.com</span>
  114.           </li>
  115.         </ul>
  116.       </aside>
  117.     </header>
  118.     <div class="section-container">
  119.       <section class="section">
  120.         <h1 class="section__title">Education</h1>
  121.         <article class="section__article">
  122.           <h2 class="section__article__title">Hwa Chong Institution</h2>
  123.           <h3 class="section__article__subtitle">2013 - 2018</h3>
  124.           <p>Studied Computing, Mathematics, Physics and Economics.</p>
  125.         </article>
  126.       </section>
  127.       <section class="section">
  128.         <h1 class="section__title">Achievements</h1>
  129.         <article class="section__article">
  130.           <h2 class="section__article__title">SCCL - 2018 National Chinese Mobile App Development by Students for Students Competition</h2>
  131.           <h3 class="section__article__subtitle">Distinguished Achievement Award</h3>
  132.           <p>Team: built a Unity mobile game to aid primary school students with learning Chinese.</p>
  133.           <p>Guided my team (new to programming) through the planning stages of the implementation of the app.</p>
  134.           <p>Built the data management and navigation systems.</p>
  135.         </article>
  136.         <article class="section__article">
  137.           <h2 class="section__article__title">Google - Google Code-in 2017</h2>
  138.           <h3 class="section__article__subtitle">Grand Prize</h3>
  139.           <p>Collaborated with various open-source mentor organizations like JBoss and Wikimedia.</p>
  140.           <p>Contributed in feature development and bug fixing of projects involving skills like Node.js and Android dev.</p>
  141.         </article>
  142.         <article class="section__article">
  143.           <h2 class="section__article__title">DSTA - Cyber Defenders Discovery Camp 2017 & 2018</h2>
  144.          <h3 class="section__article__subtitle">2nd Place & Silver Award (pre-university)</h3>
  145.          <p>Team: pit our cybersecurity skills against other pre-university teams in a 2-day wargame.</p>
  146.        </article>
  147.        <article class="section__article">
  148.          <h2 class="section__article__title">A*STAR - Singapore Science and Engineering Fair 2017</h2>
  149.          <h3 class="section__article__subtitle">Merit Award</h3>
  150.          <p>Team: applied ant colony optimization techniques to enhancing network throughput in a model network.</p>
  151.          <p>Built a Java Swing GUI for debugging and visualizing performance of the model network.</p>
  152.          <p>Presented the project at the SSEF 2017 jointly organized by MOE, A*STAR, and Science Centre Singapore.</p>
  153.        </article>
  154.      </section>
  155.      <section class="section section--aside">
  156.        <h1 class="section__title">Skills & Interests</h1>
  157.        <span class="chip">Frontend web dev. (HTML, CSS, JS)</span>
  158.        <span class="chip">Android dev. (Java, Kotlin)</span>
  159.        <span class="chip">Arduino</span>
  160.      </section>
  161.    </div>
  162.  </body>
  163. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!