DEV Community

Cover image for My Portfolio Website
Arwaz Khan
Arwaz Khan

Posted on • Edited on

My Portfolio Website

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

How I started and Which tools I used?

  1. 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.

  2. 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.

  3. In the Home section I use a cover pic with my name and my role using typedjs library.

  4. Animate on scroll (aos) is used for the scrolling effect.

  5. About and Resume sections are customized with CSS and Javascript.

  6. In the Certificates section I used the lightbox library for showing the modal of the image. (same use on the Certificates page)

  7. In the Projects section I use a flip-card to show my projects.
    and added GitHub readme stats.

  8. 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.

  9. Navigation bar, Scroll bar, back to top button, footer, and other elements are designed using CSS and Javascript.

  10. Libraries used - JQuery easing, Fontawesome, Animate CSS, Google fonts, Lightbox, PageClip, Bootstrap, Typedjs.

  11. Hosted on Github and domain from NameCheap (Expired) and I use Google Analytics and Google Site to analyze my website performance.

โ— One Secret page also there but 404 (page not found) ๐Ÿ˜๐Ÿ˜๐Ÿ˜

Thankyou ๐Ÿ™

Top comments (14)

Collapse
 
hentaichan profile image
Info Comment hidden by post author - thread only accessible via permalink
ใƒ˜ใƒณใ‚ฟใ‚คใกใ‚ƒใ‚“ • Edited

Your navbar should use white as a color for your text, it's easier to read than black text on a dark background. I would also remove your face from the navbar because two pictures of you should be enough, since you don't want to be hired for your looks but your skills ;)

Your use of animations is a little too much if you ask me, it's better to use it more sparingly. I also noticed that you tried to make purple your primary color in your design, but I don't really think this color matches the landing page and your personality based on what I have read about you. Therefore, I advise you to give a little more thought about your color palette. For this you can use coolers, that's what I frequently visit first when I start a new project.

This is also very subjective, but I don't think much of these GitHub stats that have been popping up all over the place. Commits per year or lines of code are insufficient metrics to evaluate the value you could create for your future employer, let's not make this a thing in 2021. What's important should be the final product, i.e. your projects.

This brings me to my last point - I'd prioritize the projects you have been working on over any certificates. Consider moving up this section by one level.

In summary, your page is a solid start but now's the time where you need to start pay attention to details, e.g. the projects cards are not centered on your mobile view, your contact form could also use more margins on the same view (it's too close to the page borders, giving your form less room to breathe).

Collapse
 
mkkl profile image
Mikkel

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 ๐Ÿ™Œ

Collapse
 
arwazkhan189 profile image
Arwaz Khan

Thank you for the suggestion, I will add this too...๐Ÿ˜Š

Collapse
 
hamzaejaz787 profile image
Hamza

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.
Collapse
 
arwazkhan189 profile image
Arwaz Khan

Thank you for sharing your opinion...

Collapse
 
chicoder profile image
Chinonso

Your portfolio webpage is full of juicy info and captivating.

Tip: Correct your omission of the article 'a' in your roles.

Good job, you just motivated me! ๐Ÿ‘จ๐Ÿพโ€๐Ÿ’ป๐Ÿ‘๐Ÿฝ

Collapse
 
arwazkhan189 profile image
Arwaz Khan

Thankyou ๐Ÿ™

Collapse
 
guryashzone profile image
Guryash Singh

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.

Collapse
 
arwazkhan189 profile image
Arwaz Khan

Ok, I will ready for this ... ๐Ÿ˜
Don't worry it contained only minor details...

Collapse
 
hemsharma101 profile image
Hem Sharma

I like your secret page.

Collapse
 
arwazkhan189 profile image
Arwaz Khan

๐Ÿ˜๐Ÿ˜๐Ÿ˜

Collapse
 
cdthomp1 profile image
Cameron Thompson

This looks great! Love the animations and the section headers!

Collapse
 
arwazkhan189 profile image
Arwaz Khan

Thank you, Sir !!!

Collapse
 
rachitbhatt11 profile image
RAJESH

great going mate

Some comments have been hidden by the post's author - find out more