DEV Community

Cover image for I Created a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript
Chaoo Charles
Chaoo Charles

Posted on • Edited on

I Created a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript

I have always ignored having a portfolio website for a long time. It's very important to have one though especially if you are a freelancer.

One of the questions you will get from potential clients every time you approach them is, "Do you have a portfolio?" or "Can you share some of the related projects you have done before?"

Alt Text

Having a portfolio is a simple and great way to showcase your skills, interests and projects you have worked on before. Therefore I decided to create one using pure HTML, CSS & JavaScript and I would like your feedback on what you think about it.

Tell me, what amazes you? What should I change? Should I create a YouTube tutorial showing you how to create it?

Here is the link to the portfolio: https://chaoocharles.netlify.app/

Also, Help me reach 5k subscribers on my YouTube Channel

Your feedback will be highly appreciated.

Always stay awesome πŸ’™

Top comments (167)

Collapse
 
janiorb profile image
JaniorB

nice portfolio would really appreciate if you do a tutorial

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you. I'll post a video before the end of next week. You can join my YouTube channel, here is the link youtube.com/c/chaoocharles

Collapse
 
hemant profile image
Hemant Joshi

Thanks;
Will work init!

Collapse
 
hemant profile image
Hemant Joshi • Edited

Check mine too and rate mine too😼;

hemant.codes

Collapse
 
janiorb profile image
JaniorB

it's awesome
you're 19 years old?

Thread Thread
 
hemant profile image
Hemant Joshi

No I am 18 😼;

Thread Thread
 
hemant profile image
Hemant Joshi

I add 27 may to non official and 27 Nov to offical docs😼

Thread Thread
 
janiorb profile image
JaniorB

I'm 18 too

Thread Thread
 
hemant profile image
Hemant Joshi

NiceπŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰;
Goodluck;;;

Thread Thread
 
janiorb profile image
JaniorB

thanks

Thread Thread
 
g33knoob profile image
G33kNoob

why i feel so oldist here, im 30 and still in learning basic js

Thread Thread
 
hemant profile image
Hemant Joshi

Wow;πŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Haha, age is not a problem. You can pick up coding at any age as long as you have the passion.

Thread Thread
 
kenbellows profile image
Ken Bellows

☝️☝️☝️ Truth, I work with several devs who transitioned to programming after 30, it's more than possible

Thread Thread
 
juniordevforlife profile image
Jason F

I didn't start until I was 30. You got this.

 
chaoocharles profile image
Chaoo Charles

Yeah sure πŸ˜ŠπŸš€

Thread Thread
 
temi0x profile image
Temiloluwa

I'm still 17🌝
Started learning a year ago

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Keep learning and creating stuffπŸš€ You got this πŸ’™

 
marcusungarette profile image
Marcus Ungarette

Do not feel lonely. im 30 too, and started learning a year ago. You can do it !!!

Thread Thread
 
g33knoob profile image
G33kNoob

thanks marcus

Thread Thread
 
aliux02 profile image
Aliux02

I'm 39, and i started to learn... 2 weeks ago... i feel you...

Collapse
 
hemant profile image
Hemant Joshi

Nice;
Checkout mine hemant.codes

But this website is under development and soon adding darkmode

Collapse
 
ekaranja profile image
Emmanuel • Edited

If you really want control over your website, you'd rather do it from scratch. An "easy" way to do this is by use of css variables and a little bit of javascript. Here's a great guide from Ananya Neogi
OR you could check out darkmode.js

Collapse
 
chaoocharles profile image
Chaoo Charles

I have taken a look, it's a good one

Collapse
 
hemant profile image
Hemant Joshi • Edited

Thank you❀️;
Hey is there any easier way to add darkmode to website?

Initially I will have to use conditions in js in my css script for changing color, but is there better way then this?

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Create two themes(css styling) and toggle them with a button click

Thread Thread
 
hemant profile image
Hemant Joshi

Yes, this is a good idea but it is going a tough deal for me to implement is there any blog or documentation for darkmode?

Thread Thread
 
chaoocharles profile image
Chaoo Charles
Thread Thread
 
