Project 22 of 100 - React Portfolio Site

Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: www.jameshubert.com
Link to the repo: github

Who said you can't learn programming using a template? I was browsing through free React templates online and stumbled upon this excellent one from developer lindelof.

Not only do I now have a new personal website, but I learned a ton of new npm packages, a Twitter embed script, and a great front-end email sending tool called emailjs that I use to send emails from my website via an AJAX request. Lastly, this is the first website I've worked in that uses jquery in React.

There was a lot going on in this app so I'll stick to the big new lessons for me:

Takeaways

The first thing you probably noticed on pageload was the animated background. This was built using an npm package called particleBG that is pretty well known and widely used. I changed the type variant in the component for this bouncing polygon effect that I honestly felt more matched my personality. Structured yet energetic.

The next big change was simply the fact that nearly all of the text data was stored in a JSON file in the root of the public folder. This was such a cool approach that just took a little getting used to. Obviously this way of doing things makes the text extremely reusable and easy to keep track of and change. Even the image paths were listed here in json.

Next I had to change the actual resume pdf for viewers to download. Rather than serve it from a CDN I just placed the resume in the root of the public folder for all to see and for easy access. Clicking the link opens a new tab. I then had to change the favicon so that the favicon of the pdf viewer was my own.

In the skills section, I removed the percentage bars of the original template because I've heard that approach is a little outmoded. Why would you rate yourself low on a particular coding skill? And more importantly, are you really the person who should judge this? What does "60%" really mean in terms of a coding language? To remove this ambiguity I removed the status bars and dropped the css cdn for the devicons package into the index.html file. This is a great free icon set. You should definitely check them out and spread the word about this great list of developer-centric icons: link here.

Next, I had to change the logic of the email form. I noticed a jquery error every time I tried to send an email through the contact form that referenced a php file that wasn't in the template. Weird! This gave me an opportunity to check out a Javascript email package. Just like the old saying that "There's an app for everything"-- there's also a Javascript package for everything.

The emailjs library is simply dope (link here). Since the existing template made use of AJAX I was actually able to leverage most of the same code to build a POST request to the emailjs endpoint that routes the email to my personal email address. Here's what that code looks like:

var data = {
      service_id: 'service_axzv5mo',
      template_id: 'template_51l0y5p',
      user_id: 'user_KnegTaZntt40jdkK4c2T2',
      template_params: {
        reply_to: contactEmail,
        from_name: contactName,
        contact_subject: contactSubject,
        message: contactMessage,
      },
};

$.ajax({
      type: 'POST',
      url: 'https://api.emailjs.com/api/v1.0/email/send',
      data: JSON.stringify(data),
      contentType: 'application/json',
      success: function (msg) {
        // Message was sent
        if (msg == 'OK') {
        // handle successful send
        }
        // There was an error
        else {
        // handle error
        }
    },
});

Since this was my first use of Jquery and Ajax in React I want to personally congratulate myself. It felt good, and was characteristically easy to use.

Finally, the last major lesson for me was using the Twitter embed script and css. I plugged in the script portion at the bottom of the index.html page in the public folder. The anchor tag from which the actual widget is displayed was just dropped into the JSX of the Contact component, completely replacing the prototype JSX.

I had to manually write a quick script to check to see if the widget was finished loading using a setInterval function so that I could change an attribute on the iframe that is injected into the anchor tag and make the widget vertically scrollable, since I limited the height of the widget to 500px. That code was plugged directly into a script tag in the index.html page.

<script async src='https://platform.twitter.com/widgets.js'charset='utf-8'></script>
<script>
const widgetInterval = setInterval(() => {
  console.log('Loading Twitter widget...');
  let widgetEl = 
  document.getElementById('twitter-widget-0')
if (widgetEl !== null) {                
  widgetEl.setAttribute('scrolling','yes');              
  clearInterval(widgetInterval);
}
    },500);
</script>

Conclusion

I was pretty hyped that I could take a template and understand it and make it my own complete with a number of new packages and add-ons, all within 24 hours of deciding to do it. In my experience this is how a lot of actual development work is done so this was pretty gratifying.

And hey- now I have a new portfolio site! Thanks for reading.

Comments

[Iván Roldán Lusich]

Hey, great article!. Just wanted to point out that there are some misaligned stuff on mobile. And also I'd choose a lighter color for the text in the 'Get in touch' section, contrast is too low and makes it hard to read.
Other than that, great website!

[James Hubert]

Thanks for the constructive criticism @ivan ! You may be right about the color contrast. In all honesty I should probably make the site more accessible too. Will also check out the responsiveness. Thanks again!

[Nha Hoang]

Test