Back to themes

Astroway

Modern portfolio template featuring React, Tailwind CSS, and Astro for a smooth and responsive showcase of your projects and ideas.


Astroway

Features

- Dark mode toggle

- Responsive design

- Easy to customize and extend personal data

- Fuzzy search for blog posts

- SEO friendly (robots.txt, sitemap.xml)

- RSS feed

What's next?

- [ ] Internationalization (i18n)

- [ ] Projects collection

- Feel free to open an issue or submit a pull request with your ideas for improving this template

How to use this template

Note: this mini-guide assumes you have `npm` installed on your machine, if you don't, you can download it following the instructions [here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

  1. Click on the "Use this template" button at the top of the repository.
  2. Create a new repository based on this template.
  3. Clone the repository to your local machine.
  4. Install the dependencies by running `npm install`
  5. You can now start the development server by running `npm run dev`
  6. Now you can start customizing the portfolio template by updating the `/data/info.ts` file with your personal information.

Notes about the contact section

If you add/remove something from the contact section in the `info.ts` file, you will need to update the `Contact.tsx` file located in the `src/components/contact_section` directory by simply reflecting the changes you made in the `info.ts` file. Although, this choice may seem redundant, it allows to separate the data from the view.

Notes about RSS feed

The RSS feed is generated using the `astro-plugin-feed` plugin.

To customize it:

  1. Update the `site` entry in the `astro.config.mjs` file with your site url.
  2. Modify the `rss.xml.js` file located in the `pages` directory to reflect your site's information.

Notes about SEO

Modify the head section of the `BaseLayout.astro` file located in the `src/layouts` directory to reflect your site's information.

Notes about styles

This portfolio template uses Tailwind CSS for styling. You can modify the colors used in the portfolio by updating the `tailwind.config.js` file located in the root of the project.

Tools Used

This portfolio template uses the following tools/libraries/resources: