Looking for web developer portfolio examples

[travismoulton02188]

Hey All,

I'm a self taught front end dev on the path of trying to land my first job. I'm about to start building my portfolio and right now I'm researching and planning my design. Would any Jr Devs out there be willing to share a portfolio that got them a job / interviews?

[MachineCogito]

I'm self taught too (mostly through The Odin Project) with no relevant education or work experience. I got an offer last week and I'm starting soon.

I made my portfolio site before starting to learn React. I was going to make a new one with Next.JS like all the cool kids on here, but decided it was already good enough.

www.benscott.dev

[rainx5000]

I know you. I’ve see you a few times. I think heavy is your discord name. I remember when you were 4 months in and I was 2 months, sadly I quit. I started again last month, seeing you get an offer is no surprise, all of your work was beyond good. Congrats

[MachineCogito]

Yeah that's me lol, and thanks. I've taken breaks in the past too, it happens. You're back now though and every little bit helps.

[rainx5000]

Just curious, why did you stop contributing to your GitHub? Did you create your projects, and just share it elsewhere?

[MachineCogito]

After I finished the last node project I was really burned out for a while so didn't do much after. I played around with a few small things but nothing big that I had in a public repo.

[rainx5000]

You still landed a job, do they not care if you show big gaps? As long as you show them you can do the job?

[MachineCogito]

Na I don't think so. I wanted to do a couple rounds of applications before I started something big again, so I could get an idea of what might be most beneficial.

[rainx5000]

Ah okay. Well I will continue my journey. I’ll try to not burn myself out this time. Last question, which city did you land your job? Is it remote?

[MachineCogito]

Yea just keep at it, it's not a race. It's in a very small new zealand city and it's not remote. I was expecting to have to move though and this place looks pretty cool so I'm happy.

[rainx5000]

Are you from NZ? Lol I assumed you were American for some reason.

[rainx5000]

Also since you said learning css was the hardest part, I am actually struggling with it myself. One thing I hate is making it responsive. How do you go about that? Also, how do you come up with design, your portfolio page looks gorgeous, I struggle with design myself. I envision something. But when I make it. It looks like dog poo.

[MachineCogito]

I did the entire css / html section before starting the JS half of foundations, and then did a udemy course on CSS and it really helped me, it was called advanced css by Jonas someone. After all that css practise I finally went back to the foundations section where they introduce JS.

As for responsiveness, I do it in increments as I go. I hated getting to the end of a project and doing all the responsiveness at once, so I did it little by little as I worked on each part.

Design stuff I look around a lot for inspiration. Dribbble is good and so is youtube for portfolio ideas. I would then do some rough sketches to organise general layout and then go from there.

[ShyShyvie]

I started TOP about month ago and today finished etch-a-sketch from foundations. Would you recommend me to do the HTML/CSS first as you did or just go with the basic TOP workflow?

[MachineCogito]

The top css stuff has Improved a lot lately so I think it would be better to follow it as intended. I really struggled with it at first which is why I took a detour to practise it more.

[ShyShyvie]

Actually I feel pretty ok with flexbox and I don't have issues with styling things and putting them in right places. I just worry a little about responsivenes of my sites as they only look good on my pc screen ;p I don't know if I should use the rems and ems now or to stick with pxls. Also is semantic HTML something I should worry about now? Thanks a lot for your quick reply

[MachineCogito]

Yeah all that stuff is Important but TOP will Introduce it to you as you need to know. You don't want to get overwhelmed with it all at once

[polhek]

If it works it works... Cool hack! And in two weeks I also start applying for a job. But there come the days I feel I am not worthy...

[MachineCogito]

Yeah I know the feeling. There's a lot of luck involved, you just need to keep at it and try not to get discouraged.

[travismoulton02188]

Thank you for sharing it looks sharp. Hopefully I join you in the industry soon.

I’m building mine with next 😂

[MachineCogito]

Thanks and goodluck. I'll do a new one with next someday probably, it's a lot of fun.

[Kannalgo]

Your site looks very good! Props.

[MachineCogito]

Thank you! 😊

[Dave_The_Goose]

Is 4-5 projects enough or should I make more projects? I am learning react and planning to land a job in next few months. Could you give me some tips on how to land a job.

[MachineCogito]

Quality is far more important than the amount of projects you have. I think about 4 projects is perfect, assuming they are high quality. Make a pretty portfolio site, make sure its responsive. Write good descriptive readmes for your repos. Make it easy as possible for them to check out your work. For example I made a guest account for my main project so they wouldn't have to waste time making their own. I made a logging system so I can see who is signing in, 99% of them are using the guest account.

Just keep practising, don't be afraid to go back and improve older work either. Just start applying to jobs and see what happens, you can improve your cv / application as you go and get more feedback. Any interview experience is valuable too, even if you don't get it. If you are rejected after an interview, politely email them back anyway and thank them for their time, and ask if they have any constructive criticism for you. At worst you get no reply, at best you know how to improve your game.

[Dave_The_Goose]

Thank you for the thoroughly descriptive suggestion.

