DEV Community

Cover image for How I Built My Full Stack Portfolio Website With the Coolest Techs🐬

How I Built My Full Stack Portfolio Website With the Coolest Techs🐬

Arafat on February 10, 2023

A portfolio or personal website has become necessary nowadays, whether you want to freelance, find a job, or market your Saas product. You must sur...
Collapse
 
edgarslv profile image
EdgarsLv • Edited

You should know that using percentages to show skills is very bad idea.

Collapse
 
arafat4693 profile image
Arafat

Thanks for the feedback. Do you know any other way to present the skill? If so then please do tell me😊

Collapse
 
brianwaustin profile image
Brian Austin

Are you trying to represent your proficiency in each technology? Not opposed to the fuel gauge aesthetic, but agree the percentage numbers are confusing.

I'm thinking specifically of how Pluralsight measures and displays skills assessments. (historically)

Collapse
 
edgarslv profile image
EdgarsLv

Just list them w/o percentages.
Js, React, Node etc.
Or can use Icons.

Thread Thread
 
nlxdodge profile image
NLxDoDge

Or Years of experience, that is also valid. So people know how long you have been working with the technology.

But even that can be skewed bad, as then people ask things in the range of "Oh you have 5 years of experience, that means you know everything right?" 🙄

Collapse
 
riperfish profile image
RiperFish

i like the idea. it' cool, few things i would change :

  • remove the pricing
  • don't put your client's website code publicly on github.
  • when creating a side project that require login/singup, use demo accounts in the description, a recruter won't bother signing up.
Collapse
 
arafat4693 profile image
Arafat

Thanks for the feedback. Just one doubt, If the authentication is purely based on Oauth models how can I use a demo account there?😓

Collapse
 
devsecbbs_dev profile image
DevSecBBS

is that's not ok as i did here the demo user nims.devsecbbs.com ...

Collapse
 
jannisdev profile image
Jannis

Your Google Analytics PRIVATE key is public on GitHub... That's terrible.

Collapse
 
arafat4693 profile image
Arafat • Edited

Yea I know. However, for some reason the env variable doesn't work in vercel env var settings. Works fine in the localhost.

Collapse
 
slaschinski profile image
Sven Laschinski

You know that you have to set env variables at build time, right?

Collapse
 
jannisdev profile image
Jannis

Well but you still shouldn't publish it... solve the issue. Working around that is even worse. (Reset the key and try to fix it on Vercel)

Thread Thread
 
arafat4693 profile image
Arafat

Thanks man, Now I've fixed it😊

Thread Thread
 
jannisdev profile image
Jannis

Awesome! Have you reseted the key? Because it's still public in the history of GitHub if you haven't.

Collapse
 
kobiprime profile image
Kobi Prime

i appreciate the hard work you have put in and you have enlighten me to do my best as well ❤😊

Collapse
 
arafat4693 profile image
Arafat

Thank you mate, glad you found the article helpful👌

Collapse
 
danidanioner10mi1 profile image
danidanioner10mi1

help me please

Image description

Collapse
 
arafat4693 profile image
Arafat

Go to github, and read the read.me. You will find the soluation there.😁

Collapse
 
karthiknarayan profile image
KARTHIK NARAYAN

nothing helpfull in your github readme.md please tell us in detail how to add cloned hygraph link in the project, we dont know where to put the link.
Your project is Awesome but we also need proper guidance for jr.dev like me.

Thread Thread
 
arafat4693 profile image
Arafat

Hello, sorry for the trouble😊. I updated the project, and my readme file a bit. Check now If it helps🥂.

Thread Thread
 
ono_sasuke_83faf226d1cf67 profile image
Ono Sasuke

hi, mate
I can't run the project with readme
please share me detailed instruction

Thread Thread
 
ono_sasuke_83faf226d1cf67 profile image
Ono Sasuke

Image description

Collapse
 
danidanioner10mi1 profile image
danidanioner10mi1

gracias investigue solo le faltaba un .env... otra duda como puedo usar en el blog desde hygraph

Collapse
 
clericcoder profile image
Abdulsalaam Noibi

Wow what a great Portfolio. If I may ask why do you build it in full stack

Collapse
 
arafat4693 profile image
Arafat

Thanks, for liking the portfolio. I build It in fullstack so that I can have CRUD(create, read, update, delete) functionalities😊

