This is a React based personal resume website template. It based on Tim Baker's code, however I changed here multiple things and added matrix effect, contact form, text typing effect, and removed all annoying errors with latest react versions. Built with typescript on the Next.js framework, styled with Tailwind css, and populated with data from a single file, you can easily create, customize and host your own personal website in minutes. Even better, the site is fully mobile-optimized and server-side rendered to ensure fast loading and a clean UI on any device. Read on to learn how to make it your own.
To build this website, you will need to have the latest stable versions of Node and Yarn downloaded and installed on your machine. If you don't already have them, you can get Node here, and Yarn here.
Next, find the Fork button in the top right of this page. This will allow you to make your own copy, for more info on
forking repo's see here. After
this, download to your development machine using the green Code button at the top of the repo page.
Once you have your own copy of this repo forked and downloaded, open the folder in your favorite terminal and
run yarn install to install dependencies. Following this, run yarn dev to run the project. In your terminal you
should be given the url of the running instance (usually http://localhost:3000 unless you have something else running).
All of the data for the site is driven via a file at /src/data/data.tsx. This is where you'll find the existing
content, and updating the values here will be reflected on the site. If you have the site running as described above,
you should see these changes reflected on save. The data types for all of these items are given in the same folder in
the dataDef.ts file. Example images can be found at src/images/ and are imported in the data file. To change, simply
update these images using the same name and location, or add new images and update the imports.
I added EmailJS contact form with reCaptcha. to use the contact form simply edit the file ContactForm.tsx
1. row 55: insert your serviceID, templateID, publicKey from EmailJS
2. row 119: insert your recaptcha sitekey from reCaptcha
Of course, all of the code is there and nothing is hidden from you so if you would like to make any other styling/data changes, feel free!
After editing the content, deploying your React based static website to netlify is simple and free. It takes nearly 2 minutes to push your forked repository to production. You can join here. Congratulations!