text-readable PDF conversion, minor CSS changes (#1)

.gitignore

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

README.md

@@ -43,9 +43,17 @@ IIITD folks, feel free to customize and use this for yourself and get :clap: tha
 
    ![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".
+6. Export the webpage to a text-readable PDF output file.
+- Install Puppeteer by running the following command:
+```bash
+  npm install puppeteer
+```
+- In `convertToPDF.js`, make changes if you have to, to the HTML page path (port change or a different route) and/or the name of your PDF output file.
 
-   ![Print Preview](images/screenshot2.png)
+- Finally, run the JavaScript with the following command and your resume is generated in PDF.
+```bash
+  node convertToPDF.js
+```
 
 ## Contact
 

convertToPDF.js

@@ -0,0 +1,20 @@
+const puppeteer = require('puppeteer');
+
+async function convertToPDF() {
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+
+  // Set optional viewport size
+  await page.setViewport({ width: 1200, height: 800 });
+
+  // Enter the path to the page
+  await page.goto('http://localhost:8080', { waitUntil: 'networkidle0' });
+
+  // Generate text-editable PDF from the HTML page
+  await page.pdf({ path: 'resume.pdf', format: 'A4' });
+
+  // Close the browser
+  await browser.close();
+}
+
+convertToPDF();

data.yaml

@@ -172,4 +172,4 @@ achievements:
 # 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.'
+  - '<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

@@ -263,4 +263,4 @@ <h3 class="section-title">Interests and Hobbies</h3>
       dateNode.innerHTML = `Date: ${data.bio.last_updated}`;
     });
   </script>
-</html>
+</html>