TNP's HUB

This is where all the backend stuff happens

Problem Statement

Introduction and advertisement are very important for business, therefore, the proposed solution of having a portfolio website that will help a business, company or personal career a lot because the website contains information about the company's information, sales, statistics, services, and contact information. The company can also put the information to help their customers and the customers can find some useful information about the company or the individual to who's that portfolio belongs.

Languages Used

Name	Description
	I have used HTML as the base code for the application, meaning all the forms, buttons are coded using HTML.
	I have used CSS for styling the pages, meaning designing the pages visually like background color, alignment of the buttons, and page layouts.
	I have used BootStrap for responsiveness, meaning using div tags and few libraries of BootStrap which helps to website to fit to all the screens.
	I have used Javascript to save the details of the notes as a .txt file. Also I have used to generate the current date in the input field.
	I used JQuery for downloading the notes along with JavaScript, it's just a library that will be mostly used with JavaScript.

Tools Used

• Icons - Contains over 4500+ icon fonts for Developers and designers to speed up production.

• Google Fonts - The entire portfolio contains all the fonts extended from the Google Font library.

• GitHub - The entire code and documentation is stored on GitHub (obviously).

• Swiper - Used this to extend the most modern mobile touch slider.

• Background Remover - Used to remove the background of the image.

• HSL - Used to generate the color codes for the portfolio

• Blob - Used to generate the blob for the main image in the portfolio.

• Visual Studio Code - Used this editor to write the code (My favorite one tbh).

Directory Structure

Project Flowchart

Features

• Responsive - The whole webpage is responsive. I have used the viewport for this functionality. This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

• Dark Mode - I have used the Javascript to code the darkmode functionality. The way the code is written such that it saves the mode into the memory, so that it remembers what was the recently used option. To access the darkmode function please go the main.js file

• Linking to #id on different webpage -- As you are reading the code you will understand that I have used the concept of accessing the id from a different page. All you need to do is append the id`` at the end of the page. For example index.html#id-name`.

• Dynamic Navigation Bar -- Both the navigation bar and the footer are dynamic, not static. If you are using a phone then you will see the difference. All the options in the navigation bar have icons next to them. This increases the readability of the options and makes it easy to

• Open Source Code -- I have made the code open source, so if you want to use this framework go ahead and feel free to use it. You don't need to give any credits to me. Also the code is well documented, so that people with very slight knowledge of front end coding will understand this. If you need any help, please don't hesitate and let me know.

Credits

Special thanks to Marlon A.K.A Bedimcode for helping me design this beautiful portfolio. If you guys need to extend some web templates then this is the right place to get it. You can also find the template of this portfolio here.

Result

Weblink

Tanu's Portfolio - Website

Updates

• Fine-tuning the contents in the Portfolio. Make it look crisp and clean -- Status Working

• Change the name on the nav bar top left corner from "Tanu" to "Backend" -- Status Completed

• Change the photo of me in the About Me section - Put up the most recent one -- Status Completed

• Removing the words "My" from the Skill section -- Status Completed

• Update the footer with similar options such as the navigation bar -- Status Completed

• Add the most recent work to the work history tab -- Status Completed

• Remove the word "My" everywhere you see on the page -- Status Completed