DEV Community

Cover image for How to make your own (no template) personal website with React, Material UI, and Netlify

How to make your own (no template) personal website with React, Material UI, and Netlify

Sylvia Pap on June 27, 2020

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 t...
Collapse
 
hangindev profile image
Jason Leung 🧗‍♂️👨‍💻

Good that you decide to make your own website without using template! Now this website is going to become your new playground where you can do whatever you want and build with whatever new tools you want to learn. Have fun and looking forward to your updates! 🍾

Collapse
 
stereoplegic profile image
Mike Bybee • Edited

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.

You're documenting your learning journey, and putting content out there for hiring managers to see. Absolutely nothing to be afraid/ashamed of.

Besides, there are plenty of "[not/yet] another [things]" out there that are fantastic. Constate is yet another not-Redux state management library based on hooks and context, and it's one of the few of ANY sort of state management libraries that works with Concurrent Mode right now.

Portfolio looks great, BTW.

Collapse
 
fabrice profile image
Fabrice

Hello,
If you like React, there is also this portfolio dev.to/jcoelho/personal-website-te...
On my side, I preferred to use Nuxt, based on Vuejs and the FRESH resume schema, a JSON schema.

Collapse
 
paulycloud profile image
Paul Kamau

Hey!

So is this entire setup serverless? Are there any costs tied to using Netlify?

Thanks,

Collapse
 
sylviapap profile image
Sylvia Pap

Yes! No costs for me, just the domain purchase with Namecheap, but Netlify is totally free for my purposes here :)

Collapse
 
paulycloud profile image
Paul Kamau

That's pretty sweet.

For your continuous deployments, do you do this directly from the console? Assuming your code is on GitHub, is it possible to deploy certain branches/tags?

For my personal and business site, I am currently using Amazon S3. The setup process was pretty cumbersome at the beginning but the CI/CD pipelines with Bitbucket make it worth it afterwards.

Thread Thread
 
bhansa profile image
Bharat Saraswat

You can deploy certain branches, and you can trigger the deployments on every commit pushed to your branch automatically. I created a small website covidtrackerlite, it is hosted on github and connected with netlify for deployments. As of now I am using the master branch only.

Collapse
 
gorpalicious profile image
Gorpalicious

Really like the look of the site, although the text is hard to read. I'd try to look into some quick fixes on the accessibility front that Lighthouse suggests

Collapse
 
sylviapap profile image
Sylvia Pap

Hey thanks! Do you mean on my old site or new site? The old site was hard because of the white font and I'm just keeping it up on github pages for fun but it's not my portfolio site at my custom domain anymore. But the new one is pretty much all black and white/straight from Material UI. Or do you mean specific parts like my nav bar?

Collapse
 
gorpalicious profile image
Gorpalicious

I'm a doofus, I meant the old one. Sorry.

Thread Thread
 
sylviapap profile image
Sylvia Pap

oh no worries!! this is good to know actually, i was worried my wording/organization was a little unclear 😂 i'll edit my post with clearer links

Collapse
 
itzsaga profile image
Seth

👏🏻 the site looks great!

Collapse
 
spiritupbro profile image
spiritupbro

cool also learn to compress the js and css into smaller files so when analyze it using lighthouse it will make a great performance

Collapse
 
mungojam profile image
Mark Adamson

Thanks for sharing, I've mainly used bootstrap so far but I think we are hitting it's limitations so you've inspired me to check out material ui

Collapse
 
farid_aditya profile image
Farid Aditya

thank you

Collapse
 
bhansa profile image
Bharat Saraswat

Looks good! :)