I decided, during my job hunt, that having a website that was more “look what I can do” and less “hire me for web design services” would be beneficial. Something I could really pour my knowledge into and share with prospective employees. I just finished it today. It’s still a WIP with some mobile issues (menu, a couple of glitching text headings, and overlap with my bio section) and fine-tuning the projects section layout as I’m not 100% happy with that yet. It’s taken me 5 days to get this far.
A little JQuery
It’s live on Github: https://rockstarcreativestudio.github.io/Megan-Bailey-Portfolio/
So far this is looking great! I love the glitching theme.
I’m loving the design so far. A couple things I wanted to point out:
Is it just me or does the content of About Me spill over into the next section? It looks like About Me’s content is spilling over on my end, overflowing into Projects. On my end, this has pushed the rest of the content after About Me (Projects and Get In Touch) to overflow past their own respective sections, creating some white space in the footer.
The right-sidebar isn’t setup for widths below 769px.
In the ‘About Me’ Section, the github button and the ‘My Current Skills’ buttons aren’t aligned properly.
On all the headers (esp the main title ‘I am Megan Bailey’) things don’t look right if the text has to wrap to more than one line.
Everything falls apart when you get to a width of less than around 550px… text starts overlapping and falling out of the buttons. Maybe setup a min-width on the body until you get things setup for smaller widths.
For the cards in the ‘Project’ section… I’d find a way to have the description showing without having the users do an extra click. Or maybe have a really short description and a click me for more button.
I really like the color, style and layout.
Love this layout! Especially as a more “get to know me”/“look what I can do.” The colors, fonts, and layouts you chose are all really cohesive with your theme.
I also really enjoyed that clicking on the “my current skills” button faded in your skills on the right. There was something whimsical about that.
Some things to consider (Other than what has been pointed out above):
- from around width 932px to 769px, your “I am Megan Bailey” glitching shadow shifts down & becomes skewed
- under “about me”, your github icon link didn’t work for me
- small typo in the “about me” section in the 3rd paragraph, 1st sentence; “developmet” --> “development”
- when the height of the browser is adjusted smaller (not just the width), that’s when I start to run into some text-overlapping problems
Yes, I checked on my phone and noticed this as well. Testing with Devtools, I think I just have to update to min-height rather than height to fix section overlap. Thanks for pointing this out!
Yes, these are all on my list as I’m working on mobile now that it’s deployed.
For the github link, I realize the skills section is covering the buttons on mobile. I plan to add some z-index on mobile to prevent this.
And thanks for finding the typo! I don’t always notice those.
For the browser height, that’s a good point, I’ll keep that in mind.