Web Developer Reacts to Beautiful Portfolio Websites
ฝัง
- เผยแพร่เมื่อ 14 มิ.ย. 2021
- I'm a web developer reacting to some beautiful looking portfolio websites. These make my own portfolio look like it needs a complete makeover.
Check out Hashnode (today's sponsor) below:
hashnode.com/
The portfolios we will be checking out today include website developers in frontend, backend, UI, UX and more. As much as I enjoy graphics design, some of these experts have portfolios that would make me want to hire them on the spot!
If you're interested in checking them out yourself, I've got the links below:
sureshmurali.github.io/
prashantsani.com/
caferati.me/labs
mattfarley.ca/project-planner
brittanychiang.com/
ejosue.com/
riccardozanutta.com/la-francesca
#developer #reacts #website
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: intent/follow?scr...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE - วิทยาศาสตร์และเทคโนโลยี
This was heaps of fun to review, if you want to check out another cool vid, watch th-cam.com/video/GMn9sxCWN0M/w-d-xo.html shows you what a day in my life looks like!
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life//
th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
I love the video! But it would be cool if you also showed the mobile versions of the sites as well
This literally made me feel like I know nothing.
I know the feeling
Most of them are just really good designs and animations.
the only good thing about that, it's to try to learn about iy
Exactly what I'm feeling right now.
Perhaps it's better to see these as goals.
I was gonna start to make my portfolio, but this video set me back around 100 years
On the contrary, I feel this video put you further ahead. Now that you have all of these in examples in mind, you have more ideas of the types of things you can make!
Draw inspiration from them
These are award winning portfolios ofcourse some one like you and me can't match their expertise but we can implement what we can in our own portfolio
Great video, Adrian. And man, these portfolios are insane! I’ve been coding for about a year so this lets me know what I’m up against. Really inspiring.
You should also check if the Portfolios are responsive or not and review the mobile view too
Many developers miss out on these main aspects
Usually hr search in pc. Not from smartphone
Dude, no real developers "misses on those main aspects".
Do you think those world class devs missed something so basic?
@@robloxaalexx the portfolios are quite complex, reviewing the mobile design is a good things so as to understand how they implemented on different screens. And many devs don't design for tablets, it's just a scaled down version of web view. Few devs have different designs for different views and there nothing wrong in checking them.
@@josemanuico5613 you still can use dev tools to check mobile version
New formats and ideas all the time! Great work yet again friend!
thanks friend :)
I honestly always thought that front end development was more about user experience and responsiveness, less about animations. This video probably changed my mind. I gotta learn more about CSS animations, never really gave it too much attention
Nice comment and good insights!
they aren't that hard to learn
Yes, Animations are part of how users feel and interact with our front-end. So I would consider them a very fun and engaging part of the UI.
i can say that a user experience is definitely most heightened by animations and cool stuff like that. Everyone has a decent layout, thats just expected at this point. its the bells and whistles that make people go 'wow this site is cool huh?'
#developer = implements software product, in effect "writes code, to design".
Inspiring!
My favourite is definitely the first, a really clean yet stunning design.
I definitely need to step up my own portfolio!
True, and the last one too, the rest seemed a little overwhelming to me
As a backend dev, i envy this kind of thing
Create your own folio, easy ;) you might get more into front-end as well
I appreciate this video, simply because it's a totally different perspective on ideas people have. It's always good to see and hear a third-person review by somebody who is not influenced by an author or the work. Thanks for that.
This is amazing and what I love most about this is its functionality and as well as its animation and please I would love to see a clone of this
Me after watching this: I need to get serious😭
Me too
Yea. Sad. 😳
Every time I’m about to start my portfolio I watch one of these videos to get ideas but then I get humbled by the video and go back to studying
As someone who is taking three online courses in web-design, coding, etc, I recently started thinking if my portfolio of projects/sites, would be even remotely good enough! These reviews were a great insight in what to expect and how I need to make a few changes. Currently working on responsive design, animation and how to implement clean code in CSS.
What courses are you taking?
@@__lalisa The Complete 2022 Web Development Bootcamp and 100 Days of Code: The Complete Python Pro Bootcamp for 2022, both by Angela Yu. Taking others on TH-cam as supplementary courses.
You should watch them on a mobile, since that is what most people use. See how mobile friendly they are. Since animation on mobile can make a site feels very slow and/or not designed for it too look cool.
Show your work instead of telling.
This is cool.❤️❤️Love you.
This is very inspiring! I love the creativity and precision on them. Love from Ibiza🏝👩🏼💻
Solid and awesome as always!
You're the best!
The websites were amazing, expecting a video on cloning one of the top portfolio website xD
Lol those clones are hilarious
already did one!
@@AdrianTwarog i am unable to find that ..can you provide the link
Techy spoted 🤣
@@bhuvneshkumar7419 😂
They are on a big boss level of programming and design. Lets hope and work, so do I reach and beyond that.
that third one is actually beyond insane
Awesome! 🔥
Cheers
I love your content❤ Thanks alot👍🏻
Thanks!
matt farley's website is my inspiration on my portfolio
Josue Espinoza either made his with the Salient theme (on Themeforest), or he made the Salient theme…nonetheless, his taste is good. It’s my go-to theme right now. I dig his custom page animation though.
that first one is frikin amazing, love the phones hovering about ^^
Thanks Max
@@sureshmurali4719 are you the real creator ??
@@ru_uwu Yes
@@sureshmurali4719 I'm glad to meet you, can i get your Instagram please ??
@@ru_uwu suresh_murali
This is inspiring for someone who thinking of building his or her portfolio...... I feel you should provide some tutorial on how to create one of this.
you are precise and direct.
Great Video, As Always ;)
Thanks!
The last portfolio geeez 🔥🔥🔥🔥
I just realise that i'm just a newbie even i had 4 years of experiments hahahaha great Work and fantastic animation
That last website has me so obsessed on developing mine as good as that. I got goosebumps looking at that site🤣🤣🤣🤦♂
You will.
As a full stack developer student this gave me motivation,thank you
How can you be learning Full Stack Development ... I guess the usual is you go for one of both Front-end or Back-end, you get years of experience, you get to learn a bit from everything ... And then you become or can call yourself a Full Stack
I guess is similar to saying: I'm a "Javascript Expert" student.
But just asking ... I'm a Front-end and UI Designer, so Wishing You The Best still!
Didn't want to comment as I'm no one to affect or give my opinion on anyone else's ...
But in my humble opinion, you may have a better time focusing on one thing most, get inspired by CSS Winner sites or Awwwards, you will be More motivated!
Then, you'll be getting a grasp of everything, or what technologies are better for you to use, or what you like best to build
That’s the goal
As someone who just finished school, nothing makes me feel inferior like looking at portfolios like these. But maybe I shouldn't hold myself to these standards yet since most of these are clearly people who have been doing this kind of work much longer, and at a much higher level, than I have thus far.
Still, I suppose it does give me little ideas of how to fancy up my own portfolio with little animations and such. I at least now how they do things like make boxes shift when you hover over them and things like that. lol
👆send a direct message for support and guidance.
Inspiring and Insightful 💡
Ngl, kinda hard to stay positive after seeing these lmao
Incredible websites, but also - what are you using to draw on the browser?!
Man. I thought I already know how to code in react. But this websites give me a reality check. Hahaha
Really wish I knew how to do those parallax animations
It's a different feeling when you transcend the tool and make it work to develop your imaginations into reality. This requires you to be not only very experienced and knowledgeable but also gifted enough with right amount of intuition,confidence and patience to experiment. Javascript and your chosen framework need to be as native to you as your native spoken language and thats easier said than done.
Hey, could you explain what a case study exactly is?
all of these portfolios are awesome and I wonder how to do the typography in the case study from the last portfolio. what I mean is how to get the fonts from different website and use it dynamically in the case study
As a Front-end Developer with some years of experience (6-7), I guess he didn't bring the fonts dynamically from the different websites, I will have to guess: 1. He added them all to his/this portfolio project. 2. I really think those font column areas in the case studies are images, created for each one.
I have that same showing the different colors in the different case studies in my portfolio, but what I liked from this one is I made them as images, so every project I have to create its image of chosen colors to upload it. Here he might have used some variables/props to show the colors in the circles dynamically. But that's easier than bringing the fonts.
Fonts part, I'm pretty sure are images.
Edit: Just checked the live website, and in fact, those are images.
One is here:
- riccardozanutta.com/img/lato-bold.png
This is awesome Adrian!! Can you check out the mobile version of each site as well?
You can, you saw the urls in the video
Good idea
@@HelloThere-xs8ss lmao😂😂, you're a rudeboy!
@@HelloThere-xs8ss Everytime I think the same, LOL, Omg
They need Adrian to show them everything
I guess it depends on what products you develop. But I think the Brittany Chiang site was the best. Very professional, high usability, fast and smooth. I really hate scrolling parallax, scrolling causing sliding animations, and 3D effects on the web. It is distracting, takes away control from the user, and causes problems with navigation, or when not having JS enabled.
Yea that would be a nightmare for normal everyday use websites, but these websites are portfolios to show off as much of their skill and knowledge as they can.
my critique: 2nd one caught my eye way more than the first but lost it with the menu transition animation. when you click a menu it should be instant. imho when your site guest knows exactly what they want, give it to them as fast as possible. when they click the menu, they want the menu, don't waste their time.
You've the most fluid hand movements on TH-cam
Haha thanks
Informative ... Yeah portfolio is very important...
The first one is awesome
love this content!
👆send a direct message for support and guidance.
I really admire them, I had better to learn Web development more discipline and enjoy all the process. Btw I've been learning HTML and CSS for 2 months, Thanks
Bro, how r u now? Its been 7months ago. How's your progress?? I just learned html n css for about a week.
You will become better than them..
I am too learning CSS right next week I am on CSS advanced
Great content!
Thanks :)
Omg amazing 💖
can you help us get some kind of tutorial with those beautiful portfolios please?
Some of their portfolios are actually better than my real projects.🤠
Hi Adrian, I want you to cover the new trend in UI. Cartoon style or sketched out UI, I've seen Udemy and Adidas using it on their websites.
Maybe a should do a series rating people's portfolio. I will submit mine.
ya
Feel free to submit them on the enhance UI website!
@@AdrianTwarog Just did. Thanks.
This started playing in preview mode and I thought it was a jazz dance tutorial.
👆send a direct message for support and guidance..
The first one was good 👍🏽
Including more animations and graphics in a website is a cool thing but one problem with this is it will take more time to open this website compared to the website that having less graphics
barely
@@MyBinaryLife It really depends on your target audience. If you're targeting the average person, these sites are great. If, however, you're targeting older folks or people in more rural areas, like a local church, you'll want to craft a site that's minimal that can be loaded quickly by someone with a DSL connection. I consulted with a local rural church, and most of their congregation are older people with slow internet connections, so having a video immediately playing on the page when it opens is a slow process. Until the rest of the world catches up, sometimes you'll want to build minimally.
@@gothnate I doubt many devs will create portfolio websites with church audience as their target audience but your point regarding speed is something to note as things can get real slow real fast with videos, etc.
This is relative
@@MyBinaryLife Everyone replies to you, bruuh..
Wow... These websites are amazing. How the hell do people become so creative with stuff like this? Im trying to start learning web development myself, but, unfortunately, I don't think I ever could get to this level. Learning the technical aspects of coding sure, but these genius presentations? I'm not sure how much of that can be learned.
You need to study visual design, just like you do with coding. Not to belittle these great examples, but there are rules there too that you can learn to build good looking documents like these - the use of space, the object placement, the font hierarchy, the palette selection and so on.
@@UTJK. do you have any resources for this
you learn it the same way you learn any art. you consume as much of that art as you possibly can, and you practice reproducing it until the building blocks of the techniques become familiar enough you can use them to compose your own originals.
@@anonanonymous4021 what are you talking about? You’re acting like you’re replying to what I said but everything you’re saying has nothing to do with my statement. No one needs a teacher to learn visual design. No one suggested it’s a thing anyone is automatically good at. Wtf are you talking about?
@@anonanonymous4021 yeah it is a craft anyone can learn, and you learn by doing the things I said to do. If you need a teacher and can’t learn on your own you’re probably not cut out to do it in general.
As a backend dev I think I should up my game and create something like this.
We think too
Whats more important is how much time they take to complete the portfolio.
When people create their portfolio websites are they writing the code for it or just picking out the designs from a template
Which tool or equipment you use to mark things on live website?
Thanks for your video
I feels nothing to myself and now I came know I was right
👆send a direct message for support and guidance.
2:45 was hard to look at. The animations made me feel sick (to be fair I visited the website). I had to close it within 10 seconds. Usability is also important to think about. The page transitions was the hardest to look at.
And a tip. It would be interesting if you browsed them using the browser tools showing them in mobile mode. But it was a good video with some really nice portfolio pages.
yeah subtle is often better than over the top
Bruh! Bit exaggerated
You might be pretty sensible to visual stuff..
You may be one of those who thinks is best to remove every cool thing, leave as simplistic as you can... So it immediately opens in the crapiest phone....
Looking at them in mobile (for me, as a developer with 7 years of experience, with huge focus in mobile and great knowledge of responsiveness).....
Taking a look at mobile will just tell me they spent a couple more days polishing
It won't take a Single Bit from a good desktop design and implementation
@@simoncallelaverde No, I'm not "sensible to visual stuff". LOL
And no I'm not one of for the other things you wrote. I do like animations and when you write like you do about mobile version just tells me you don't understand development.
All of them good, but most one I liked Brittany website 10/10
Please Make a video on that how to make a portfolio website like this. Please make
Thankx bro luv u
WOW! You've made a web-site that runs beautifully
_(presumably in Chrome only, good luck with FF)_
Now I want you to render 20K controls within 0.1 seconds
Also we need to update them in real time
Underrated comment, lol.
I'm a Front-end, I don't have to render fucking anything to you...
Chrome and Firefox are basically the same now a days...
You hand gestures feel like ease-in-out
Linear hand transitions just end up robotic haha
@@AdrianTwarog hahah. You are so cool. Keep the gestures going brooo..
this is wonderful. how do they do this kind of animation?
It's mostly GSAP which is a frontend library. It's really cool and not so hard to grasp you should check it out
After viewing these portfolios, the rest of us are screwed.
Agreed!
Just tell me where can I learn these type of animations?
And ByTheWay
This video may have given confidence to some people that they can do it or do even better
But!!!
It broke the pieces of my pieces of my heart which where already broken /
Because of some simple lines of code that I can't run properly
Wow THOSE SOME INCREDIBLE WEBSITE WOW SPECTACULAR
👆send a direct message for support and guidance.
Me, with 8-month of experience watching a 10-year experienced portfolio and wanna get myself screwed up, No way . I'm the best in 2 years time experience...forever +
Bruh, that's attitude Omg!!!
Wish you the best!
Wow, I really need to step up my game!
we all do!
The second one, wow
The Riccardo Zanutta one, i have been looking for tutorials how to do that thing like glitch or something before the word Interactice Front End appears under his name..can someone tell me where i can find tutorials for that?? Thank you in advance ❤
Really great video. But I got confused by the numbers, once you rated 3.5 out of 10 which until there was only out of 5. Then the last one you rated 6 out of 5? 🤔🤔🤔
Guess he said 10, but it was out of 5
Your comment was amazing! :')
Yeih, 6 out of 5, as it was Out Of This World
LOL
I can learn from the comment section an much as i learn from the video😄
I should definitely do a portfolio.
I really hope I will make a good one. But the ones here, the bar is too high! :-)
wow it's awesome
Nice video, good rest while taking a break from coding
Excellent 😍😍
Awesome. But these websites have loads of information. I think to be get hired including 3 - 5 projects are enough to showcase your skills. Because a complex project can take more than 1 year to complete and it may not be design heavy but uses complex logics which should be great thing to get noticed by employers.
👆send a direct message for support and guidance.
I guess the last one could even get 10 out of 5, we can stole some points from the previous one
:D
You are all over the place with grading system…is it out if 10 or out of 5? Changes with each portfolio reviewed. 3.5 out of 10 followed by 6 out of 5. Good work from you as well as owners of portfolios featured. Impressive work inspires many. Danke.
Thanks, for rating, maybe I do need an official rating system and a score marking method, something for me to consider for the future!
lol he gave the 2nd best/arguably tied first portfolio 3 1/2 stars. no wonder so many websites nowadays are so form over function.
👆send a direct message for support and guidance..
Maybe some 3D ones!
Are these people using something like Webflow or shopify or building from scratch using Vanilla CSS, JS?
So the more transition, the more you get hire?
i came for inspiration, i left with depression.
For a portofolio website, these are great. BUT for a production website/app with a large target audience, these kind of animations are very tiring and time consuming. It's pretty overkill, I would leave the page in about 30 sec, I'm not that patient :D
But the devs really did an awesome job, congrats!
👆send a direct message for support and guidance..
How do you annotate on the websites?
Can anyone make the 1st website cloning tutorial pls 😁
Are these portfolios made from scratch or what technologies do they use?.... Plz somebody answer
i have a question a portfolio must be responsive ?
actually I really like all of those animations but I think some portfolios where a bit overloaded. I mean all shown websites looked very nice but at some point the amount of animations just fells a bit disturbing and make it harder to really understand what content these people really want to present
Great it is amazing