DEV Community

Cover image for How I Built My Dream Portfolio Site

How I Built My Dream Portfolio Site

Gedalya Krycer on March 08, 2021

TL;DR 2021 brings big updates to my personal website! With this new version 6 comes some really cool features that I have been working t...
Collapse
 
_genjudev profile image
Larson

You dont need to write that you are creative or are an front end developer. You just showed with your site that you are creative and can build that. Your title should be

I create dreams

Or something like that. Your job title goes to your description.

Collapse
 
gedalyakrycer profile image
Gedalya Krycer • Edited

Thanks for that feedback! It is a great point.

There is definitely something to be said for “benefit focused” messaging.

When my objective was mainly attracting freelance clients the verbiage was more specific to what they could get vs. how I would technically provide it.

Now I’m marketing more towards recruiters/ hiring managers. So I really wanted the h1 tag to contain my name and desired role.
(More potential SEO juice. 😉)

Collapse
 
brandonmweaver profile image
Brandon Weaver

Your portfolio and resume are stunning. I don't think you'll have much trouble finding a role, but good luck none-the-less. I'm considering getting involved in freelance front end development myself; is there any advice you might have for a freelance newbie?

Thread Thread
 
gedalyakrycer profile image
Gedalya Krycer

Thank you so much. Fingers crossed. :)

And that is great you are looking to get into freelance! Here are some things I found helpful...

  1. Identify a market to focus on. Besides tech proficiency, clients want someone who understands their industry and needs. I work a lot with commercial real estate. Projects parameters are more or less the same and I therefore can make suggestions on content that is missing. This also helps with getting more clients as they can refer you to other people in their network.

  2. Over communicate in a timely manner. I try to not let 24 hours go by without responding. If there isn’t time to answer an email/text, then I like to at least respond with “Question received, I’ll review and respond in full tomorrow”. That way they know you are on it and have set an expedition for the next response.

  3. Create a contract. Google freelancer contracts and use it with everyone, even friends / family / pro-Bono work. It will save a lot of pain later and help communicate expectations.

  4. Set up a sole proprietorship. No one really likes dealing with the business end of freelance, but taxes and state laws are a real concern. I file quarterly earning reports with the IRS, plus track all my expenses and earnings. In my state setting up a business is free, just takes some research. Every state is different though.

  5. Awesome freelance resource for Web designers / developers. youtube.com/c/FluxWithRanSegall

  6. Below is another article I wrote that outlines my typical design processes. The creative brief questions could prove helpful for front end freelance as well.

If these tips are beneficial, I’d be happy to do a full article on some more “lessons learned” as a freelancer. :)

Thread Thread
 
brandonmweaver profile image
Brandon Weaver

Gedalya, thank you so much for this response. I wasn't truly expecting such a thorough reply. I don't believe that it's necessary to post a full article, although it would undoubtedly help tons of people. I'd certainly be interested in learning more from you, however, you've already provided lots of help.

I really appreciate the time you took to share your knowledge with me, and I am sure that your skills will be able to land you wherever you want to be.

Thank you again, and I hope everything goes well with the search. Please let me know if there's anything I can help with; I'd be glad to.

Thread Thread
 
gedalyakrycer profile image
Gedalya Krycer

My pleasure! Being able to share "lessons learned" and more importantly learn from others is why I joined this platform! :)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good point the creativity shows.

Collapse
 
claudioteodorescu profile image
Claudio Teodorescu

Great work! I like the design, the structure, everything it works smoothly. I also downloaded your Resume and I was wondering if you created that CV Template or it's something you can find on internet?

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thanks so much for the feedback!

I designed the resume myself with Adobe InDesign and Adobe Illustrator.

However, if you are not familiar with these design tools there are some create template builders online.

While I have not used these personally the below two tools might prove helpful.

Collapse
 
claudioteodorescu profile image
Claudio Teodorescu

Thanks! I'm not that familiar with Adobe InDesign but I will give it a try.

Thread Thread
 
gedalyakrycer profile image
Gedalya Krycer

This is a great course to help you get started. 👍

linkedin.com/learning/indesign-202...

Thread Thread
 
claudioteodorescu profile image
Claudio Teodorescu

Much appreciated!

Collapse
 
spearsdevin profile image
Devin Spears

Amazing portfolio site! just one thing is that when you click on your skills then hover over the tags it changes the cursor to a typing cursor.

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thanks so much for this feedback!

What browser are you using please? And to confirm this was happening in the “Tech” section when hovering over the tool buttons? (I wasn’t able to recreate this issue on my end.)

Collapse
 
spearsdevin profile image
Devin Spears

Im using Chrome, when i hover over the languages tags it showing the typing cursor.

Thread Thread
 
gedalyakrycer profile image
Gedalya Krycer

Very odd, I am still seeing the cursor: pointer on Chrome.

But thank you for bringing this to my attention. I will keep an eye on it for the next few days to see if it shows up.

Thread Thread
 
spearsdevin profile image
Devin Spears
Thread Thread
 
gedalyakrycer profile image
Gedalya Krycer

Oh! Haha, we were talking about different sections.

Those items are actually not intended to be clickable. Although perhaps it does require a different design solution if they resemble buttons too much... Something to definitely consider for the future.

Collapse
 
z2lai profile image
z2lai

