My Portfolio Website

#portfolio #html #css #javascript

Arwaz Khan Dec 1, 2020 ・Updated on Dec 3, 2020 ・2 min read

I created my portfolio website using HTML, CSS, JavaScript, Bootstrap, and JQuery plugins...
Visit my website - https://arwazkhan.me/
Code of website - https://github.com/arwazkhan189/Portfolio-2

How I started and Which tools I used?

First of all I draw a rough design of my portfolio website on a white page. That contains all the basic HTML of the website and placements of elements.
Then I started with the code part of this website in the section vise (Navigation, Home, About, Resume, Certificates, Projects, Contact, footer). First I code the navigation bar and footer then code all the part in section vise.
In the Home section I use a cover pic with my name and my role using typedjs library.
Animate on scroll (aos) is used for the scrolling effect.
About and Resume sections are customized with CSS and Javascript.
In the Certificates section I used the lightbox library for showing the modal of the image. (same use on the Certificates page)
In the Projects section I use a flip-card to show my projects.
and added GitHub readme stats.
In the Contact Section, the static contact form added which links with Pageclip (a server for HTML forms) which sends me an email when a response is submitted. Social media icons are designed using CSS.
Navigation bar, Scroll bar, back to top button, footer, and other elements are designed using CSS and Javascript.
Libraries used - JQuery easing, Fontawesome, Animate CSS, Google fonts, Lightbox, PageClip, Bootstrap, Typedjs.
Hosted on Github and domain from NameCheap and I use Google Analytics and Google Site to analyze my website performance.

❗ One Secret page also there but 404 (page not found) 😁😁😁

Thankyou 🙏

Discussion (14)

Mikkel • Dec 2 '20

Good job. A quick tip; adding eventKey to your Nav.Link will make your menu collapse when clicking a menu link. It currently doesn't collapse, so the user has to minimize the menu after trying to go to another page 🙌

Arwaz Khan • Dec 2 '20

Thank you for the suggestion, I will add this too...😊

Hamza • Dec 21 '20

It's good looking and functional website. Here are few personal opinions:

The text on your nav is hard to read. You can either use a different picture in the background or make the text a little brighter for people to see.
Also on nav, try making things a bit more centered(at least in desktop version), everythings seems to be in the left side.
Lastly, instead of so many certificates, add more projects you've made. Because most people are interested in what you've built.

Arwaz Khan • Dec 21 '20

Thank you for sharing your opinion...

Guryash Singh • Dec 2 '20

You should not put so much information in an online resource. For someone, it would be very easy to get a lot of information about you and kidnap you in no time.