Portfolio Complete(ish)! Feedback welcome!

Portfolio Complete(ish)! Feedback welcome!
0

#1

I present my portfolio!

Project Link - http://codepen.io/AMorse/full/NRQWEe/

Well, this project ended up taking a lot longer than I anticipated it would - over 20-30 hours of work altogether. And while I think I’ve finally reached a point where I’m happy to move on, there are definitely some points where it remains a little unpolished (its lack of actual content and non-functioning form aside).

I feel like improving it further is going to take some fresh perspectives, so please feel free to leave any comments/criticisms here (on my JS/JQuery particularly, since this marked the first time I’ve seriously relied on either to make a web page work.). It’s appreciated.

Thanks!


#2

Yup, it looks good and ticked all the boxes, the main point here is that you applied what you learned. Css/Html/Jquery/Bootstrap/Font awesome

Although in future projects i personally am going to scrap using bootstrap and try to do more in flexbox instead. if you have not heard of flexbox look it up, very important going forward.

i too just completed my personal page, like you, i can also find improvements, but i think i learned enough and ready to move on to JS, and come back to html/css when i need to… being stuck too long on one pain point can make you go nuts!

otherwise i like your site, the slider must have been hard, but note that slider images are on their way out in web design, unless you lazyload them.I am sure you learned a lot making the slider right? I am not sure about your color scheme, i can’t say mine is any better though. i guess we will learn UX later on in the project.

Do you code in a IDE or directly on codepen, I would strongly suggest learning to code in a IDE (i use brackets.io) its the best for newbies , and then copy everything in to codepen for everyone to see.

here is my personal page which i just finished yesterday (after 20 hours)!

comments welcome.


#3

Thanks for the response!

Thanks for bringing up the point about the carousel - I spent a little while reading about their place on the web afterward, finding varying degrees of helpfulness and vitriol along the way (turns out people can be quite opinionated over these). It seems a like my own use case for the carousel was a bit on the atypical side, as well - entire blocks of text don’t usually seem to go in them, or at least I haven’t found an example where they’ve been used that way. I made the decision to position my portfolio entries that way fairly early on in an attempt to minimize the amount of vertical scrolling a user on a mobile device would have to do in order to access all of the page’s content, though now that it’s been pointed out, I was able to identify a few flaws in this logic fairly quickly.

  1. If a user’s screen is too narrow, only one item will show up on the carousel at once, making it unapparent that there is more content to the left/right.

  2. The controls for the carousel are at the bottom of the widget, which is the last place a user would look. Placing the navigation buttons to the left/right of the carousel respectively would be more in line with “traditional” carousels (and alleviate the previous issue somewhat), but then I’d run into a design issue with either the carousel’s width at something less than 100% (would look strange with the page’s borderless layout), or with the buttons floating on top of the content (looks strange, and contrary to the general aesthetic.)

  3. The carousel was originally intended to highlight 3-5 pieces of “featured” (read: “my best”) projects. In hindsight, why would I want 40-90% of my featured content to initialize off-screen?

  4. The carousel doesn’t automatically slide, which is one of the biggest complaints I’ve heard from designers online (auto-slide makes it difficult to focus on one specific piece of content). After reading that, I briefly felt good about myself for choosing not to turn it on, until I realized that without it, given problems 1 and 2, there is literally -no- immediate indication that the carousel even exists on smaller screens.

So…I probably won’t be keeping the carousel, after all (I’ll probably replace it the next time I have something to actually put into it). At the same time, vertical length still sort of concerns me when it comes to users on smaller devices - if my portfolio grows to more than a dozen or so items, navigation within it could become difficult/tedius. Fortunately, my limited use of JS/JQuery has given me a few ideas for how to solve it without resorting to horizontal scrolling.

Hopefully the carousel post-mortem is useful to somebody, at least.


Oh! And I -did- learn a lot by working with carousels…chiefly that I had no idea how to code a carousel with the (advanced) features I wanted. While I understood the basic concept of how it works early on, I was about 5 hours into my own implementation before I was forced to admit that my knowledge of animations and window/touch events wasn’t quite up to the task of understanding how everything works together. The carousel on the page is actually a plugin (slick.js), which was actually educational in its own right to work with - turns out there’s a ton of design considerations that go into the widget that I hadn’t even thought of, and now that I’ve seen how it all works, I suspect I’ll see a good deal more success on my next attempt. Strange to say, but in this case I probably learned -more- by using a plugin than I would have by doing it on my own.


By way of feedback on your own portfolio, I suppose the first thing that jumps out at me is the word “fail”, with the hinge/falling animation. While it’s an interesting effect (and gets your intention across fairly clearly), there seems to be a slight issue in that the word “fail” is kind of critical to framing your next paragraph. If a user opens your page, steps away for a minute, then comes back, they’ll read that header as “These tools all helped me” - the opposite of what you’re trying to get across. If you wanted to use animation on the text, you could possibly have the word sort of come unhinged and fall into a crooked position instead - that way you preserve your meaning while making sure the user has enough information to understand it.

I have a couple other nitpicks (nav is collapsed regardless of width, the blue arrow next to the “fail” animation is a link leading to nothing, and it took me a bit to find the external links on the footer), but they seem comparatively minor, and I should probably do some actual FCC assignments today instead of just writing on the forum.

Thanks again for the feedback!