Six designers from Figma, Vercel, Spotify, and Adobe built light-mode portfolio sites with custom cursors, scroll animations, and hover effects. Marco at Vercel and Emily at Cabraia AI showcase how interactive details and precise spacing separate craft from standard work.
Chapters
If you literally like burning your eyes with bright screens, you're going to love these light mode portfolio websites from designers who've worked at Figma, Spotify, Instagram, Adobe, and other top tech companies. Now this portfolio is slick. I love the pixel-perfect layout, the blur as I hover over different projects. See, it's simple, but but it's elevated, it's premium, it's everything that I want to be as a designer. And I feel like his use of layout and spacing is just perfect. Hmm, I wonder what his snaps are. Ah, and it makes sense that he's a photographer because he clearly understands composition. Emmanuel, I have to say, I think I have a designer crush on you, man. And check this out. It's actually built on Framer. So we got a beautiful interactive Mento box style portfolio website from Marco, who's currently working at Vercel as a product designer, but previously worked at Figma and was also the founding product designer at Diagram. And are you hearing those sound effects? I've never seen a portfolio website do that. Super cool. And everything on this homepage is interactive. Like, really interactive. Oh, sexy. It's also giving an Apple-like feel without necessarily feeling like he's copied Apple's design. Let's check out one of his case studies. Dot os. So right now I'm scrolling through and this is actually playing as I scroll through the case study like an interactive presentation. And so it actually looks like he's written up a really well-documented case study, which is kind of rare because usually when you see really fancy interaction design, you don't see that much detail. But it seems like he actually did both. Bravo. So before we move on to the next portfolio, I had to show you guys this. This is his contact page. It mimics the iMessage design. Now it's not perfect, it looks like the name field has a little bit too much spacing, but it's so creative and I absolutely love it. It's just like these subtle details that just make this designer stand out from the rest. Wow, I could tell this portfolio is going to be unique. I mean, just look at the craft of this. The paper-like design in the background, the sticky notes, the illustrations, the custom cursor. It's amazing. So we're actually looking at Emily's portfolio, who's currently working at Cabraia AI as a UI/UX designer. So let's check out one of her case studies. Oh, that cursor. So sick. Wow. Look at those little subtle drawings and handwritten notes everywhere. The craft is incredible. This is really cool. As I'm scrolling, I have another sort of presentation play. It also on the bottom right-hand side tells me the progress that I'm making on this specific stage of the case study, and it shows me the next stage as well. Oh my, oh my, dude, this case study is sick. Oh my Jesus. That's— this is, this is like a 10 out of 10. This is like a 10 out of 10. Incredible. Because I know what you're probably thinking. How can I build a portfolio website just like this that is just as impressive? Well, with Framer, you can create websites just like this. And the best part is it's not even that complicated to use. If you're familiar with Figma like me, you'll recognize its canvas-based approach super easily. And one of my favorite features is Framer's ability to create really cool animations and interactions, which is exactly the type of thing that Apple is looking for. And they also got an extensive library of templates for you to start with. So if you want to support me, support the sponsor of today's video, Framer, by signing up to the free account and just trying it out for yourself. Wow. Yo, check this out. He's a product designer making photo and video editing experience a little more. Oh yeah. And a little less. Oh no. At Adobe. And as an editor of Premiere Pro, I, I get that. Like, please do what you can to save this sinking ship that is Premiere Pro. But really good use of typography and layout here. These custom illustrations are really nice. Uh, really great problem statements and metrics here. So you'll notice that this portfolio is a little different than the rest. Specifically, it doesn't have a lot of animations or interactions, but As you can see, with a good use of layout and typography, it still has an elevated premium feel. And he does have a little touch of an interaction here on his About page. But for the most part, it's just good typography and layout. And I feel like that's generally a great starting place when you're designing anything from a portfolio to a website to an app. It's just using great layout, typography, and spacing. Yo, I've never seen a portfolio website just like this. This is probably one of the most interactive and animated portfolio websites I've ever seen. That pop-up as I hover over a project title, the sticky scroll as I scroll down, the subtle moving geometric shapes in the background. Now, I can already hear some people in the comment section saying, but this design isn't practical. It's terrible for conversions. And what I want to remind you is everyone has a niche. There's a client somewhere out there or a company that values interaction in animation design. And so when they see this person's work or this studio's work, they know that they're talking to someone who just gets them. And among a sea of designers that are trying to do everything, this studio, this designer, this agency is just focused on creating beautifully animated interactive sites. That's their specialty. So who do you think the client would hire? Now, before we go on to the next portfolio, you guys have to check this out. This is their about page. Check out their showreel. So now we've got a portfolio website from Elisha, who currently works at Spotify as a product designer. Nice. It looks like we've got a very simple layout here. Let's check out his Spotify case study. Mm, I loved how he used the green from Spotify in his case study. That's pretty nice. Nice, short and sweet and to the point. Looks like this IBM project is protected. Let's see another one. All right. Okay. I'm a fan of his general layout on his case studies. It's like very easy to read and digest everything. Let's check out his about page. It's giving creativity, it's giving artist. Very green, very nice. Oh, super cool hover interactions here. Adds a little bit of personality. I love it. Oh, I like this sort of dropdown menu here. Whoa, whoa, whoa, whoa. Now before you click out of this video, just hear me out. Just hear me out for a second. Make sure you like and subscribe to let me know you want me to make more videos just like this. Also, I've linked other videos that are just like this that you gotta watch, so I've linked them down in the video description down below. I love you, and Batman out.
