I gave myself 21 nights to design and build my portfolio site from the ground up. This is what happened. (richard.gazdik.blog)
over 6 years ago from Richard Gazdik, product designer at YouAte
over 6 years ago from Richard Gazdik, product designer at YouAte
Nice! I accidently leaned on my keyboard and hit the g
key - had a fun surprise!
haha that is AMAZING. Thanks for the tip :)
This looks really great, but I struggled to know what was clickable and had to take a "trial and error" approach to navigating around.
Places I clicked on that didn't do anything include the big green "WORK"and the Skills and Recognition lists at the bottom. I also didn't understand that there was a difference between clicking on the left and right images in the slider until I read it here. A simple way to solve that could be to change the cursor to a right arrow maybe.
Apart from that, well done!
I think thats very solid. I hate the clickbait title though. You wont believe what happens next.
Great work! Although I am one of those guys who think 14px is too small for any font face. Also, I would like to know how will you manage more blog posts when that time comes. Thanks for sharing and looking forward to reading the post!
Thanks! My plan was to dive more into the details regarding the case studies but building up the gallery content and the sections was so time consuming that I finally dropped that idea (or at least postpone it for later). That's why the gallery description font size is so small at the moment. Luckilly, this is a website and I can tweak the layout any time to get the ideal way to present my work according to your feedback.
Great - are you going to do a post about it, i'd love to read how you tackled it…
Sure, I'm planning to publish a longer post about all the technical details in the coming days.
It's great! One thing: I had to kind of scroll up and down to forward/backwards arrow on the sliders to see the content and then reach the controls at the same time.
Thanks. That's an actual bug of the responsive gallery and trying to fix it asap.
Any reason you didn't just go with richardgazdik.com?
Very nice!
1024 x 768 has a horizontal scrollbar....I would kill that. Other than that, great job!
nice work! loved the animations. one thing i might improve is adding more hierarchy to the contact info. I clicked on it and thought the link was broken so I tried again and realized your contact info was down at the bottom. I might do something to draw attention to it or have it load higher up on the page if possible.
Thanks for sharing!
Excellent work
This is brilliant
Like, it Richard! Do you have any tip / workflow for SVG animations? What tools did you use for logo animation?
Thanks! Great question!
I'm only using a code editor (I love Espresso and the current v5 version is a neat tool to edit your css/js/html code) to animate svgs. Actually, there are 2 ways to create an svg animation: using pure javascript or to apply some css rules to animate your svg elements with css transitions and transformations. I'm using a hybrid solution on the website: I use css transitions for the animations and start/stop/control the animation by toggling the css class on the inline svg element with javascript.
Good job Ricsi :)
This is looking great!
I had some problems with the navigation though.
I found the arrow buttons difficult to reach. I was watching the slide, then I had to move down to reach the arrows. Why not make the left and right half of slideshow item clickable to navigate back and forth? Oh wait, it actually works like this!
I had a similar issue with the "Work" section on the front page. You can easily click the partially visible next project to flick through the slideshow, but navigating back can only happen by clicking the small left arrow below. That's a bit counter-intuitive.
Also, I like how you cleverly called it "RGB", but the colours of the three sections on the homepage are coloured in the order of "GBR". Then again, red might be a too aggressive colour to use in the portfolio section.
Thanks! "GBR" is for a particular reason: R stands for Richard and it's more personal than my last name and that's why it clearly goes to the About section. B is for Blog (obviously), so the last letter remains to represent my works and I think my last name resonates well with the purpose to present my work with the outside world.
Of course!
You're right, infinite scrolling would be the ultimate solution in the galleries so I'll rewrite my code to get there. My overall purpose was to avoid any 3rd party code or APIs (that's why I used vanilla javascript) because it'll be much easier to customize everything for my personal needs and I can iterate much faster later on.
I'm thinking to present my portfolio together with the wrapping website from the scratch too. When it comes to your site, I have one problem, though: the navigation and navigating. The slider for portfolio is just like 4 slides, not so much. Can I go deeper? Strange.
Thanks for your comment! The About, Blog and Work sections will have a standalone page when it'll be reasonable to present them that way. I already wrote some small small firebase functions to suck the recent content from my Instagram, Dribbble and Spotify accounts. The site itself is hosted on Firebase and I'm using Jekyll to generate a static site right before deploying the code. It's relatively easy to introduce new sub-sections or category pages with Jekyll.
Awesome!
Interesting compositions. Would love to see the technical post as well. Congrats!
Great subtle animations and layouting. Do you welcome any critics?
Thank you and yes, either good or bad, constructive criticism is something I always welcome!
Great work.
I just want to say this: Shabloimps!
Really cool!
This is awesome!
Really beautiful work.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now