This is the Minimal Personal Website + Portfolio template for the latest version of Astro (v5.x.x)
This is the same template I use for my personal website! You can use it to build a personal website and portfolio that suits your needs! Read below to learn how to use this as a template for your own personal website!
I deployed my site via Netlify, but there are many other free services where you can deploy your site. I reccommend Netlify's or Vercel's free tier, or Github Pages, but it is completely up to you!
- Light or dark mode
- Fade in animation for all pages
- Gradient card for page data
- Footer links
- Mobile-friendly (responsive)
- Automatic sitemap generation upon build
- Home - This is the main page. The headline below the name has a typing animation
- About - This about page has an image with some text. The text goes below the image on small screens
- Projects - A list of projects, with relevant icons.
- Resume - links to a PDF of a resume
Want to create your own website from this template? Click Use this template to get started! This is an theme that has been verified by Astro (the framework used to built my website) as a theme. You can find the posting here.
Once you've copied the code via the use template button and cloned your copy of the template locally, you can get started by running npm install. This will install the dependencies (you only need to do this once). Next, run npm run dev to start the dev server. Now, you can open the site locally and see the template with the example data in it!
Now, you can edit the json files in src/content/data to customize the template with your own information. Make sure to update each file in src/content/data accordingly. Make sure to update the site's domain in astro.config.mjs to your website's domain as well.
Make sure to remove my resume and add your own pdf resume, and update src/content/data/navbar.json accordingly. If you don't want a resume on the site you can remove it from navbar.json
While these instructions just give you basic information on how to use the template, feel free to change any of the code to fit your needs! This template was made using Astro and React, so taking a look at their documentation may help!
Please open an issue here if you are having any trouble with using this repository as a template and I can help resolve the issue.
To change or remove the background gradient on this website:
-
Locate the Gradient Definition: Go to
src/styles/globals/css. -
Modify the Gradient: Adjust gradient colors by editing the hex values in the CSS where it says
linear-gradient.
Here is what the dark version and light version of the template looks like (The template can be toggled between light or dark mode). These are just the defaults, but you can customize the theme as you see fit
Please open an issue that explains the change in detail or pull request making the feature on this template repository (not your copy of the template)!