Sometimes I feel like everything I write on here could be prefaced with "Not another [general category] post..." but I am still relatively new to this world so I'm still covering and re-covering basics, but also finding very subtle ways that I can add to seemingly exhausted concepts. So specific to this post - yes, I know, there are a ton of tutorials out there for making your own personal site. Here are some of my favorites for getting started (if you somehow haven't read anything else relating to personal sites/portfolios before my post, I recommend starting with these, especially the first):

• Portfolio Site How-To For New Developers
• Building a Kickass Portfolio
• How To Build A Great Technical Portfolio
• How to create your portfolio website using React.js
• I Created My Portfolio with React and Some Magic
• new-personal-site-who-this

My current personal site is almost entirely a template. I used HTML5Up and I really loved it. Easy to use and tweak if you want to customize a little. I used the "Ethereal" one, which is probably one of the most common/recognizable but I still think it's so pretty/aesthetically pleasing, and the horizontal scroll/accessibility are especially cool to me. It also looks great on mobile. Here's with very slight modifications and of course my added info. I think I'll keep it on as well, because I think it's so pretty and fun. I love the gallery feature, and I plan to look into making something like that from scratch for my new one, but again - all in good time.

Quick note on template vs. no template - when I finished my bootcamp, I wanted to start applying to jobs ASAP so I prioritized quick and easy on my portfolio site. I also don't have that many projects (relatively) and I link pretty much everything from the site on my resume as well, so my site probably wasn't serving that much of a purpose. So again - my priorities were pretty and fast so I could spend more of my time doing other things, like learning... {checks notes} data structures and algorithms?

But then I got sick of doing nothing but leetcode, realized I had barely touched React since my bootcamp, yet am applying to a lot of positions that value React, so this seemed like a good time to get back in the ol' game and actually make my own site.

Another quick note on whether or not to use React - I didn't use React on my first site, because it seemed unnecessary. The beauty of React (I think?) is its scalability, so it felt kinda lame to use it for such a small site. I still kind of think my ultimate goal here is using nothing but my own HTML, CSS, and vanilla JS.

If you haven't seen it yet - my favorite personal site is from Dev's very own, Ben Halpern.

But then I thought, again, I'm applying to a lot of jobs looking for React experience. So maybe React isn't necessary here, but it's a good exercise/refresher on using it at all. So here we are. React reacts only.

I started off thinking I would write all my own CSS, no libraries like Bootstrap. I did that for my final bootcamp project and I enjoyed it because I wanted as much flexibility as possible. But then I started selecting elements and tweaking colors and the clock started doing that thing in movies where the hands start spinning faster and faster so you know the main character is wasting a lot of time and working too hard.

Then I realized I had never used Material UI, so this could be a cool chance to try a new thing, but also make my life easier without going full template. But again - nothing wrong with a template. Here are some nice React specific templates I enjoyed looking through.

Anyway, that's my spiel. There are a lot of tutorials on making a personal site, and a lot of tutorials on React, and a lot of templates for a personal site with React, but not a lot of super up-to-date articles on the basics of making your own personal site with React. So here's my "tutorial" - in quotes for now because I'm not sure how in depth this will be. Might be more of a "walkthrough," or, "overview," if you will, if you're a stickler for terms.

Setup

npx create-react-app personal-sitecd personal-sitenpm start

I'm also trying to do something slightly different from tutorials I've seen that do the same thing, but with jQuery. I honestly... have just never even used jQuery before. Sorry. This might be hacky, but I wanted all of my personal data in a file for single-source-of-truth updating. I didn't do that on my first site. But now I have a simple data.js file in a services or constants folder within src and this is basically all it contains so far:

export const data = {  name: "Sylvia",   occupation: "Software Engineer",  description: "looking for work",  image: "profilepic.png",  ...  }

and then, in any other React component I can add:

import {data} from '../services/data'

and then use constants:

    const name = data.name;    const description = data.description;    const profilepic= "images/"+data.image;

and I saved profilepic.png in an images folder within public.

I also use App.css for any minor changes to css and import it in App.js. For example, my profile picture was a bit too large so I added to my App.css:

.profile-pic {  height: 250px;  width: 250px;}

Material UI

Before this, I had only really used Bootstrap and Semantic UI. This isn't really a post about the specifics of CSS libraries, but here are some nice articles that I skimmed when deciding to use Material:

• 6 Best ReactJS based UI Frameworks
• Choosing your CSS library with React

Tldr - Material is popular, easy to use, and looks good enough for me for now. Plus... Google. So I pull up the docs and get going:

npm install

// with npmnpm install @material-ui/core// with yarnyarn add @material-ui/core

and that's all you actually need. But for font, icons, and responsive meta tag, I also did the following:

// for svg icons// with npmnpm install @material-ui/icons// with yarnyarn add @material-ui/icons

and add to index.html within the <head> element:

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />    <meta      name="viewport"      content="minimum-scale=1, initial-scale=1, width=device-width"      />

At this point, I also like to change the icon links to something besides the React default. I just save something like a little moon emoji and change to:

<link rel="icon" href="%PUBLIC_URL%/moon.png" />

Hosting on Netlify

I wanted to use Netlify because, again, chance to use something new, and I remember reading this post and thought Netlify seemed cool and fast. Again, my site is so small, it might not matter. But it does seem faster than GH Pages even on this small scale. So yay!

See the following article for setting custom domain:

• Setting up Domain with Namecheap & Netlify

This might be a straightforward process to most, but it was new to me, and I was happy to have this excellent and clear walkthrough.

But as far as just hosting a React app on Netlify goes, it's usually simple. I ran into more difficulty than expected, possibly because I jinxed myself by writing 'it's simple' before actually doing it lol. Anyway I think I came to the conclusion that the best path is to run the following:

npm run buildnpm install netlify-cli -gnetlify deploy

and I set up continuous deployment, following the terminal prompts and browser options. More in depth steps from the docs and a how to guide.

Work in Progress

As with anything, this is a work in progress. I probably spend too much time editing (and by "editing" I mean clicking back and forth between #9ba6c9 and #8d95b8 until my contact lenses fall out) but at the same time, I sometimes entirely move on and get way too deep in another project and forget to edit things like this entirely! But maybe this blog post will motivate me to keep editing/looking for better ways to do certain things.

I noticed while writing this a ton of things I want to fix before actually deploying to my custom domain lol oops! So sylviapap.com is still the old HTML template one. I'll hopefully update soon, but wanted to get this blog post out without feeling the need to perfect my actual site first.

Resources

• HTML5Up
• Setting up Domain with Namecheap & Netlify
• create-react-app
• Embed Dev.To Posts
• How to deploy a React application to Netlify

Image credit: Unsplash