Baby Got Backstories
Ah, my first website. When I was but a bairn (an 18 year old bairn with a metric ton of fairy lights and crippling ...
For further actions, you may consider blocking this person and/or reporting abuse
Hey! Great job putting together your portfolio and putting it out there for others to review! If you haven't already, I would suggest using an accessibility extension like WAVE or AXE to check out where you can make improvements. For example, there are quite a few contrast errors mainly the white text on orange. You could use an extension like WAVE to play around with the contrast and get it to pass AA requirements.
.
Overall looking really good :)
If you need any help with an accessible color palette this is a great site I like to use
colorbook.io/hexcolors/view/187793
These are all so helpful! I had no idea these tools existed. Bless you for showing them to me, this is a lifesaver. Thank you so much for the kind advice. 😁❤️
No problem. I was so happy when someone showed me these tool too. Accessibility on the web can be hard but is so important. Happy to provide any tools to make it a little easier.
Definitely. And I love teaching others about it where I can so it's very nice to still be learning myself
Great Job Katie!
Here's a list of suggestion based on my opinion, you may or may not find useful:
1) I would try this: remove the "About me" subtitle and position your avatar circle to bite off some of that blue above.
2) People usually scan a website, reading long sentences adds a bit of cognitive load - try to use less width for the text block (10% less or so), vertical scanning is easier.
3) instead of going full width for the button size, go with a nice big rounded CTA button (auto width and lots of padding) without capitalization and too much letter spacing (imagine talking to a human). Rounded is often good for one-off CTA's, but I personally do like concrete rectangles myself, and that is good also.
4) remove the redundant horizontal separator lines in the orange stats block. More lines means more work for the brain, more noise to scan...I want to notice "2 Spaniels" before noticing the lines. The number, icon and subtitle for each stat is enough of a separating structure by itself, padding is key here and it's wonders. remove these border lines also from the footer. Pipe characters between links or just some padding is enough.
Hacky example:
And, for the portfolio page I would suggest:
Remove the red button "details", rather the entire card is a link that will navigate to the details - people are used to clicking on cards anyway. If possible make them the same size and a good title in a consistent position on each card (upper right) that will summarize the project or just the project name. The image preview is Ok as long as there is enough padding for each card.
Love that first suggestion. I've been wanting to try and make the site feel less linear and I think this is a great way to do it. I'll give that one a try for sure. I'll also take a look at the CTA button too, I think I'm on the same page as you where I like both but can't decide.
As for the stats block, it's sat in a grid element so making those padding changes and removing the lines should be fairly straightforward. I'll see how it turns out! :)
I think you're right about the portfolio details button too. My worry is that users who aren't familiar with clicking on these things might struggle but I'll give it a test drive for sure.
Thank you for all these suggestions, you've really gone into some great detail and I can't thank you enough. I really appreciate it.
Nice work! The hero section is really nicely done. I wish I was attractive (and/or confident) enough to put my face up on my site. Your stats section made me laugh. I agree with your previous feedback of moving up your skills section.
You should resize and compress the images in your portfolio. They'll load a lot quicker and wont use so much data (mobile mostly). I also recommend adding alt tags to your images for accessibility and spending some time enhancing your SEO.
Overall the site is great, my nit-picky suggestions are just things you can do now that you have a great looking site.
Thanks so much for this Drew. If it's any consolation, I'm only confident enough to put up 50% of my face on the site (or my whole face in a very, very tiny circle 😂).
Your feedback is spot on. I'd already done a little compression but looking at my Google Lighthouse scores, it would appear they need some more attention. Same goes for my alt tags. Need to make sure I'm doing it for all, not some.
As for SEO, this is the one thing I've been unsure how to improve. What would you suggest?
From one nit-picker to another, thank you so much! 😊
Start simple. Adding the <meta name=description> tag to the head of your page will be a huge help.
Getting a little more complex would be adding a robot.txt to your root so crawlers can index your page properly.
Perfect. I'll do this and then see if I can't do some digging to really bump it up some more. Always good to learn new things! Thank you Drew.
Looking good! Which technologies did you use to create it?
Thanks Ivanov! I used Vue for the front end but wrote the CSS myself. It's hosted on Firebase which is also where all the data for my portfolio entries are pulled from. Really love using both of them.
That's a very good stack choice :)
Wish you luck with searching for your first job!
Sure you'll easily find it :)
I'm learning English, so I'm always glad to have a conversation about technologies. Feel free to write to me if you have any question about technologies :)
Ah thank you so much that's very nice of you to say 🙂 Your English is impeccable, I look forward to future conversations 😁
Ohh, thanks a lot :) I've sent you an invite at LinkedIn :)
Sweet website! 😄
I would suggest you to head over to web.dev/measure and know about your site's performance and much more! 😁
Hey, this is a great suggestion! 😮 Thank you so much I'm definitely going to be using this, wow
Count me in! I wanna join the portfolio rate and review too. My Website.