Incredible design and animations. I don't know what you call the style of it, but I love the "matte" look and could never find the right colours to produce this look. The overall theme and all the animations are extremely slick and just my cup of tea.

One thing I have to point out is that I felt that the highlight of your design was how clean the UI was with a lot of white space to give each element some room to breathe. However, after scrolling to the very bottom, I felt a little overwhelmed by the number of clickable/navigation elements in view. You have your external links stickied to the left, your resume link stickied to the right, and these same links repeated just above the footer. You also have your logo (very slick design once again) just above the footer and sticked at the top, and both of these are links that don't do anything when clicked on. Not a big deal, but maybe removing the additional logo and external links while keeping the Resume link in the row above the footer might be better.

Overall, I still think this is my favourite portfolio website out of all the ones I've seen!

Collapse
 
gedalyakrycer profile image
Gedalya Krycer • Edited

Thank you so much for your kind words and really fantastic observations!

Now that you point it out, I totally agree that the footer should be simplified. I'll be sure to play with this section in the next version.

Regarding the logo's functionality in the footer, it links back to the homepage component. (Viewable by click on it from the "About" page for example).

However, because I am using React Router, the page doesn't refresh so on the homepage there isn't any noticeable action. This is not really a great user experience.

For the next version, I think I'll make the footer logo an "anchor link" when it is on the homepage. Then clicking on it will at least have the benefit of going back to the top.

Collapse
 
touhidulshawan profile image
Touhidul Shawan

Nice work🙂
Here is mine
touhidulshawan.github.io/touhiduls...

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thank you and good work as well. I like how you have a night/day mode on your site. Best of luck.

Collapse
 
0916dhkim profile image
Danny Kim

You nailed the animations! They look gorgeous and lightweight. I have seen many websites with flashy animations but they often choke my browser and ruin the experience. Your portfolio is as lean as it can be.

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thank you, that means a lot to hear! I love using GSAP and CSS Animations to add that "little extra something" and tweaking them until it is 'juuuust right'. 😆

Collapse
 
mak0099 profile image
Maulik Thaker

Awasome dude.

Collapse
 
5456qwe profile image
1214586

looking great my friend. thanks for the post!

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thanks!

Collapse
 
ra1nbow1 profile image
Matvey Romanov

How did you ensure such a quick api update dev.to?

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Actually, just this week I found a weird glitch that if I specify &per_page twice, with the first value being 1000 (max request number) and the second value being the amount I really want (6) — the articles update right away.

Otherwise, they can take up to a day for new reactions/articles to show up.

axios.get('https://dev.to/api/articles?username=gedalyakrycer&per_page=1000&per_page=6')
Enter fullscreen mode Exit fullscreen mode

I have no idea if this a bad practice, but so far I am getting no errors and decent results. lol 🤷


I am also using "Suspense" and "lazy" from React on all my "page" components. These won't load any section components until they are needed.

Example: github.com/GedalyaKrycer/gedalyakr...

Hope that helps!

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Thanks

Collapse
 
muditwt profile image
Mudit Mishra

Great work, loved the minimalistic approach. Just one piece of feedback, the g of 'coding' is coming over the right card. Amazing site man.

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thanks! And I'll look into that glitch. 👌

Collapse
 
mohammedashkhan profile image
M Ashkhan Ahmed

Super and awesome ui designs.
Thanks for sharing in dev..
Waiting for more websites.

Collapse
 
richardsprins profile image
Richard S Prins Jr.

Absolutely stunning UI!!

Collapse
 
pulkitsingh profile image
Pulkit Singh

Good work.

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thanks!

Collapse
 
rotimio profile image
Rotimi Olatunbosun

Great portfolio site! It is pretty simple.

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thanks! I love the idea of doing more with less. Moving away from templated sites really gave me a lot of freedom to control my section layouts and solutions for presentations.

Collapse
 
cswalker21 profile image
cswalker21

Wow, nice work! My portfolio site is the same “under construction” clip art I’ve had since 1998, but this gives me lots of ideas!

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Awesome, you can do it! Go make something cool and then share it here. I'd love to see what you come up with.

Collapse
 
jdnichollsc profile image
J.D Nicholls

As a Developer, my dream Portfolio is GitHub <3 github.com/jdnichollsc

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Haha #respect

Collapse
 
jdnichollsc profile image
J.D Nicholls

haha thanks mate!

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Appreciate that feedback. Thanks!

Collapse
 
michaelpierre profile image
Michael Pierre

TL;DR

This is the best portfolio site I've even seen!

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Wow, that is really motivating to hear. 😊 Glad you liked it.

Collapse
 
yourdevguy profile image
Mike Haslam

Great job 👨‍💻really liked the expanding cards on mobile. 👍 Good for you way to go.

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thanks! They were a lot of fun to make. :)

Collapse
 
nityam01 profile image
Nityam

It's really impressive... 😍

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thank you! 💖🙏

Collapse
 
luispinheiro profile image
Luis Pinheiro

Awesome, really cool, that cards effect is nice

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thanks! Used a bootstrap accordion, combined with absolute/relative positioning on hover.

I found having some reverse movement created added visual interest, with the accordion expanding down and the card cover moving up.

Collapse
 
anurella profile image
Anurella

Beautiful work done