DEV Community

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

Posted on • Updated 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 πŸ’™

Discussion (168)

Collapse
janiorb profile image
JaniorB

nice portfolio would really appreciate if you do a tutorial

Collapse
chaoocharles profile image
Chaoo Charles Author

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 Author

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
chaoocharles profile image
Chaoo Charles Author

Yeah sure πŸ˜ŠπŸš€

Thread Thread
temiloluwaade profile image
Temiloluwa Adelowo

I'm still 17🌝
Started learning a year ago

Thread Thread
chaoocharles profile image
Chaoo Charles Author

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

juniordevforlife profile image
Jason F

I didn't start until I was 30. 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 Author

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 Author

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 Author
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 Author

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 Author

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 Author

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

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 Author

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 Author

Wow! I like the typing effect πŸ’™

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 Author

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

Collapse
eswarupkumar profile image
E Swarup Kumar

Mann ! Damn good. Absolutely loved it ! This is something which would be a push factor for all the aspiring developers. Waiting for the complete tutorial to post in your YouTube channel. Already subscribed 😊. Have a good day.

Collapse
chaoocharles profile image
Chaoo Charles Author

Wow, I'm happy you loved it. And welcome to the club, I'll definitely drop a complete tutorial πŸ’™

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 Author

Thank you for the remarks. I'll consider 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 Author

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

Stay awesome always and keep on learning

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 Author

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

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 Author

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

Collapse
hemant profile image
Hemant Joshi 😼

Hey, Chaoo Charles;

Can I too make a post with the same title?, Just to show my a little bit of work in form of my portfolio website😼;
Hope you don't mind if a make the same titled post", will credit you!
πŸ¦„πŸ¦„πŸ¦„πŸ¦„πŸ¦„πŸ¦„πŸ¦„πŸ¦„πŸ¦„

hemant.codes

Collapse
chaoocharles profile image
Chaoo Charles Author

Let's talk on chat(inbox) I just texted you there

Collapse
rishabk7 profile image
Rishab Kumar

Oh this is neat!

Collapse
chaoocharles profile image
Chaoo Charles Author

Thank you bro

Collapse
9vnunchucks profile image
9vnunchucks

Your title is wrong. Html, not htm.

Collapse
9vnunchucks profile image
9vnunchucks

Unfortunately this is in my news feed, which means it's in other newsfeeds. Idk how long it takes to make those changes on Google news

Collapse
chaoocharles profile image
Chaoo Charles Author

Thanks so much πŸ’™

Collapse
tutorialsmate profile image
TutorialsMate

Portfolio looks πŸ‘Œ
I made this using html, css and JavaScript πŸ‘‡
tutorialsmate.com/
(super responsive)

Collapse
chaoocharles profile image
Chaoo Charles Author

Wow, good one. I have seen it have adds, are you the one who added them?

Collapse
tutorialsmate profile image
TutorialsMate

Yes...just got adsence approval few days ago. :D

Thread Thread
chaoocharles profile image
Chaoo Charles Author

That's awesome. What do they look for before approving?

Collapse
adzika profile image
adzika

It looks nice and clean. :) As Sarah wrote, I think that images of real projects would be better as people would be able to see the outcome of your work, not just the things that are "under the hood". I think it's important for a front-end dev work.

Also, I think if you're looking for customers who will hire you as a front-end, it would make more sense to have a button to your projects next to get in touch. Unless you care more about YT subscribers who want to learn, then this layout makes sense.

And in the sidebar I'd go for services first, then projects, videos, about me and contact - so customers can know what do you offer, what projects did you do and then how to contact you.

I've also created a portfolio website in pure HTML, CSS and JS and found this very satisfying, much more than using frameworks. :)

Great job and good luck with your work and YT channel!

Collapse
chaoocharles profile image
Chaoo Charles Author

Thank you so much for such a great comment. I will consider

Collapse
voltagex007 profile image
Lord Victor • Edited

