DEV Community

Cover image for Hooray! I Created my First Portfolio! πŸ“‚πŸŽ‰

Hooray! I Created my First Portfolio! πŸ“‚πŸŽ‰

Madza on April 06, 2021

For the last few months, I've been working on a personal portfolio. I've always believed that a separate portfolio is important for any dev since i...
Collapse
 
johnpalmgren profile image
John Palmgren

Whenever I see someone else's portfolio it makes me want to completely change my own. Looks really good man, and interesting to see your process

Collapse
 
khokon profile image
Khokon M.

You should actually redesign your portfolio

Collapse
 
madza profile image
Madza

Thank you so much! πŸ™β€

Collapse
 
sufyaan323 profile image
ShadowNinja

In your CSS file, you can add the following to remove the X-axis scroll bar that appears at the bottom of your blog page:
body
{
overflow-x: hidden;
}

Collapse
 
madza profile image
Madza

Thanks for noticing! πŸ‘ Fixed it πŸ˜‰

Collapse
 
sufyaan323 profile image
ShadowNinja

@madza As a homework, I think you should try changing the y-axis scroll bar colour in the blog page into one that meets the theme of your website.

Thread Thread
 
madza profile image
Madza • Edited

Good point πŸ˜‰
At one time during dev I actually styled them the way you described, but I switched back to classic style as they were pretty hard to notice πŸ˜€πŸ˜€
You can still find them used in this post, for example, where I use them as X-axis scrolls for code snippets.
I just commented them out for the main Y-axis, the code is still there and I might use it again if I change my mind πŸ˜€πŸ˜€

Thread Thread
 
madza profile image
Madza

@ShadowNinja just deployed the custom Y-axis scrolls, so you could take a look πŸ˜‰ Curious, do you think they look better like this? πŸ‘€

Thread Thread
 
sufyaan323 profile image
ShadowNinja • Edited

Definitely looks better but it needs to be more lighter; I could barely tell its there.
Isn't there any way to make it lighter?

Thread Thread
 
madza profile image
Madza • Edited

Yeah, that was the initial reason I switched back. πŸ˜‰ But I will take your advice and try to experiment with some lighter shades like #576180 from my color palette described in this post 🎨
Thanks a lot for the input, helped a lot πŸ™πŸ’–

Collapse
 
metafox0114 profile image
MetaFox

u have done a great works.
if u need my help. i will with my pleasure.
send me mail at anytime.

Collapse
 
madza profile image
Madza

Thanks for the support πŸ‘πŸ˜‰

Collapse
 
metafox0114 profile image
MetaFox

Ok. I like contact with talent developer.
Best regards.
If any problem occured, I will send u a request.

Collapse
 
madza profile image
Madza

Means a lot, thanks! πŸ‘πŸ’―

Collapse
 
michealgreattech profile image
Micheal Great

Stunning.. πŸ‘πŸ»

Collapse
 
madza profile image
Madza

Thank you so much, mate! πŸ™πŸ’–

Collapse
 
zxcodes profile image
Mohammed Farmaan.

It's awesome. Some great effort there. Btw I have a question. How can that scrollable list be achieved? like you've done with your music section? It's like a fixed container but it has got items scrolling in it.

Collapse
 
madza profile image
Madza

Thanks for the kind words! πŸ˜‰
The trick for the scrollbar to appear for fixed divs is first set the specific height or you can also use max-height if you don't want to show empty space in case of fewer items. And then use overflow-y: scroll to display scroll when the content exceeds the height of the containing div. πŸ˜‰

Collapse
 
zxcodes profile image
Mohammed Farmaan.

Thanks for this. I've been struggling to get it work since a few days. Really appreciate it.πŸ˜„

Thread Thread
 
madza profile image
Madza

No worries, happy to help! πŸ™β€

Collapse
 
dyllandry profile image
Dylan Landry

Looks clean. Biggest critique I have is that I think you should make your projects more easily visible. It was jaring to get to your home page, try scrolling to see more, have it not work, then have to search the UI for where I could see your work. Maybe just put that page of projects additionally at the bottom of your main page. Also I'd suggest adding more visual distinction between your projects. The only difference is their text, which requires reading each one to distingush them. Maybe add a bit of a picture to each one, either a picture of the project or some releated image off of unsplash.

