22

Show DN: Just rebuilt my portfolio w/ React.js

over 5 years ago from , Product Designer

Hi DN! This site is one of the first things I read in the mornings and I'm really excited to share my portfolio, which I completely redesigned and rebuilt with React.js recently. I'm currently working at an enterprise SaaS startup where we use React as our front-end so I can see how this might be overkill...but regardless, doing this side project was a lot of fun and I definitely learned a lot in the process. Let me know what you guys think :)

www.patricksun.co

UPDATE:

In response to comments about the back button not working, I rebuilt the whole thing with React Router and it works. Check it out!

57 comments

  • Paul BestPaul Best, over 5 years ago

    Wow, the performance is great, and it seems like a great way to get familiar with React. Very clean & intuitive design as well.

    Any chance you'd be willing to make this open source?

    8 points
    • , over 5 years ago

      Thanks - doing this definitely helped me get past React's initial learning curve. I think that I need to make some adjustments and clean up the code a bit before I share this but it's in the works :)

      1 point
    • Cihad TurhanCihad Turhan, over 5 years ago

      +1 for open source

      4 points
  • Vincent MillikenVincent Milliken, over 5 years ago

    Any reason why you choose React.js to build it in?

    6 points
    • , over 5 years ago

      Initially did it as an exercise to see how doing stuff in jQuery translates to doing stuff in React...then I found out how sick it was, both performance-wise and code maintainability-wise, so I stuck with it and cranked out the whole thing.

      5 points
      • Vincent MillikenVincent Milliken, over 5 years ago

        Awesome - I will be rebuilding my portfolio soon also so it was good to know, thanks!

        1 point
        • , over 5 years ago

          Yup! Excited to see it :)

          1 point
        • Jaskni WongJaskni Wong, over 5 years ago (edited 5 years ago )

          This world is so small, I just finished my portfolio site and I want to post it here and... I found this article and your comment LOL.

          My portfolio site is http://jaskni.com, hope you guys will like it and give me some feedback, thank you :P

          1 point
          • Account deleted over 5 years ago

            I think you accidentally linked to Patrick’s discussion by mistake.

            Just gave a really quick glance at your site. I really like the project page of the GitCafé project. Explanations and process make for a better understanding of everything. Well done.

            1 point
      • Account deleted over 5 years ago

        Right now this isn't really a functional website, despite how quickly the DOM responds to clicks. For instance – how does someone link to a specific project?

        2 points
        • Patrick Sun, over 5 years ago

          Just rebuilt the whole thing w/ React Router so the back button should work now - thanks for the motivation :)

          1 point
  • Thomas PalumboThomas Palumbo, over 5 years ago

    Impressive and really well put together. Only nit picky thing I have is that you have to hover to see if something is a link. I was originally trying to click those list items you had at the bottom. Maybe make the links a different color or just underline them? Great work man!

    4 points
    • Patrick Sun, over 5 years ago

      Good point man I'll def change those up a bit - thanks!

      0 points
    • Daniel De LaneyDaniel De Laney, over 5 years ago (edited over 5 years ago )

      Also, crossing out text means that it’s disabled or invalid in some way. The hover state of links is misleading:

      Hover state with crossed out style

      14 points
      • Bryce DriesengaBryce Driesenga, over 5 years ago

        I wonder if perhaps, to sort of keep almost the same aesthetic without the confusion, if there could be a black line behind red text or red line behind black? Either way, having the line behind the text could be interesting.

        0 points
      • , over 5 years ago

        Fixed! Thanks for pointing this out :)

        0 points
  • Spencer HaizelSpencer Haizel, over 5 years ago

    Seems to be a side-scroll bar on every page?

    Looks great and is speedy as hell though, kudos. Would you mind sharing the code?

    2 points
  • Jeremy Peters, 5 years ago

    I’m surprised this hasn’t been mentioned yet. The site looks great and I imagine it was a good exercise in getting to grips with React, but it’s not really the best tool to create a brochure website or portfolio as there is no content for search engines to index, unless you take the isomorphic approach.

    1 point
  • , over 5 years ago (edited over 5 years ago )

    Updated: More visible buttons + logo at the top ;) Thanks for all your feedback!

    Image alt

    1 point
  • Jim SilvermanJim Silverman, over 5 years ago (edited over 5 years ago )

    wish the browser back button worked tho.

    1 point
  • Erin PangilinanErin Pangilinan, 5 years ago

    Love this! Also trying to convert my old portfolio I made in Skeleton (had used Foundation and Bootstrap before and got sick of it), but want to challenge myself to make it in React. Do you have a link to a GitHub repo of your portfolio?

    0 points
  • Andrew ColcloughAndrew Colclough, over 5 years ago

    Super cool, Patrick. Working on something like this myself in fact. Nice implementation.

    0 points
  • Dirk HCM van BoxtelDirk HCM van Boxtel, over 5 years ago

    If you set a width/height inside an img tag, it'll reserve the space for when the image loads, reducing the "choppiness" of the rest of the page loading.

    Love the job you did here, hope it'll help you get many many gigs or perhaps land you that one big gig!

    0 points
  • Account deleted 5 years ago

    When I am viewing a portfolio project page (for example Instatrack) I think it would be really valuable to have the title of the project at the top of the page because when I navigate through your portfolio projects I don’t immediately understand what the project is. This also means it’s really easy to get lost. I have to read the small text in order to get an idea of what it is.

    Maybe you could have the title of the project, the client you did it for, the technology you used, what type of project it was, etc. as quick details at the top to sum up what the project is rather than having the user read through paragraphs of text i.e. don’t make me think ;-)

    I also think each portfolio page should have a banner image at the top that represents the project and really makes a good impression because otherwise I have to scroll down to start seeing some examples of your work.

    Another thing is that the pages should have some sort of transition between them. Loading spinner, texts and images fade in, etc. For the moment, things change a bit too suddenly (although the speed is impressive at the same time).

    I like the simplicity of the site and well done for learning React (and applying it) but I’m just trying to give you constructive criticism to help you improve the site to achieve it‘s goals (which are presumably to showcase your work and/or get hired by someone).

    Hope that helps :-)

    0 points
  • Jack CallisterJack Callister, 5 years ago

    This is really nice! I'd love to see some animations in between page transitions. Is it isomorphic? You need to add keys to get rid of those pesky array iterator warnings.

    I've been doing 'micro-consultation' (around 2-3 hours) getting folk up to speed with React, React Router, Flux + Redux, Webpack, isomorphism, Node and the surrounding eco-system. Thought I'd put the offer forward to the design community too.

    If anybodies interested you can contact me through my website :)

    0 points
  • Florian Schulz, 5 years ago

    I wonder how you separate UX from Product / UI Design?

    0 points
  • Andrew RasmussenAndrew Rasmussen, over 5 years ago

    Are you using React Router? The first thing I did was click on one of your projects and then try to navigate back using the back button but couldn't. If you set up React Router and do these transitions through their navigation APIs then browser navigation will be all hooked up.

    0 points
    • , over 5 years ago (edited over 5 years ago )

      Wow can't believe I'm getting feedback from someone who actually worked on it but yeah - working on redoing it w/ React Router as I type :)

      UPDATE:

      Just rebuilt the entire thing w/ react router. Amazing stuff

      1 point
  • Luis La TorreLuis La Torre, over 5 years ago

    I'm also working on my portfolio, in React as well. Any boilerplates that you can share?

    0 points
  • Andrew McWattersAndrew McWatters, over 5 years ago

    Sick portfolio, dude!

    0 points
  • David SawyerDavid Sawyer, over 5 years ago

    Nice stuff! It'd be great if, when you clicked on a project, you appended a hash value to the URL. That way, when you click the browser's Back button, you are taken back to your website's home page instead of being taken away from your site to the previous page you were on.

    0 points
  • Shirley MoralesShirley Morales, over 5 years ago

    I'm a dingus and I kept clicking on PSCO waiting for something to happen, until I noticed your links were below my fold. Really liked the Prev / Next links top right, made it easy to navigate through your portfolio items.

    0 points
    • Jason CJason C, over 5 years ago

      I agree with his sentiment. The PSCO graphic is quite interesting, but perhaps it's being given too much space while not providing much functionality for the user.

      It took me a few seconds to realize that your links were down below. Also, both links and non-links down there are styled exactly the same, so finding what I can click on is a guess-and-check game.

      0 points
    • Patrick Sun, over 5 years ago

      Yeah I actually agree with this and it's fixed!

      0 points
  • Patrick SchneiderPatrick Schneider, over 5 years ago

    nice site, love all the action react.js is getting lately!

    0 points
  • Jan LehtinenJan Lehtinen, 5 years ago

    Solid overall design and very fast site, maybe some transitions/animations could be added for some "wow" effect?

    0 points
  • Kevin RabinovichKevin Rabinovich, over 5 years ago

    I like this overall, though I would make your skillset and portfolio more visible; I spent a little while wondering what I was supposed to do with / to that “PSCO” in the middle. Also, is your code published somewhere?

    0 points
    • Patrick Sun, 5 years ago

      Thanks! Still got a few ideas I'm playing around with for the logo in the pipeline...And not at the moment but I might do that in the near future as well :)

      0 points
      • Rick LanceeRick Lancee, 5 years ago

        Yeah you should really put your sites source code on github, it can tell a lot about your skills.

        0 points