One of the best Websites I have ever visited, I rated this by the font selection, the colors, the icons, the graphics, and overall look (I noted it down, possibly it will be out in an article of mine in future, talking about websites that inspired me)

I would say "WAW!!!!!" ('wow' in surprised manner)

Collapse
chaoocharles profile image
Chaoo Charles Author

Thank you so much for this. I'm glad you loved it πŸ’™

Collapse
voltagex007 profile image
Lord Victor

What Font did you use in the Header, It looks very good and matching

Thread Thread
chaoocharles profile image
Chaoo Charles Author

Share Tech Mono

Thread Thread
voltagex007 profile image
Lord Victor

Oh thanks

Thread Thread
chaoocharles profile image
Chaoo Charles Author

I created a tutorial on it incase you are interested: youtu.be/LMM91VuS9Xg

Collapse
voltagex007 profile image
Lord Victor

: )

Collapse
mr_alaraj profile image
MrAhmad

I had checked your portfolio. It's nice and looking good in mobile. I have few comments will be good if you follow
1- your logo not clear, try to make it lighter because the background is dark
2- your menu icon try to make it more visible and little bigger
3- the color of your links in too dark and hard to read
4- try to make your green color more brightness so will add more clarity to your work.
5- the headline is made by gradient which is nice feature. But if make the background of your headline is gradient will more better

But overall, I like your work

Collapse
thallesrangel profile image
Thallesrangel

Hey, great project, please share it.

Collapse
chaoocharles profile image
Chaoo Charles Author

Here is the link: chaoocharles.netlify.app/

Collapse
agathebadia profile image
Agathe Badia

Wow great work!! Love the color scheme, design, you can be proud :D

Collapse
chaoocharles profile image
Chaoo Charles Author

Wow, I'm really proud about it πŸ’™ Thank you so much

Collapse
jhenry081 profile image
Joan Henry

Nice portfolio, keep up the good work

Collapse
chaoocharles profile image
Chaoo Charles Author

Thank you so much πŸ’™

Collapse
juniordevforlife profile image
Jason F

Awesome stuff, Chaoo! Subscribed to your YT channel!

Collapse
chaoocharles profile image
Chaoo Charles Author

Thanks man πŸ’™ welcome to the club bro

Collapse
chaoocharles profile image
Chaoo Charles Author

Thank you. I'm happy you liked it 😊

Collapse
hondohondo profile image
Ami Amigo

Beautiful! What did you use for CSS?

Collapse
chaoocharles profile image
Chaoo Charles Author

Thank you 😊

Your question is not clear. I coded the CSS

Collapse
tiffanyray profile image
Tiffany Ray

Love your site! Awesome Design πŸ”₯

Collapse
chaoocharles profile image
Chaoo Charles Author

Wow, thank you so much. I appreciate πŸ˜‡

Collapse
courtneypure profile image
C. Pure

Your website looks really good! I love the menu and how smooth the animated links are. Nicely done! I will be checking out your YouTube videos as well. I’m currently studying js.

Collapse
chaoocharles profile image
Chaoo Charles Author

I'm happy that you loved it 😊 I'm working on the tutorial showing you all how I brought it together.

Collapse
matijao profile image
Matija

Is there a link to live demo of projects?

Collapse
chaoocharles profile image
Chaoo Charles Author
Collapse
lurek profile image
Tanvir Ahamed Siddike

You should add live preview or screenshot for projects I think.

Collapse
chaoocharles profile image
Chaoo Charles Author

I have added a link at the bottom of the post. Here it is: chaoocharles.netlify.app

Collapse
ekaranja profile image
Emmanuel

Amazing portfolio Chao. I'm also a web dev and didn't realize the importance of a portfolio till I made one. I'd like to get some feedback on my portfolio too ekaranja.netlify.app

Collapse
chaoocharles profile image
Chaoo Charles Author

It's a good one bro. I like it.

Collapse
neatcoder profile image
Neat Coder

Hey ,
Can you let me know if you are in Github pls...?

Collapse
chaoocharles profile image
Chaoo Charles Author