I’ve had the same portfolio since I began teaching myself to code almost 2.5 years ago. I actually built it with a website builder that my hosting provided so it was like a drag and drop system for the website.
Fast forward to the beginning of 2019 and I decided to rebuild it from scratch, this time I’ve written every line of code myself save for one function (which came from a website for their form action).
I know the landing page background image is slow to load even after I’ve minified it with a Gulp task. I use the GitHub API to pull in my user info and a little web scraping to get info from my freeCodeCamp profile.
I’d love to know what you all think! Thank you in advance
This is really nice! I really like the white and grey grid background you used. Scrolling over your featured projects to reveal more info is really cool, too. The heart and coffee mug emoji/unicode looking thing is also a great touch.
The only criticisms I have are nitpicks.
I think the “Let me introduce myself” text is in a bit of an awkward place. Maybe it’s too small or it just looks weird because it’s kinda in a weird 2/3s area between the “About Me” and the end of the section?
I also feel like the font family in the “featured projects” section doesn’t fit well with the rest of the font families used.
Great stuff man. Has a lot of polish and personality to it.
Wow… awesome… love the hover effect on the projects… I’m trying to come up with something similar for my portfolio page lol.
One very small thing- my QA tester eye caught it… on the hover overlay for Tracy’s Upholstery you have Tracy-s Upholstery. I think the - should have been a '.
I was just reading in another thread that someone suggested that istagram (and maybe Pinterest) may not be a good thing to put on a professional portfolio. It’s not often I see those two on portfolios.
Though on the other hand if both are directly connected to tech/Web Development, it’s probably fine.
Looks nice. I personally wouldn’t put any personal social media like Twitter, IG etc on my portfolio. My portfolio is for prospective employers, not making friends.
I noticed that the background of the first panel loaded quite slowly. Maybe you want to try and figure out progressive loading for it (like images on Medium).
I would also change the length and order of your sections. Skills, projects come first for me – and be more selective with the projects. You don’t want an employer clicking on a meh project first and getting a bad impression. Also, there’s a bit too much text for my tastes. I’d rather be sure someone is reading a little text than give them a whole bunch they’re probably just skimming or ignoring entirely.
Other than those things I like the colors, fonts, and general style of the site (which I appreciate is harder to get right than it seems!) I think you need to just spend a bit more time to think about the intended audience of your site and how to streamline it for them.
That’s some great feedback and I wondered if I was being too lengthy with my wording on some of the sections. I have a tendency to rattle on when I speak/write lol so I will definitely give it a second look.
I hadn’t really thought about not putting all of my social links on there so that’s something I will reevaluate and likely take down Pinterest and IG.
I’m not sure why that background on the first panel loads so slowly…I wonder if caching it would help alleviate some of that or if you think I should just do away with it all together and just go with the light grid background that covers the rest of the site?
All in all I really appreciate all of the awesome feedback I’ve been given by everyone!
The website looks super awesome and very professional looking. The only thing I am thinking about is that the ‘light / dark’ theme is unnecessary because people will not be staring at the website for that long. That option pushes things out of place in mobile view.
You could look into progressively loading the image as I mentioned. This loads a small, low-quality version of the image first (looks bad but loads quickly), then replacing it with higher-quality version(s) as they load. Couple of links:
Alternatively you could try and make the background mimic the colors/pattern of the image while it is loading using CSS.
Either way you are just trying to make the image load less jarring (although maybe using a CDN or something would help, too).
You could get rid of it if you want, but you should replace it with something, because my first thought was that that first panel really needed a background, and that’s what made it so noticeable when it popped in.
I noticed that as well when I was working on the responsive layout…I’m thinking of moving the option to the bottom of the site or maybe outside of the nav
This is definitely not a necessity for the site but it’s something I wanted to integrate into the site. I see my portfolio as a ‘digital playground’ of sorts where I can try out new ideas/technologies/libraries even if they are for fun.
I’m thinking about moving the toggle to the bottom of the site just to avoid the headache of fixing the top nav layout
Thank you for the great suggestions and awesome links! I definitely want to figure out a solution to the image loading problem. I’ve minified it but that doesn’t appear to be enough so I’m going to look at lazy loading it.
I’m not sure a CDN would be the right route to go as this is the only domain I own and the only image that I’m having an issue with so a CDN might be overkill?
I will definitely get to work on this and update my post when it’s fixed
I changed the dark mode toggle to be in the footer (it’s not a necessity, only a fun thing). That freed up the top nav and restored my responsiveness on mobile (as best I can tell).
I also removed about 300 megs worth of unused images I had just clunking around the server…from what I can tell through testing the load times on FF/Chrome it seems that the background image is loading much faster.
Would anyone care to check the site and let me know how it loads for them?