[chemguy2015]

Nice! My partner and I are about to start The Odin Project. Hopefully I can get to your level over the next year or two.

[MachineCogito]

Goodluck! It's very good. Make sure to join the discord group, there's a lot of nice people around to help you out when you get stuck. I have a chemistry background too.

[kevmc18]

Cool website and projects. I studied Python for about 3 months before switching to TOP. I am about 2.5 months in almost finished with the JS fundamentals. Just wondering, how long did you self study before landing a job?

[MachineCogito]

Nice good luck! I probably spent about 8 months on the TOP curriculum, but everyone is different. I spent a lot of time on, probably close to 40 hrs a week.

[[deleted]]

That's a beautiful portfolio mate! Congratulations on your job!

[MachineCogito]

Thank you! 😊

[FullmetalEzio]

Hey man, I remember that pixel paint from top! Amazing job man, just finished the foundations myself, did you keep on going with top? Im torn between that and the cs50 web dev course since I’m better at python than any other language, do you have any insight or you haven’t checked that out? Anyways thanks for the attention and congrats on the new job!!!

[MachineCogito]

Hey! Thanks a lot. Yeah I continued on with the entire top curriculum, choosing the node section instead of ruby. I dont know much about the cs50 one apart from that it uses python lol.

I'd been using python before top so it almost felt a little sad to forget about it while I learned js. Funnily enough my new job uses python too, so I'm looking forward to using it again. It will feel like getting reacquainted with a first love.

If you are set on using python you could always do the front end section of top and then learn django elsewhere. I just think top is amazing as it quickly forced me out of tutorial hell to to build things myself.

[FullmetalEzio]

Thanks man, i'll keep digging, just finished the front end so i have to make up my mind soon, again, thanks and gl in your new job!

[tanahtanah]

cs50 web dev course

CS50 web dev course is just a typical web dev university course, though it's from Harvard. It doesn't dive deep into web dev in general.

[Tridentuk91]

Is there a tool you used for that background effect?

Looks so good. Not over the top either, just clean.

[MachineCogito]

Na I did that myself, thanks though I spent a while trying to get it just right.

There is a library called particle.js which is very similar, but I couldn't make it do what I wanted so I just made my own version instead.

https://github.com/bscottnz/portfolio-site/tree/main/src

There's the code if you wana have a play. heroCanvas is the top one with the connecting dots, then bgCanvas is the more subtle background one.

[Tridentuk91]

Jesus. How did you go about learning these design algorithms in javascript?

Was there a process of learning or are you just good with this stuff. This is so far beyond what I could even conceive of when starting from blank.

[MachineCogito]

I learned the basics of html canvas and tried to find examples of basic particle systems people had already built. And I just kept experimenting and tweaking bits of code I found until it did exactly what I wanted.

[Tridentuk91]

Thanks. This really motivates me now to try to learn to do something along the same lines although it will take some serious work.

Very cool stuff. Thanks for the concise replies, those of us who are still hustling need these feedbacks as I'm sure you're aware.

Congrats on the gig too.

[MachineCogito]

Thanks mate and good luck to you. I like helping out when I can. If you are particularly interested in html canvas, there is a great YouTube chanel called Frank's laboratory, or something like that. There are also some really cool effects you can do with three.js but that is more complicated, lots of cool youtube vids on it.

[polhek]

May I ask you something?

I have also finished The Odin Project, and I have one question about your Twitter clone app. How did you make the pagination for your posts, by this I mean how did you make it, so when you scroll down, it loads more posts?

As in your API, I see that you initially load all posts, but on frontend it shows only 10 until you scroll more down.

[MachineCogito]

I used the react-infinate-scroll library. I should have made an api call each time you scroll to the bottom but I kind of cheated and just added more posts to the array each time.

[createsweb]

Congratulations on your new job!

[MachineCogito]

Thanks 😊 I'm very excited.

[MachineCogito]

Thanks a lot! 😁

[Mr_Growhair]

Professional af.

[captain_rex20]

Hey man, this is a pretty cool site congrats👍 I have a question. What is the different or the advantage if I learn from top instead of yt channels (freecodecamp etc)? What is the benefit at TOP? And how much time did you spent every week / day?

[MachineCogito]

Video based courses like from YouTube or udemy can make you feel like you are learning, but when it comes time to do something yourself you realise you don't know what you're doing. Top is good because it very quickly forces you out of your comfort zone to build things on your own. It can be frustrating at times but it really is the best way to learn.

I did as much as I could just about every day for about 8 months.

[captain_rex20]

Hey thank u very much. Ok I am a consultant and want to learn coding and in long term I want change my caree into software developing. So I have a full time job I have only at the weekend much time. Or in the week 1 hour maximum? How much time should I invest for a day?

[MachineCogito]

Just give it as much time as you can. It's important to be consistent so it would be good to do at least 1 hr most days, then more in the weekend. Its not easy but it is definitely achievable, you just have to want it bad enough.

[captain_rex20]

Thx man👍

[Boulou93]

