Grow your CSS skills. Land your dream job.

Web Portfolio initial design critique/feedback

  • # February 5, 2013 at 9:12 pm

    I’ve just started redesigning my portfolio website and figured I’ll jump in the deep end of the pool with something a bit more on the unique side of things (You’ll understand when you see it). Now I myself think that the design is looking pretty damn good or at least a lot better than I had imagined it would when I had the idea originally.

    Anyway I’ve spent quite a few hours on this so my opinions might be a bit bias. I figured I’d post it on here to see what the community though of the style and the design itself.

    _Note: please ignore any inconstant margins or slightly incorrect angles. I rely heavily on rulers normally and rulers aren’t very helpful with this design. Rest assured they will be tidied up by the end._

    Here’s the design: [Click me](http://www.jamiepates.co.uk/portfolio.png “Portfolio Redesign 0.1″)

    Also this paragraph is slightly more of a CSS related query but I figured I should save an additional post and append it to this one. At this point I’m assuming you’ve seen the design and I was trying to work out the best way to style this kind of a website. I was thinking of adding an separate stylesheet solely for the transforms that rotate the various parts of the page allowing for it to be disabled for people who don’t want to read the slanted text. Wanted to check if this was a good idea or if someone had any better ideas on the matter.

    Thanks for reading my post and I look forward to your responses.

    # February 5, 2013 at 9:38 pm

    Hey, that’s pretty cool looking. I’d love to see it implemented.

    For the CSS question, I would definitely suggest that you put the angle code in its own file. One small caveat though: I’m a big Sass and Compass fan. I would have a both a `main.scss` stylesheet and an `_angles.scss` (or similarly named) stylesheet. Then in `main.scss` I would say

    @import “angles”;

    Compass will then concatenate your stylesheets. That way you can have your angle code separate from your main hunk for development, *but* you’re still only serving one file to the browser.

    If I couldn’t use Compass, *then* I’d go with a single stylesheet, because extra http requests are good things to avoid, if possible.

    # February 6, 2013 at 8:37 am

    Well thank you very much for the comment. I’ve never really tried using Sass or Compass so it could be a nice excuse to try one of them out. The only downside I’m seeing is that with the way you suggested I won’t be able to include an option to turn the angles off on the fly.

    I was thinking of having a line of text on the site saying
    >”Are the angles on this site making it hard to read? Click Here”

    # February 6, 2013 at 8:49 am

    please dont use the lobster font! :D the rest is amazing !

    # February 6, 2013 at 9:01 am

    Yeah, I’d definitely recommend preprocessing then. Here’s a video and a article that are good for getting started.

    For the angle option, what I would do is set the angles up like this:

    .show-angles h2 {
    /* angle code here */
    }

    And the fallback would be like this:

    .hide-angles h2 {
    /* unangled fallback code here */
    }

    And then you simply have to attach the class `show-angles` or `hide-angles` to the `body` of your page.

    You might also want to throw Modernizr in there and check if their browser supports CSS transforms, in which (since you’re using Sass) you can change your code to this:

    .hide-angles, .no-csstransforms {
    h2 {
    /* gotta love nested selectors */
    }
    }

    That way your fallback code will also show up in browsers that don’t support skewing.

    # February 6, 2013 at 9:14 am

    @Maxisix Aha thank you, mind you I’m in love with that font, what would you recommend instead? Open to suggestions.

    @Howlermiller I just had a quick glance at your post and I imagine it will make more sense to me once I’ve read the video/article. I ‘ll look into it when I get back.

    # February 6, 2013 at 9:33 am

    @Cyanoxide Sorry, I got a little carried away. :) If you need me to clear something up just let me know!

    # February 6, 2013 at 10:36 am

    @howlermiller If that’s the case then I’ll fire you a private message but I’m sure I should be able to get my head around it when I get to that stage.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".