Looks good!

Collapse
 
madza profile image
Madza • Edited

Thanks for the valuable feedback! πŸ˜‰

During development, I had the same thought to make a landing page scrollable, where I would present just 3-4 highlights for each section and then add 'view more' that would open the respective section with all the content. That's a nice point, as most of the portfolios are like that.

About the project's images. At one point in the development, I had listed the projects as a title and image. It was really easy to tell right away what each project looks like and what it's about (especially since most of the visuals were GIFs). But I went with the text and description as it's the main theme throughout the whole portfolio. Same for the Blog articles not showing preview images.

I still have the code for that, so I might switch back to that in the future.

Collapse
 
lauraftx profile image
Laura Finger

Thank you for sharing this. I’m working on my own first portfolio and the ones I’ve seen so far are beautiful but waaaaaaaay over my skill level at this point. Yours is concisely and relatable for a beginner like me.

Collapse
 
madza profile image
Madza

Awesome to hear! πŸ™β€
That was the goal to create something simple and easy to use πŸ˜‰

Collapse
 
luciferchase profile image
Lucifer Chase

Loved your site. Congratulations 😁
Just wanted to ask, disabling open in a new tab feature say using ctrl + click or using the mouse wheel was intentional?

Collapse
 
madza profile image
Madza

Thanks a lot! πŸ™πŸ’–
Just tested on navigation items, markdown links, and images. Ctrl + click works as expected opening in a new tab. I'm on Chrome v89, what browser do you use and which link do you specifically try to open? πŸ‘€

Collapse
 
luciferchase profile image
Lucifer Chase • Edited

Both the blog posts and the links in the project section won't open using the mouse wheel. Also, the blog posts don't show the open in new tab when right-clicked.
screenshot
The navigation items are perfect πŸ™Œ
I am using Edge Chromium v89

Thread Thread
 
madza profile image
Madza

Thanks for the notice! πŸ˜‰
Tbh, I've never used a mouse wheel to open in a new tab, that's why never tested against it. I use next/link and the absence of 'open in new tab' is most likely caused due to links being dynamically generated (in case of blogs and projects) πŸ˜‰
I will see what I can do with this when I will have some free time πŸ˜‰

Thread Thread
 
luciferchase profile image
Lucifer Chase

Glad to help you 😁

Collapse
 
louislow profile image
Louis Low • Edited

After reading this post, no wonder you are missing for so long. At last, you finally replacing the incomplete portfolio website! Now the website looks great and resourceful. I just get know that you are producing EDM music. I stopped making music 7 years ago, my SoundCloud profile.

Collapse
 
madza profile image
Madza

Yeah, been working on this for the last months πŸ˜‰ Thank you for your kind words, means a lot! πŸ™πŸ’–
Just listened to your tracks on SC, great job. πŸ’― Didn't know you produced music as well πŸ˜€ Trance and progressive were the first genres for me, too πŸ˜€πŸŽ΅πŸŽΆ

Collapse
 
cdthomp1 profile image
Cameron Thompson

Your site looks great! I like the clean look and easy to use interface. It might be helpful to have thumbnail images on your project/article cards, to help visualize what the project/article might be about.

Great work!

Collapse
 
madza profile image
Madza

At one time during the dev process I used them, tho switched back to text and description cause it fitted the overall theme of the portfolio better. I might switch back again, since other devs recommended that as well πŸ˜‰
Thanks a lot for the kind words! πŸ™πŸ’–

Collapse
 
leob profile image
leob • Edited

Love it, it's clean, slick and professional ... the dark mode is a winner, really makes the site stand out and is pleasant on the eye ... and the animations are well done, convincing and very good-looking, you don't often see animations utilized that well ... congrats, great job!

Collapse
 
madza profile image
Madza

Thank you so much for the kind words! πŸ™β€

Collapse
 
daviddalbusco profile image
David Dal Busco

Well played @madza πŸ₯³

The Framer Motion is a nice touch πŸ‘

