First React Portfolio

I've officially completed my web development boot camp class! 🥳 I intend to be writing and checking in on this blog more frequently now that I have a little more time. After about one month and 250 commits, I deployed my first React portfolio site (elizabetholsavsky.com) and wanted to share some of the helpful tools and tutorials I found along the way. I have learned a lot of important features of web development that were not taught in my 6-month course through YouTube, internet research, and trial and error.

Planning

I began my portfolio by creating a labeled sketch of what I intended my website to look like and how I wanted it to function. I watched a lot of 'web developer portfolio reviews' on YouTube for inspiration. Despite the instructions provided by my boot camp for my official portfolio assignment, I decided to go with a scrollable portfolio with scroll snapping (which I had no idea how to achieve ...yet). I also wanted to create a custom timeline displaying past work and education as well as a contact form that would forward messages to my personal email. I was confident that I would be able to create a form but was still unsure how it would function. I hoped to achieve all of this with React and vanilla CSS, which I could also use to style a custom scrollbar, some sort of unique image display/animation, and add a dark-mode toggle. I planned to go with a clean style following the 60-30-10 design color rule and use a consistent color for calls to action. This video by Jesse Showalter explains how this design rule can give your site a clean and mature look.

Scroll Snapping

I started by creating a sticky navbar and a scrollable area. This helped me organize the structure of my site and create clear and defined areas for everything I intended to include. My sections include about (home), projects, resume, and contact.

I watched 'Portfolio Pure CSS Scroll Snapping Tutorial' by Filip Grebowski to help me achieve the scroll snapping for all sections in the main scroll container.

One problem that I would later encounter is that the scrollbar would snap to the next section before I could fully view the entirety of that section's contents which made text at the bottom of the area hard to view. I solved this by adding scroll-padding to my scroll container. This added padding at the bottom of each section so all content was easily viewable before snapping to the next section.

I also added behavior: smooth to my navbar links to make scrolling to each area a smooth and enjoyable ride. 😎

Projects

I wanted to be able to easily update my site with new projects as they were created and decided a dynamic approach would be best. To achieve this, I've developed a Project component that receives a list of projects as props. This component dynamically generates project cards, maintaining a uniform display style for each project. By structuring the project data as props, I can conveniently update my website with new projects as they are created.

John Smilga and Free Code Camp give an in-depth explanation of how to achieve this in the video 'Learn React 18 with Redux Toolkit – Full Tutorial for Beginners'. You can practice by building a dynamic booklist with John at the 1:26:35 mark.

I would encounter an issue with my project images in the future but will address that later with my Lighthouse revisions.

CSS Timeline

I had seen a few portfolio websites in YouTube portfolio reviews using sleek timelines to highlight key information about work and education and I wanted to try it out. I thought it would be a great way to summarize my resume while still providing a meaningful and easy-to-find spot to download a pdf copy. I knew that the timeline had to be easy to read and responsive for all screen sizes.

The video 'Responsive Vertical Timeline using Html & Css' by The WebShala helped me plan and visualize what my timeline would look like and how it would respond to smaller screen sizes.

Something extra I wanted to implement was adding SVG to my 'timeline dots' (which are just divs with a 50% border-radius). Keep reading to see how I incorporated SVG into my portfolio.

Scalable Vector Graphics (SVG)

Instead of using an icon library, I wanted to learn how to use SVG in my project. I would eventually need images for the timeline dots, social media links, and dark-mode toggle labels.

There are tons of free options for SVG but I decided to use svgrepo.com for this project. They have lots of different sets to match the vibe you are going for with a variety of line styles, widths, and colors. I learned that it is best to stick with one consistent style for all of your SVG on a single site. Picking icons from one single styled set makes this easy!

Once I had my icons picked out, I needed a way to incorporate them into my portfolio. Technically, I could just put them into an assets folder and link them as images but then I would not be able to change the color of the lines which defeats the purpose of using SVG. This would also be a big problem if I intend to incorporate a dark-mode theme later on.

The best solution is to include the SVG as individual components so they can be revised as needed. I found a helpful tool, SVGR (npm), that allowed me to easily create SVG components from the terminal.

SVGR can be installed using:
npm install @svgr/cli --save-dev

To create a SVG component, use the command:

npx svgr src/[rest of path to file.svg] --out-dir [path of where you want SVG component saved] --icon

Additional example from my project:

npx svgr src/components/ScrollContainer/images/icons/hashnode.svg --out-dir src/components/ScrollContainer/SVG --icon

(SVG from the images folder is created into a component inside the SVG folder)

NOTE: I ended up deleting the original SVG file (within images) after the components were created as they were no longer needed.

With this tool, I was able to easily create components for each of my SVG and then adjust the size and color with CSS.

Contact Form

Creating a contact form is easy enough, but where will that message go when the user hits send? I needed a free and easy email service that I could use without a backend.

I found the video 'Send Email With React (No Backend Required)' by Zino Trust Academy and decided to go with Email.js. Email.js allows you to send up to 200 emails per month for free and does not require you to enter any payment information. It was easy to customize and incorporate. Check out the docs!

Dark Mode

I had already taken a few steps at this moment to ensure the transition to an additional color theme would be easily applied. First, I selected a small collection of colors (following the 60-30-10 rule) and created a palette in my main CSS file. I gave each color a variable name that related to its 'job'. For example, my darkest color was named 'text' and my brightest color was titled 'action' for calls to action like buttons or links. I used these variable names throughout all of the components. I could now easily change the colors associated with each 'job' in the future for a theme shift. (For example, if I change the color of the 'text' variable then all text in the site will change to that color.)

The video 'Dark Theme React Application [Simplest Way] | Toggle Theme React Tutorial' by Code Bless You explains this well. Check out my App.css to see how I was able to easily create a dark mode for this site.

I also used sun and moon SVG to label my custom CSS toggle.

More CSS Fun

• Scrollbar

  I was able to create a custom scrollbar with the help of this video:

  'Create custom scrollbars using CSS' by Kevin Powell

• Image Display

  Instead of using a carousel or prebuilt component, I decided to create a custom image stack for my 'About' section inspired by the following video:

  ImNotGoodEnough.js by Hyperplexed

  I could relate to the quote, "When I break down the big problem into a bunch of smaller problems, the whole thing becomes manageable."

  I had to significantly modify how I applied these principles to my project but was pleased with how it turned out.

  The video also shared a neat resource created by Lea Verou to visually define cubic-bezier() parameters:

  https://cubic-bezier.com/

Deployment

I deployed my portfolio to Netlify after purchasing my custom domain from Namecheap. I used the following video to help me out:

'Setup a Custom Domain in Netlify in 5 Minutes' by James Q Quick

It really did only take 5 minutes! 🙌

Next Steps...

You might think the story ends here, but it's never that easy, is it? I was so proud of my finished site until the dreaded Lighthouse score. It was pretty brutal and my performance was trash. How could I fix this? See my next blog post to see how I got my site back to the green. 💪