refactor: Make code modular and add README

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules/
+resume.pdf

LICENSE

@@ -0,0 +1,18 @@
+Copyright (c) 2022, Ananya Lohani
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,50 @@
+# IIIT Delhi Resume
+
+A fully-customizable resume template in IIIT Delhi format made with basic HTML, CSS and JavaScript. I used this template for the on-campus internship placements in Summer 2021 and got an offer from Microsoft (Engage) and a full-time internship offer from Expedia.
+
+I tried lots of ways to make a resume in this format - Google Docs, Pages, Canva - but none of them allowed me to fit all the information I wanted and still keep it within two pages. So, I decided to code it myself!
+
+IIITD folks, feel free to customize and use this for yourself and get :clap: that :clap: bread :clap:.
+
+## How To Use This Template
+
+- The resume is generated completely from the data in [data.yaml](data.yaml). Populate the file with your information in the same format. Refer to [this guide for basic YAML syntax](https://www.tutorialspoint.com/yaml/yaml_basics.htm) in case you're unfamiliar.
+
+- The styles can be edited according to your preference in [styles.css](styles.css). I've added the styles suited to the amount of information I wanted to display on my resume. You might have to tweak the styles according to your needs.
+
+- The template skeleton is coded in HTML. Feel free to modify it however you want.
+
+- Your resume should typically be a single page, but the IIITD format is a bit rigid so it's okay if your IIITD resume extends to two pages. Try not to make it beyond two pages though.
+
+## Steps To Set Up
+
+1. Clone this repository.
+
+```bash
+  git clone https://github.com/ananyalohani/iiitd-resume.git
+  cd iiitd-resume
+```
+
+2. Install dependencies.
+
+```bash
+  npm install
+```
+
+3. Start the development server. The page will be served at http://localhost:8080.
+
+```bash
+  npm run serve
+```
+
+4. Edit the data in [data.yaml](data.yaml)
+
+5. Refresh your webpage to see the changes. You might have to do a hard refresh (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> or <kbd>⌘⇧R</kbd>). At this point the webpage looks like this:
+   ![Webpage Preview](images/screenshot1.png)
+
+6. Export the webpage to a PDF. Print the page (<kbd>Ctrl</kbd> + <kbd>P</kbd> or <kbd>⌘P</kbd>) and set the Destination as "Save as PDF".
+   ![Print Preview](images/screenshot2.png)
+
+## Contact
+
+If this template helped you, or if you have any queries, feel free to reach out to me on [Telegram](https://t.me/ananyalohani).

data.yaml

@@ -1,4 +1,21 @@
-# ? EDUCATION
+# BIO
+bio:
+  name: Ananya Lohani
+  roll_number: 2019018
+  email: [email protected]
+  github:
+    username: ananyalohani
+    link: https://ananya.li/gh
+  linkedin:
+    username: ananyalohani
+    link: https://ananya.li/linkedin
+  dob: 11 June 2001
+  website:
+    name: lohani.dev
+    link: https://lohani.dev
+  last_updated: 16 July 2021
+
+# EDUCATION
 education:
   - institution: Indraprastha Institute of Information Technology, Delhi
     degree: B.Tech. CSE
@@ -10,7 +27,7 @@ education:
     duration: 2017 - 2019
     grade: 'Percentage: 96%'
 
-# ? SKILLS
+# SKILLS
 skills:
   - title: Expertise Area
     value: Data Structures and Algorithms, Full Stack Development, Object Oriented Programming
@@ -21,7 +38,7 @@ skills:
   - title: Technical Electives
     value: Data Structures and Algorithms, Analysis and Design of Algorithms, Advanced Programming in Java, Computer Organization, Operating Systems, Discrete Maths, Database Management Systems
 
-# ? WORK EXPERIENCE
+# WORK EXPERIENCE
 work_experience:
   - title: Microsoft Engage
     subtitle: 'Mentor: Mr. Shanav Asija, Senior SWE at Microsoft'
@@ -63,7 +80,7 @@ work_experience:
       - Improved accessibility by making the website colorblind-safe. Fixed UI bugs.
       - Building an authentication system for various stakeholders of the NGO.
 
-# ? PROJECTS
+# PROJECTS
 projects:
   - title: Microsoft Teams Clone
     subtitle: Capstone Project of Microsoft Engage 2021
@@ -130,7 +147,7 @@ projects:
     bullets:
       - Built a multiplayer, gesture-controlled version of the game Tetris using ultrasonic, touch and piezoelectric sensors.
 
-# ? POSITIONS OF RESPONSIBILITY
+# POSITIONS OF RESPONSIBILITY
 leadership:
   - position: '<strong>Mentor</strong> at CollabConnect, a mentorship startup for students, founded by IIITD students.'
     duration: Jul’ 21 - Present
@@ -145,9 +162,14 @@ leadership:
   - position: '<strong>Event Head</strong> at Odyssey 2020 (cultural fest). Organised Acapellujah in a team of 3 with participation of 40+ colleges and amassed a sponsorship amount of INR 2 Lacs.'
     duration: Oct’ 19 - Jan’ 20
 
-# ? AWARDS AND ACHIEVEMENTS
+# AWARDS AND ACHIEVEMENTS
 achievements:
   - "<strong>Dean's List Award</strong> for Academic Excellence 2021."
   - '<strong>99.879th Percentile</strong> in JEE Main 2019 (Top 0.2%).'
   - '<strong>Gold Medal</strong> in Intraschool Mathematics Olympiad 2018.'
   - 'Awarded <strong>Distinction</strong> (highest grade) in Grade 3, Trinity Rock & Pop Vocals exam in 2015.'
+
+# INTERESTS AND HOBBIES
+interests:
+  - '<strong>Music</strong> - Active member of Audiobytes since 2019.'
+  - '<strong>Art</strong> - Made an <a href="https://www.instagram.com/lohani_art/">Instagram account</a> and <a href="https://www.youtube.com/channel/UCD027JiYyUAsKUrKOlms2iA">Youtube channel</a> dedicated to art.'

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>A4</title>
+    <title>IIITD Resume</title>
     <link rel="stylesheet" href="styles.css" type="text/css" />
     <link
       rel="stylesheet"
@@ -22,27 +22,25 @@
   </head>
   <body class="A4">
     <section class="sheet padding-10mm">
-      <img src="iiitd.png" class="iiitd-logo" />
+      <img src="images/iiitd.png" class="iiitd-logo" />
       <div id="page1">
         <div id="header">
-          <h1 id="name">Ananya Lohani</h1>
+          <h1 id="name"></h1>
           <p>
-            2019018 | <strong>Email:</strong>
-            <a href="mailto:[email protected]">[email protected]</a>
+            <span id="roll-number"></span> | <strong>Email:</strong>
+            <a id="email"></a>
           </p>
           <p>
             <strong>GitHub:</strong>
-            <a href="https://ananya.li/gh" target="_blank">@ananyalohani</a> |
+            <a id="github" target="_blank"></a> |
             <strong>LinkedIn:</strong>
-            <a href="https://ananya.li/linkedin" target="_blank"
-              >@ananyalohani</a
-            >
+            <a id="linkedin" target="_blank"></a>
           </p>
           <p>
             <strong>DOB:</strong>
-            11 June 2001 |
+            <span id="dob"></span> |
             <strong>Website:</strong>
-            <a href="https://lohani.dev/" target="_blank">lohani.dev</a>
+            <a id="website" target="_blank"></a>
           </p>
         </div>
         <div id="education" class="section">
@@ -72,30 +70,15 @@ <h3 class="section-title">Awards and Achievements</h3>
         </div>
         <div id="interests" class="section">
           <h3 class="section-title">Interests and Hobbies</h3>
-          <ul>
-            <li>
-              <strong>Music</strong> - Active member of Audiobytes since 2019.
-            </li>
-            <li>
-              <strong>Art</strong> - Made an
-              <a href="https://www.instagram.com/lohani_art/"
-                >Instagram account</a
-              >
-              and
-              <a href="https://www.youtube.com/channel/UCD027JiYyUAsKUrKOlms2iA"
-                >Youtube channel</a
-              >
-              dedicated to art.
-            </li>
-          </ul>
+          <ul id="interests-list"></ul>
         </div>
         <div>
           <p>
             <strong>Declaration:</strong> The above information is correct to
             the best of my knowledge.
           </p>
-          <p>Ananya Lohani</p>
-          <p>Date: 27 June, 2021</p>
+          <p id="signature"></p>
+          <p id="last-updated"></p>
         </div>
       </div>
     </section>
@@ -105,6 +88,31 @@ <h3 class="section-title">Interests and Hobbies</h3>
       const data = jsyaml.load(text);
       console.log(data);
 
+      const nameNode = document.getElementById('name');
+      nameNode.innerHTML = data.bio.name;
+
+      const rollNumberNode = document.getElementById('roll-number');
+      rollNumberNode.innerHTML = data.bio.roll_number;
+
+      const emailNode = document.getElementById('email');
+      emailNode.innerHTML = data.bio.email;
+      emailNode.href = `mailto:${data.bio.email}`;
+
+      const githubNode = document.getElementById('github');
+      githubNode.innerHTML = `@${data.bio.github.username}`;
+      githubNode.href = data.bio.github.link;
+
+      const linkedinNode = document.getElementById('linkedin');
+      linkedinNode.innerHTML = `@${data.bio.linkedin.username}`;
+      linkedinNode.href = data.bio.linkedin.link;
+
+      const dobNode = document.getElementById('dob');
+      dobNode.innerHTML = data.bio.dob;
+
+      const websiteNode = document.getElementById('website');
+      websiteNode.innerHTML = data.bio.website.name;
+      websiteNode.href = data.bio.website.link;
+
       const educationNode = document.getElementById('education');
       let eduHTML = '';
       data.education.map((item) => {
@@ -239,6 +247,19 @@ <h3 class="section-title">Interests and Hobbies</h3>
         awardHTML += `<li>${item}</li>`;
       });
       awardNode.innerHTML += awardHTML;
+
+      const interestsNode = document.getElementById('interests-list');
+      let interestsHTML = '';
+      data.interests.map((item) => {
+        interestsHTML += `<li>${item}</li>`;
+      });
+      interestsNode.innerHTML += interestsHTML;
+
+      const signatureNode = document.getElementById('signature');
+      signatureNode.innerHTML = data.bio.name;
+
+      const dateNode = document.getElementById('last-updated');
+      dateNode.innerHTML = `Date: ${data.bio.last_updated}`;
     });
   </script>
 </html>