Collapse
 
madza profile image
Madza

Thanks! πŸ™πŸ’– As far as I've tried it I really liked it, seems like a powerful library πŸ’ͺ

Collapse
 
adhocore profile image
Jitendra

i think you meant to use the sentence quick brown fox jumps over the lazy dog with all the alphabets. current one misses some letters (h, s, t).

Collapse
 
madza profile image
Madza

Hahah, good eye πŸ¦ŠπŸΆπŸ˜€πŸ˜€

Collapse
 
madza profile image
Madza • Edited

Agree. The design has always been based on personal preferences πŸ˜‰
Personally, I'm pretty happy with the color scheme, tho I know that the light mode switch would be pretty much mandatory when it comes to designs this dark. 🎨

Also, I'm aware there is a lot to improve performance-wise, especially when opening separate articles or projects in their own respective pages. Thanks for the input, def on the list to work on in the future πŸ˜‰

Collapse
 
azeemdev profile image
Azeem Sharif

Hi there , My name is Azeem and Recently I started working as a react developer. Usually we get front end designed by some other guy in the company but In my case. I am similar to you. I am trying to create my portfolio and a blog where I can write content everyday. But you know I am really struggling on the planing part as I am not very creative at creating new content from scratch. Can you give me some pointers and tips.

Collapse
 
madza profile image
Madza

The irony is - it's also the most important part. πŸ˜‰
I've always thought that the best source for new ideas is to consume quality information every day. Make it a habit to read blogs like DEV, Hashnode, and Medium. Focus on the devs that provide quality over quantity. Our thought processes and ideas are largely defined by the information we consume, it's just sometimes we are not fully aware of it. πŸ’‘

Collapse
 
andrewbaisden profile image
Andrew Baisden

Congrats!

Collapse
 
madza profile image
Madza

Thanks a lot πŸ™πŸ’–

Collapse
 
lorenzoblog profile image
Lorenzo

Hey, well done for the portfolio!
Just a question, what did you use to make the photos of the planning part?

Collapse
 
madza profile image
Madza

Thanks for the support! πŸ™πŸ’–
I use Figma, an awesome and powerful tool for designing and wireframing πŸ™ŒπŸ‘

Collapse
 
0916dhkim profile image
Danny Kim

Your dynamic lists are awesome!

Collapse
 
madza profile image
Madza

Thanks a lot! πŸ™πŸ’–

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
madza profile image
Madza

I'm still experimenting with markdown highlighting colors, to be honest πŸ˜‰
I might swap the colors once I write an article that holds multiple level headings, with something that fits better 🎨 Thanks a lot πŸ™πŸ’–

Collapse
 
dicethedev profile image
Blessing Samuel

Nice Portfolio man

Collapse
 
madza profile image
Madza

Thanks a lot! πŸ™πŸ’–

Collapse
 
andrewbenrichard profile image
Andrew Ben Richard

Finally an inspiration to start mine :)

Collapse
 
madza profile image
Madza

Awesome to hear! πŸ‘ Good luck πŸš€πŸŒ±

Collapse
 
grenmath profile image
Mathieu Grenier

Vercel is kinda like Netlify ?

Collapse
 
madza profile image
Madza

Both are serverless deployment platforms for web applications. Both are awesome for frontend/static stuff, plus Vercel excels on the backend as well. πŸ˜‰ Plus I like their UI better πŸ˜‰

Collapse
 
toobajamal profile image
ToobaJamal

Hey! That's awesome :)

Collapse
 
madza profile image
Madza

Great to hear! Thanks πŸ™β€

Collapse
 
lakshyakhatri profile image
Lakshya Khatri

I’m in love with your portfolio. It looks so simple yet so beautiful. πŸ”₯❀️πŸ₯°

Collapse
 
madza profile image
Madza

Thank you so much, means a lot πŸ™β€

Collapse
 
benjaroa profile image
benjaroa

Congrats, Mazda and thanks for sharing!

I didn't know about some of the things you used there, can you tell us about the pricing? You got that site running for free?

Cheers!

Collapse
 
madza profile image
Madza

