89
Show DN: Joel Califa is Sad — my new portfolio. (joelcalifa.com)
over 8 years ago from Joel Califa, Senior Product Designer at GitHub
44 comments
Jim Silverman, over 8 years ago
10/10 would hire.
Joel Califa, over 8 years ago (edited over 8 years ago )
EDIT: By the way, currently looking for a full-time position in NYC.
The theory here is that the kind of people I want to work for are the kind of people who are interested in this level of depth into my process. Those that aren't can skim. I'm thinking of adding an "easy mode" button that will get rid of large blocks of text and leave simple explanations + pretty pictures.
Critique is more than welcome. This is v1 and I'm already planning a few changes in the near future.
The portfolio is powered by Jekyll on an nginx server and uses stuff like picturefill for speed.
Cheers!
Jad Limcaco, over 8 years ago
Love your site man. Very simple but you still managed to let your personality shine through. Love the old OS button, nice touch.
Jim Nielsen, over 8 years ago
Really nice portfolio. I think explaining your projects rather than just showing them is always a good move.
Also, I LOVE the "checkmark" next to your portfolio items, making it easier to see which ones I've looked at and which ones I have yet to see. Very subtle but helpful touch!
Planning on writing a short blog post about that. Turned out to be slightly more complicated than I first thought, since both Chrome and Firefox removed most of the a:visited functionality for security purposes. Had to replicated it with localstorage for internal pages.
Oh really? Interesting ... yeah right off the bat when I saw that, I thought, "that's cool, you probably probably just do:
a:visited:after {content: "check mark"}And it would work great!" but I guess it's not quite that straight forward eh? I'd read that blog post, you should write it :)
I'll keep you posted :)
Willie Morris, over 8 years ago
Really clean and fresh. I especially like the little easter egg with old HTML tags and what not when you click on the "these buttons" button. Solid.
Jason Perez, over 8 years ago
The buttons and the "delight" animation were great. Nice job.
Margo Yoon, over 8 years ago (edited over 8 years ago ) Joel, your portfolio is really awesome. I am currently redesigning my site too, and have been scourging the net for some good examples of what I'd like my site to be like. Yours is perfect. I really enjoy the fun microinteractions on the site, and that each project is set up like a case study. Your site is an excellent example of what the future of design portfolios should look like. AWESOME JOB!
Corey Ward, over 8 years ago
Clever intro copy. I like it,
I'm not fond of the behavior on the 3 top blocks (“President at…”, “Director at…”, “Designer at…”), though. They set an expectation of being links, but then they flip around to reveal more information. When that happens, the organization name disappears, making it hard to follow. It also feels like the link ran away from me.
Thanks! Great feedback. I've heard that from some other people as well.
Floyd Williamson, over 8 years ago (edited over 8 years ago )
Ted McDonald is happy, as he browses Joel's portfolio.
Marcel Wichmann , over 8 years ago
I seldom comment like this but I'll make an exception: Wow! Nice work man. Clicked the link and thought "nice!", scrolled and thought "whoa!", scrolled a bit further and giggled because of the button.
Kudos!
Rachel Cohen, over 8 years ago
The favicon is a great little detail — great work, Joel!
Sarah Robin, over 8 years ago
Holy crow. I love the feel of this site, the content has a delightful voice, and its probably my favorite portfolio I've seen in a while. Awesome job!
Nick Tassone, over 8 years ago
Great work! I read through it all. Love the attention to detail in both the design and the copy. Love the "✔ Seen" label on your case studies.
Nitpicking but you could probably give some extra space at the bottom (or a footer) on the Work page.
Thanks! Do you mean individual work pages or /work ?
Just on /work it could use some margin.
Thomas Cowart, over 8 years ago (edited over 8 years ago )
I'm not a designer, but this is a delightful portfolio. I really like the little animations, like the flipping on the squares at the top. I have one minor critique and one less minor.
Minor - I think that a fade/out in the background color change on "Check out his text heavy portfolio" mouseovers would be nice.
Less minor - The message of being sad unless you are working on something cool is not what I would want to send to employers. Pretty much every job is going to involve working on non-cool projects sometimes and you are signaling that maybe you won't do your best on or have a bad attitude towards them. I don't think that's something you want to signal, as I imagine that it's not true.
Surjith S M, over 8 years ago
Then the title should be Joel Califa is Sad - His new Portfolio
Mike Mai, over 8 years ago
First time I see the term Full Stack Designer, I like that title. Very nice site, too. I love reading case studies instead of looking at dribbbbbbbbbbbbbbbles.
Dave Gorum, over 8 years ago
Nice work duder.
Hey Dave, thanks a lot :) I still remember you critiquing my first portfolio.
Bernardo Farah, over 8 years ago
I'm running into this issue on Chrome 36 on Mac at 1240px width. The right box keeps disappearing when I hover over the others.
Great portfolio, though! Great animations. Love the idea of an easy mode. I also love how you're including emails (though it seems like the image on those emails isn't always representative of the sender – maybe add a "default sender" that is not you?)
Oh weird, I've never seen that! Is it just disappearing or being pushed down to the next row?
I think maybe I missed a few emails in the rush to complete this :P I'll go over the whole thing this week.
Cheers!
Looks like you're right, it's probably being pushed down to the next row. When I removed the margins entirely, the bug didn't happen. Probably more of a browser bug.
Cool! Well, congrats on completion!
Question: Did you read one of the work posts or just the front page?
jj moi, over 8 years ago (edited over 8 years ago )
I checked out 6 out of 9 projects. http://cl.ly/WWfv and spent about 6 seconds on each on average.
It is indeed text-heavy. Took me a while til I found the index of work.
What happened after 6 seconds? Did you get bored or were you just trying to see as much as possible quickly?
How did you end up finding the index of work?
Thanks!
I usually skip the first parts and see if any images attract my eyes to get a good idea what the project is about. If they seem interesting then I will go back and read from the top. In your case, Do Share, for example, the images aren't anything that need much time to digest, I can just read the caption and can guess the rest. Now the text is very long - plus I judged that the text is as useful as the images so I lost interest to read. Also, some images seem redundant like the part to create a new draft. You can probably combine them into a single image. The email from the guy takes up too much space too. I feel like that part should be in a blog instead of the portfolio where you could discuss about it deeper.
For the work index, when I first saw "Check out his text-heavy portfolio", I thought it's just another h1 so I scrolled pass all the way to the end and with surprised there's no work. So I scrolled way back to the top to see if I missed them in the first place. Then I slowly scrolled down and still needed to guess they are links to work. I think the layout looks so much like product features on product websites - that's why I missed them.
But p.s., your website is awesome. It's refreshing to see a portfolio with such originality in these days.
Oh man thanks for taking me through that! I'm having trouble balancing the site between people who need to understand how I think and work, and people who are mostly interested in visuals and the final product.
For the work, I'll probably be adding images soon in some shape of form. Hopefully that solves the issue of some people missing it.
I really appreciate you taking the time to write this out :)
Question: What could be better about this?
Ashraf Ali, over 8 years ago
Initially, the three boxes you have at the top, I thought they would be clickable. Hover reveals the description but still no clickthrough link. I would think about adding a link there.
The button made me smile and brought back so much nostalgia. I love how you tap into the little HTML nerd in all of us.
I like how you color outside the lines with your portrait. Why not extend that to the three boxes you have? It would bring together your design.
In terms of copy, it has a refresh hierarchy. I would have inserted one more line after "He doesn't always write in third person." to mimic the "most interesting man" ad (i.e. "but when he does, it's with Jekyll and coffee.")
Thanks, man! Awesome feedback.
It was originally "He doesn't always write in third person, but when he does, it's him that's doing it." People told me to tone it down a notch :P
Personally, I try to avoid the use of pure white and black in an overall design, due to the fact that you essentially give up black and white as tools for creating high contrast focal points in a layout, and muting everything slightly kind of ties the room together.
For example, the solid white background on the top three projects when you mouse over it could be like 95% opacity, and I think it would look a little nicer and slightly less stark.
Also, for the pages for the portfolio examples, I really feel like there might be a better layout for the images+text that wouldn't result in such a tall single column. Lots of work to read and scroll through - doesn't make me want to read the details.
That being said, I love the small attention to details (which portfolio entries have been viewed, the delight animation, etc) and its a fantastic portfolio I'm a bit jelly that I didn't come up with.
Thanks for the great feedback. I tried moving the photos out of the column at some point (placing them to the left of the text where I needed them) but they ended up being too small. What would you suggest for a better reading experience?
Ryan Glover, over 8 years ago
Really nice, simple work.
Matt Achariam, over 8 years ago
Nice work Joel! noticed a small issue with hierarchy/z-index on the table of contents menu of your blog. When the window gets resized the nav buttons become inaccessible.
Hey, thanks! I actually ported that page over rather quickly from a standalone site :) As a result, there are still a bunch of annoying bugs to fix.
Trying to figure out whether I'll ever need a ToC again, in which case I'll build something new in the global stylesheet.
Bilal Mohammed, over 8 years ago
A very engaging portfolio to say the least.
Thanks for sharing this, Joel. Inspiring stuff.
Francesco Bonomi, over 8 years ago
Brilliant!
Athyuttam Reddy, over 8 years ago This is really good, Joel! ;)
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now