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 social anxiety - but a bairn nevertheless!)
'Twas a first-year university assignment, in a class called Web Concepts. For the sake of brevity, I shall describe the website I produced simply as 'a bit shit'. Whilst it was technically acceptable - responsive, fast, accessible - the design and UX left something to be desired. It lacked personality. It was bland and uninteresting. The graphic design was poor (I was not nor am I now an artist).
To give myself some credit, I'd arrived at university with very little programming experience. It consisted of little more than an Avengers: Age of Ultron game I'd created with Visual Basics.
As well as that, there were elements of the assignment which demanded time and focus be drawn away from the site as a whole.
For instance, my lecturer insisted that to demonstrate my skills, I ought to have a <canvas> element with an animated story playing upon it. Admittedly, such a task was not high on my list of priorities this time around.
(If you must know, the story I produced was that of a Pink Balloon at a Blue Balloon party. Naturally, she felt isolated until she floated her way into the gaze of another Pink Balloon. I've been fending off calls from Spielberg ever since.)
But alas, I digress.
All of this is a way for me to say in a round about way (in a swirly whirly kind of way, if you like) that I've come leaps and bounds in web development. I'm now feeling pride in the things I create.
In the last few years, and particularly during quaratine, my knowledge of web design principles, current web trends, new web technologies, and many other helpful concepts has improved exponentially.
I've settled firmly into the knowledge that the role of Front-end Developer is the role for me. And I can't wait to really get stuck in.
To Boldly Go Where Everyone Has Gone At Least Once Before (Probably)
So without further ado, welcome to my website!
As far as I'm concerned, this is merely the beginning of my portfolio. The basis. The foundation. Imagine my portfolio as an infant: toddling around the interweb, its tubby, infantile fists reaching out for purchase. They protrude from some disgustingly vibrant and questionably matched clothing that I, their adoring mother, decided were 'quite sweet'.
If you're willing and able, I'd love to hear what you think. Whether it pertains to accessibility or responsiveness or something else entirely, I'd really appreciate any feedback you'd care to share.
Even if it's positive! Cure my Imposter Syndrome with repeated validation and positive affirmations. Whatever floats your boat, really!
Feedback I've had
I've shared my portfolio in a few other avenues too and this is some of the feedback I've already had:
- Move the skills section further up the homepage. The site is already indicative of who you are; show them what you can do.
- Looking clean! Super slick on mobile too.
- Have a more prominent 'Contact Me' call-to-action on mobile.
Please feel free to leave a comment below and let me know what you think. I wait anxiously behing my keyboard to either cry out in despair, jump for joy, or...
Nope, I think that's pretty much it. No inbetweens.
Thank you in advance!
Top comments (19)
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.
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 :)
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.
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.