28

React based Portfolios

over 2 years ago from , Front End Developer & Designer

Hey DN, I'm looking at rebuilding my portfolio using React, and am looking for inspiration! I know this has probably been asked many times before, but would love any examples of React based portfolio sites. Thanks

39 comments

  • David Steelcart, over 2 years ago

    What is the difference between a portfolio using react vs any other front end language...? Maybe I'm missing something but seems like a slightly odd question to me.

    31 points
  • Clay MacTavishClay MacTavish, over 2 years ago

    Why use React? I'd ask yourself what you want your portfolio to do rather than start with React and just build something.

    The reason I say this is because if I'm looking for a developer with React skills I'd rather see an interesting project than a simple portfolio page with a few simple components. Maybe your portfolio page is an application?

    18 points
    • Adam RasheedAdam Rasheed, over 2 years ago

      Maybe its an exercise to learn how to use React?

      13 points
    • Andric ThamAndric Tham, over 2 years ago

      Because React makes it easier to reason about your webpage as a function of dynamic data (either coming in from Contentful or Firebase). It’s a better abstraction especially if you’re a designer or content creator.

      You don’t want to be messing about with Jekyll’s liquid templating tags or Handlebars or string concatenation with jQuery when you can use JSX.

      The upside is you can update your site without recompiling your code each and everytime, hook it up to external APIs, and with create-react-app you can host your site for free on Github, which is a major plus!

      4 points
      • Hamish TaplinHamish Taplin, over 2 years ago

        You can get all of that with a decent CMS (eg Craft) apart from the hosting on Github bit.

        2 points
        • Andric ThamAndric Tham, over 2 years ago

          Yes, but then you’d lose the benefits of using JSX, which could be a matter of preference, but I feel it’s still a better way of reasoning about your website.

          I’ve built things in vanilla HTML/CSS/jQuery, Jekyll, WordPress, and Webflow, and the React + Contentful combo provides the best developer experience, in my experience, because it matches how I think about this.

          By all means, go for the technology that makes you the most productive. Even if it’s not the most comfortable (because of the learning curve) to you at first.

          2 points
  • Madison BullardMadison Bullard, over 2 years ago

    I don't know any individual artist portfolios built using React off the top of my head, but the fantastic game developers ustwo have a React-based site: https://ustwo.com/

    The best part: it's open source https://github.com/ustwo/ustwo.com-frontend

    9 points
  • Florian Cordillot, over 2 years ago

    https://floriancordillot.fr

    6 points
  • Gavin AnthonyGavin Anthony, over 2 years ago

    I just finished my own portfolio, which I wrote in React: gavinanthony.comGithub.

    I chose to not use anything like Gatsby.js, trying to keep it pretty simple. It's just react, react-router, and graph.cool for form submissions.

    4 points
  • Alec LomasAlec Lomas, over 2 years ago

    jon.gold & cortes.us are both built in react.

    2 points
  • Phil K.-T.Phil K.-T., over 2 years ago

    Gonna pitch my personal react-written portfolio here: philkt.me

    2 points
  • James Ciclitira, over 2 years ago

    Built mine as a learning exercise. Using phenomic a static site generator based on React.

    1 point
  • Amelia WattenbergerAmelia Wattenberger, over 2 years ago

    Feel free to check out my my site's code on github. It's waay overkill for a personal site, but I treat it as a playground.

    1 point
  • Art VandelayArt Vandelay, over 2 years ago

    I'd advise against unless you understand the fallbacks.

    Biggest one being SEO/URL since you may not enable actual page refreshes or server-side rendering.

    Most folks say "oh who cares about SEO!" Which is generally true but when none of your page actually changes it can have drastic effects on how your work proliferates throughout the web.

    1 point
    • Darrell HanleyDarrell Hanley, over 2 years ago

      You could just create the project as an isomorphic react project, or if you're using this with some cms, you could just have the backend pre populate the relevant meta tags for sites like Facebook..

      0 points
      • Art VandelayArt Vandelay, over 2 years ago

        All this to say we're recreating something servers and CMS' already do just to write stuff in the "flavor of the week" JS framework.

        Not knocking your comment. Just find it funny when folks end up using something like WP with the API just because they want to bloat shit in a JS framework where 3 templates and out-of-the-box server-side rendering would've sufficed right from WP

        0 points
        • Darrell HanleyDarrell Hanley, over 2 years ago

          You're relying on server side rendering for all of your subsequent pageviews. Using React or some other front end library with its own routing will ultimately be faster for the user to load. It also allows for seamless transitions between pages.

          React is also far from being a flavor of the week JS library. It's shown incredible growth over the last few years and represents a fundamental ideological shift in how developers are thinking about Javascript and its relationship with the browser. Perhaps you should spend some time reading about React and its merits.

          1 point
          • Art VandelayArt Vandelay, over 2 years ago

            So first, there is an assumption that I haven't read up on React. False. By that merit you sound like a dickbag. But its cool, not judging.

            Second, the point I'm making is the subsequent page loads still get data from..............the server. So while yes, the page loads are fast, there is still a request to the server. Unless we're loading all subsequent page data in state? Which seems like overkill.

            And if that is the basis of an argument for React. Server (and page) caching on subsequent visits is also - fast.

            Using React just to use it is totally fine. Using it assuming its "what you're supposed to do" is terrible. Using a JS framework meant for state, etc for an entirely, otherwise, static website seems overkill. Over-engineering.

            But as I mentioned, if the other of the post wants to try React. A portfolio is a great use case.

            0 points
    • Adam Kirkwood, over 2 years ago

      I think SEO and semantic URLs are not as much of a problem now especially with solutions such as https://github.com/zeit/next.js

      I plan to rebuild my portfolio using React hosted on Zeit.co soon.

      2 points
      • Dominik LevitskyDominik Levitsky, over 2 years ago

        We used Zeit in our recent project and it turned out to be really amazing! Really easy to use and no unneeded features. Tried a lot of different alternatives before that, but Zeit won the competition.

        2 points
    • Stephen Kempin, over 2 years ago

      I believed SEO was no longer an issue with server side rendering and Google's ability to execute JS today?

      0 points
      • Art VandelayArt Vandelay, over 2 years ago

        You may be right! Last I checked it said it was asynch so if you're data wasn't there, then it keeps going. But I am probably wrong.

        0 points
  • Amy McCarthy, over 2 years ago

    http://www.amymccarthy.co/

    1 point
  • Warren BaskinWarren Baskin, over 2 years ago

    React is likely overkill for a portfolio, unless you're using it as a learning exercise. I suggest that you first determine your expectations, and create a design (or static version of your site).

    Chances are, you'll be using React for just a fraction of what it's capable of - in such cases, writing your own JS is usually more fun and optimal.

    1 point
  • Markus BerghMarkus Bergh, over 2 years ago

    Https://markusbergh.se/

    1 point
  • Thomas Hoadley, over 2 years ago

    www.thomashoadley.co.uk

    1 point
  • Jan ZhengJan Zheng, over 2 years ago

    put your mind to the content—what story do you want to tell, and how compelling it is—before choosing a technology.

    Most likely React is overkill

    1 point
  • Krish Dholakiya, over 2 years ago

    http://itskrish.co (it's a work-in-progress)

    0 points
  • , over 2 years ago

    Thanks all. I've been looking into SPA's for a while, due to the UX advantages these can offer. Am I right in believing that SEO is no longer an issue, with SSR and google being able to execute JS on SPA's now?

    0 points
  • Conor Luddy, over 2 years ago

    Yeah, I'm working on my own in React. http://www.conorluddy.com/development/this-site

    0 points
  • Alexander Haniotis, over 2 years ago

    https://ueno.co/

    0 points
  • Kuanysh BayandinovKuanysh Bayandinov, over 2 years ago

    What’s your reasoning?

    0 points