Collapse
 
clericcoder profile image
Abdulsalaam Noibi

Wow,I love the fact that you are putting your skills in to test. Keep it up man

Collapse
 
chimenemking profile image
chimenemking

Wow this is really wonderful...
But the typescript part 😅...needs explanation

Collapse
 
arafat4693 profile image
Arafat

It's just Javascript, however with types😊

Collapse
 
mohammedalikhmiri profile image
mohammedali-khmiri

I would like to create the same thing but understanding the code and what I'm doing, you know a good tutorial and thank you 😊

Collapse
 
arafat4693 profile image
Arafat • Edited

You will be able to make one much better than this, dont't worry.👍 There were lot of tutorials which I went through. However, tutorials are not enough unless you try something by yourself.

Collapse
 
mohammedalikhmiri profile image
mohammedali-khmiri

You are right, but there are difficult things that must be understood. After that, I do the creativity by myself haha

Collapse
 
jashgopani profile image
Jash Gopani

Amazing website! Thanks for sharing

Collapse
 
arafat4693 profile image
Arafat

No problem, glad you liked it😊

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

A portfolio or personal website has become necessary nowadays, whether you want to freelance, find a job, or market your Saas product. You must surely build it at some point if you're a web developer

I see this repeated all the time and it is simply not true. I'm baffled as to where this assumption comes from. I've just hired a new developer after interviewing many candidates. Every one of the candidates who made it to the final stage did not have a portfolio site. Most time spent looking into candidate backgrounds/work/interests online was spent looking through their GitHub/GitLab projects - from which far more can be learned than via a portfolio site.

Most portfolio sites I see are little more than over-engineered, cookie cutter, vanity driven projects that showcase little other than the end results of following a few '10 different web apps you need to make' style tutorials.

A portfolio site is not necessarily a bad thing, but if the hiring team are doing their job correctly - it will have very little bearing on their decision unless it is something really special and interesting (and, believe me, such portfolio sites are a rarity).

Collapse
 
lgs profile image
Luca G. Soave

Next is not "cool" anymore

Collapse
 
arafat4693 profile image
Arafat • Edited

Hmm, Why do you think so?🫤

Collapse
 
abreu profile image
AbreuY

Great, keep it up 💹
I like the design of your portfolio. This design is an original idea or it is from researching others design?

Collapse
 
arafat4693 profile image
Arafat

Thanks, I actually took inspirations from other designs😊

Collapse
 
acidop profile image
Zeeshan

You can get a free custom domain at freenom to take it to the next level!

Collapse
 
emurrell profile image
Eric Murrell

I would ditch the very common stock photo in the menu... misrepresenting yourself is not a good way to build trust with people.

Collapse
 
arafat4693 profile image
Arafat

Yes I know sir. I don't have any good photo of myself yet. Soon I will replace that photo

Collapse
 
dailydevrgb profile image
dailydevrgb

amazing (y)

Collapse
 
bitflippa27 profile image
BitFlippa27

This is by far the best portfolio website i have ever seen ! Great job ! Keep thriving

Collapse
 
nmt_021 profile image
Nguyen Minh Thong

AWESOME !!!

Collapse
 
mohammedalikhmiri profile image
mohammedali-khmiri

Amazing portfelio 🔥

Collapse
 
polyblend_solutions_034fe profile image
PolyBlend Solutions

Hi, How are you?
During building website like your one, I have faced on an issue.
Right now I have this error like "ApolloError: Failed to parse URL from /graphql"
Would you please explain me in more detail?
Thanks

Collapse
 
picwellwisher12pk profile image
Amir Hameed

Waow, nice work 👍

Collapse
 
jazsamiba profile image
Trương Ngọc Trung Anh

thanks for sharing !

Collapse
 
mohammedalikhmiri profile image
mohammedali-khmiri

also plz the record app name 😅
and thnk you again

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
mohammedalikhmiri profile image
mohammedali-khmiri

no no recording software on your computer

Thread Thread
 
arafat4693 profile image
Arafat • Edited

Allright sorry, misunderstood. I've used vimeo to record

Collapse
 
dipbd1 profile image
Dip Chowdhury

Just found this awsome portfolio, going to use it for this year, thanks again ❤️

Collapse
 
latest_22f5c175c4 profile image
Hemant Kumawat

Lucrative!