My Portfolio

This is my biggest project so far! I loved combining various technologies together to build my own platform to showcase my projects and skills on the internet, while learning throughout the process.

Roles

• Frontend Developer
  • Crafted responsive and interactive user interfaces using HTML, CSS, and JavaScript.
  • Ensured cross-browser compatibility.
  • Implemented client-side validation and dynamic content updates.
• Backend Developer
  • Designed and implemented the website's architecture using Node.js and Express.js.
  • Developed RESTful APIs with Node.js to manage data flow between the front-end and back-end.
  • Utilized Pug to create dynamic and reusable templates for server-side rendering.
  • Managed database operations and schema design in MongoDB.
  • Integrated Python scripts for processing Tools.

Learnings

I learned to:

• use pug as the template engine and dynamically create elements from fetched data from database using JavaScript.
• use service workers and add notifications functionality.
• effectively use CSS's flex and grid box layouts and create clean and beautiful user interfaces.
• use JSON Web Tokens (JWT) and create authentication systems.
• integrate databases using mongoose and MongoDB Atlas.
• do image and PDF processing on backend using node modules such as pdfkit and sharp.
• use Adobe's APIs for faster and efficient PDF processing.
• use Express.js to create endpoints and APIs for various services of my portfolio.
• incorporate middlewares like http2-express-bridge to use faster http2 protocol and express-fileupload to handle file uploads.
• combine Node.js and Python using spawn and take use of powerful Python libraries to ease backend processes.
• use AI tools to write general-purpose code and boost productivity.
• integrate reCAPTCHA v3 challenge to block bot requests.

The Story and The Journey

From the start, I knew a portfolio was essential for a developer's growth. In 2022, with my first programming income, I bought a domain and hosted a welcome page. Due to the vast curriculum pressure of class XI, I didn't develop it further for a year.

In April 2023, my final school year, I noticed my classmates often needed notes. I started developing my website, focusing on a notes page and creating an admin panel to manage uploads. Despite the pressure of class XII, I continued making backend improvements, like streamlining the notes upload process using Node.js.

Midway through the 2023-24 session, I developed a tool to help classmates with project files. They could fill out a form on my website to generate typed pages in Word or PDF formats, which saved them time and effort.

After my final exams, I redesigned my website into the portfolio you see now.

Source Code

Though I can't make the whole source code of the website public, I can show some code snippets to let you know how I've designed client and server side of the website.

Function to handle subject endpoint of notes, fetch the chapters data from database and fulfill the request accordingly.

Pug template for subject page, uses JavaScript to dynamically create elements based on the data sent by express app.

Python script to fill data into a pre-made template for project files.

JavaScript function to update the width of header's pseudo element which is functioning as scroll progress bar.