thomasareinert profile image
Thomas A. Reinert

There's a media query to check if the user has chosen to use dark mode. And you should respect that choice designing your UI.

@media (prefers-color-scheme: dark) {
/* CSS Code when dark mode active */
}

As always with new features don't forget to check on caniuse.com for browser compatibility.

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Wow, thank you for this!

Thread Thread
 
ponnex profile image
Emmanuel Francis Ramos Jr.

Check
medium.com/@katiemctigue/how-to-cr...

It is how Katie Mctigue implemented in her portfolio website in here: katiemctigue.com/

I'm also currently working on my portfolio website implementing the same idea
It's still in development but hey kindly check out: ponnex.dev

Collapse
 
sarehprice profile image
Sarah Price

This is great! I love the addition of dark mode, it's very on trend for 2020. For your portfolio images, I would suggest showing images of the real projects and not stand in images. Otherwise I love the colors, I love the animation.

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much for the suggestion. I really appreciate πŸ’™

Collapse
 
maureento8888 profile image
Maureen T'O

Great portfolio! I have to get mine up and running πŸ˜…

I would recommend that your CTAs in the beginning have hierarchy established. Especially for potential clients coming to your portfolio, they want to see your work/projects first rather than getting in touch before knowing you! Similarly, the colours of the buttons could be different colours, maybe one that’s more subdued (I.e ghost button, or something less bright than the blue-green) than the most important button.

Great stuff!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much for your recommendation, I will consider. Also I'm so happy that you liked and I inspired you

Collapse
 
grendel profile image
grendel • Edited

I like the overall look and feel, but I'm mobile and I have just 2 nitpicks on the way it shows up on my phone

  • In the "digitize your business" section, there are icons and then headers, but on mobile they are on separate lines. I think the icons should be inline with the headers. (Also you must capitalize "I" at the start of that section)
  • The project cards alternate between showing the thumbnail above or below the description. On mobile I think this should be uniform, and place the thumbnail above the description.

That's all, good work

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you for the remarks. I'll consider them 😊

Collapse
 
aakriti_1012 profile image
Aakriti

Nice work up there. Love the minimalistic approach. I also made my portfolio by simple HTML, css and Javascript.

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you. I'm glad you liked it. You can also share your portfolio here if It's online.

Collapse
 
aakriti_1012 profile image
Aakriti

aakriti94.github.io/freeCodeCamp/P...
Here, we go.
Its an old one. Hence, archived.

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Wow! I like the typing effect πŸ’™

Collapse
 
anechol profile image
Ashley E

Not a knock against you but it's funny how in 2020 creating a portfolio with only vanilla tech is worthy of awe and praise from the heavens.
Nice work.

Collapse
 
chaoocharles profile image
Chaoo Charles

Haha, it's because people are used to frameworks and libraries. Thanks buddy

Collapse
 
bnestes18 profile image
bnestes18

Hi! Your portfolio looks awesome. I too have been avoiding the creation of a portfolio but I’m also considering freelancing as a side gig. I’d love to see tutorial on how to create one. Thank you in advance!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you πŸ’™. I'll drop a tutorial on my YouTube channel before the end of the week.

Collapse
 
rafo profile image
Rafael Osipov • Edited

Hi, Chaoo.

In your project: github.com/chaoocharles/sppms

There's an unnecessary file added to the repository, I mean temporary MS Word file
"~$OJECT REPORT.docx" file.

I would suggest to remove it from the repository, here's how: stackoverflow.com/a/2047477/12576990

And use .gitignore in your project, to prevent this issue later.

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much for this man. I really appreciate. I totally forgot to exclude them

Collapse
 
rjdon11 profile image
rjdon11

Brother I'm a beginner so I'm requesting u to make a tutorial on this port folio step by step in depth detail to understand bro...plzz make it and I'm subscribe your channel just now ihave seen and I'll share with my all frndz who are interested....thnx in advance

Collapse
 
chaoocharles profile image
Chaoo Charles

Welcome to the club bro πŸ’™ I'll definitely create a complete tutorial based on this.

Stay awesome always and keep on learning

Some comments may only be visible to logged-in visitors. Sign in to view all comments.