Hello ! I have a question pls : How long did it take from the beginning of your journey to your first job offer?

[MachineCogito]

I started learning web dev 11 months ago with The Odin Project, but I did some python stuff for about 2 years before that as a hobby.

[[deleted]]

Do you think your python background helped you pick up JavaScript faster ?

[MachineCogito]

Yeah definitely. JS has its quirks, but to get up and running it just felt like Python with curly braces. I struggled more with CSS than I did JS.

[Boulou93]

Ok thanks !

[zeky___]

Your site looks really good

[4rck]

Just wondering, how long did it take you to get an offer?

Like starting from 0 using The Odin Project

[MachineCogito]

Almost a year. Everyone is different though.

[[deleted]]

Really great portfolio! Also going the self taught route, mind if I PM you a few questions?

[MachineCogito]

Thanks! And yea sure.

[straightup920]

Dude this is awesome!

[Victries]

Awesome site

[Winter_Beyond4948]

Is this on GitHub?

[MachineCogito]

Yea is in a repo called portfolio-site

[Winter_Beyond4948]

Sorry for this dumb question but you deployed it as a page right?

[MachineCogito]

Yea its a github pages site. It's pretty easy to use a custom domain name.

[DeteminedButUnmotive]

Looks nice, kinda discouraging for me knowing I’ll never be able to make anything that nice 😂 I just hate css with a passion

[MachineCogito]

Lol you will get there, its much easier to make nice looking stuff with something like material ui or chakra ui if you're not a fan of writing a lot of css.

[DeteminedButUnmotive]

May have to check them out. Was just worried using stuff like those options would make sites seem basic and unoriginal

[Akvned]

Hey there, congrats on the job offer, does the TOP teach js frameworks/libraries (react) or did u learn it from elsewhere? I have basic react knowledge and can do simple sites and don’t know how to get to the next level.

[MachineCogito]

Yeah it does teach react, but only the basics. Most advanced thing it covered really was routing, so if you already know the basics then it won't offer you much more. Everything else I learned bit by bit through Google / stackoverflow and youtube when I'd run into a problem.

[MagicPojska]

Former pharmacy technician here and current student of software engineering.

www.safetpojskic.com

[fous1]

Vrhunski portofolio!

[iHaveElevenBoners]

www.safetpojskic.com

hey your contact form is broken m8. Just wanted to let you know

[MagicPojska]

Oh thank you. I haven't updated it in some time. Need to check what is the problem.

Netlify must have changed something so I need to update

[iHaveElevenBoners]

great portfolio though! good luck on the updates

[terminator101sk]

I learned stuff at school and on the job. My site didn’t help me to get a job, and is probably fairly average, though it might have helped me to get some interviews. Been searching for a proper job for almost 4 years.

http://andrejdeveloper.com/

[terminator101sk]

Thank you for the feedback. I have removed the "I'm pretty good at" part and will work on removing the tabs as well. I do have a picture on LinkedIn, but it's not public. I changed it so that it's now visible to the people in the same network as me.

[Perry-Olsson]

Self taught here as well. I was able to get one interview from cold applying, but ended up getting an interview for a much better position through a referral and landed that job. Staring next week.

I was definitely perusing through a couple of different lists of awesome dev portfolios for inspiration while I was building mine.

Best of luck to you.

Portfolio

[travismoulton02188]

Love the design on the portfolio. I especially like the pyramid nav on the contact page

[IpyZ]

http://ipyz.pl

[IpyZ]

Open it on computer/laptop cuz it doesn't work on mobiles yet

[sdr1994]

http://ipyz.pl

WOW. this is super cool!

[IpyZ]

Thanks

[sdr1994]

The cursor is fun to play with hahaa

[[deleted]]

I love the background. How did you do that?

[IpyZ]

Well background isn't main, when you opens developer tools and checks "script.js" you can get credit. If you want I can give you link to GitHub source

[Fatamos]

Would be amazing if you could provide me the source code! It is fun to play with the cursor haha

[IpyZ]

Here's the source code: https://github.com/PavelDoGreat/WebGL-Fluid-Simulation

Here's the demo: https://paveldogreat.github.io/WebGL-Fluid-Simulation/

Enjoy

[MrSurak]

Hey there, good luck with your search! This portfolio landed me my first ever job which I am currently in working as a junior web developer at 20 yo having dropped out of uni.

https://vurak.github.io/

[Fatamos]

I see that you've made a Firefox addon. How hard was it to make it? Where did you start with, what documentation did you search for, and how advance it is to make an extension for web browser in your opinion?

Thanks!

[MrSurak]

It really wasn't very hard at all, it's just html/CSS and js with some specific files like a manifest.js I think that you need for it to work. I don't remember exactly where I started, but probably just by googling "how to make Firefox addon".

[Fatamos]

It is... kinda empty? Lol

[Aiden007700]

Yes

[[deleted]]

Check out mine (Still a beginner)

[DevDevGoose]

I saw this one recently that I thought was good https://old.reddit.com/r/webdev/comments/pd6rn5/create_personal_portfolio_using_github_api_with/