Thank you so much! πŸ™πŸ’–
Since it is deployed on Vercel I don't have to pay anything to run the site. The only pay (yearly) is for the custom domain I use. πŸ˜‰

Collapse
 
kalashin1 profile image
Kinanee Samson

Nice work, the portfolio looks great especially the part where you showcase your previous works. You have a nice color scheme in place too.

Collapse
 
madza profile image
Madza

Thanks a lot! πŸ™β€

Collapse
 
k1y05h17k profile image
k1y05h17k

Hey man, this is a beautiful design, I get many ideias after read your post :)

Collapse
 
madza profile image
Madza

Awesome to hear! πŸ˜‰ Thanks a lot! πŸ™β€

Collapse
 
grenmath profile image
Mathieu Grenier

Awesome

Collapse
 
madza profile image
Madza

Thank you so much! πŸ™β€

Collapse
 
ravens48 profile image
Ravens48

Nice job !

Collapse
 
madza profile image
Madza

Thanks a lot! πŸ™β€

Collapse
 
nicatquliyev profile image
Nicat Quliyev

Loved it, congrats to you πŸ₯³

Collapse
 
madza profile image
Madza

Awesome to hear! Thanks πŸ™β€

Collapse
 
mattmarquise profile image
Matthew Marquise

Congrats! Looks incredible! Also loving the musicπŸ‘ŠπŸ» Keep up the great work!

Collapse
 
madza profile image
Madza

Awesome to hear that! πŸ™πŸ’–
Thanks for taking a listen 🎢🎡

Collapse
 
kagol profile image
Kagol

So cool!

Collapse
 
madza profile image
Madza

Thanks a lot! πŸ™πŸ’–

Collapse
 
verberden profile image
Sergei Novikov

It looks very nice not tough and as for me pretty clean. Congrats! πŸ‘

Collapse
 
madza profile image
Madza

Thank you so much! πŸ™πŸ’–

Collapse
 
said_mounaim profile image
Said Mounaim

Nicee 😍 congrats

Collapse
 
madza profile image
Madza

Thanks a lot! πŸ™πŸ’–

Collapse
 
jlrxt profile image
Jose Luis Ramos T.

Gran trabajo. Γ‰xito.

Collapse
 
madza profile image
Madza

Thank you, I guess?! πŸ˜€πŸ˜€

Collapse
 
souksyp profile image
Souk Syp.

This is cool !

Psss... Live demo links are missing on project pages.

Collapse
 
madza profile image
Madza

Yup, I know I should add them once the project is opened, currently, there are just GitHub links πŸ˜‰

Collapse
 
gealber profile image
Gealber Morales

Looks amazing, good job

Collapse
 
madza profile image
Madza

Thanks a lot for the feedback! πŸ’–πŸ™

Collapse
 
hey_yogini profile image
Yogini Bende

Well that's a fun portfolio! Just loved that onload animation πŸ₯³

Collapse
 
madza profile image
Madza • Edited

Thanks a lot! πŸ™πŸ’– That's Framer Motion doing all the work πŸ˜€ Plus with the help of Nprogress for load progress, I think it worked well πŸ˜‰

Collapse
 
hey_yogini profile image
Yogini Bende

I am hearing a lot about Framer motion these days. Might be the good time to try it now πŸ˜‡

Thread Thread
 
madza profile image
Madza

Absolutely, the best way to learn anything tech is to pick it up and experiment with it to see what works for you and what do you like. πŸ“¦πŸ”¨

Collapse
 
devtalhaakbar profile image
Muhammad Talha Akbar

Great work, Madza. I like it. Simple and effective. That's how it should be!

Collapse
 
madza profile image
Madza

Thanks for the kind words! πŸ™πŸ’–
The main blocks are there, tho still a lot to improve! πŸ˜€

Collapse
 
ben profile image
Ben Halpern

Nice work

Collapse
 
madza profile image
Madza

Thanks, means so much πŸ™πŸ’–

Collapse
 
drunkenpirate47x profile image
Mansoor Roeen

looks awesome tbh, I would probably copy your design for my own portfolio πŸ™ƒπŸ™ƒ