update readme
This commit is contained in:
parent
75a9ea5fce
commit
bdf29a9aff
78
README.md
78
README.md
@ -2,81 +2,5 @@
|
|||||||
# justin.deal
|
# justin.deal
|
||||||
|
|
||||||
My personal website and blog.
|
My personal website and blog.
|
||||||
=======
|
|
||||||

|
|
||||||
|
|
||||||
Zaggonaut is a retro-inspired theme for Astro, built using TypeScript, TailwindCSS, and of course, Astro.
|
Vist the site at https://justin.deal
|
||||||
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
[View the demo](https://zaggonaut.dev) or [view the source code](https://github.com/RATIU5/zaggonaut).
|
|
||||||
|
|
||||||
Alternatively, you can create a new Astro project with Zaggonaut like this:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# pnpm
|
|
||||||
pnpm create astro@latest --template RATIU5/zaggonaut
|
|
||||||
```
|
|
||||||
|
|
||||||
> [!IMPORTANT]
|
|
||||||
> Currently, `pnpm` is the only supported package manager due to `pnpm` throwing peer-dependency conflicts.
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
- Dark & light mode
|
|
||||||
- Customizable colors
|
|
||||||
- 100 / 100 Lighthouse score
|
|
||||||
- Fully accessible
|
|
||||||
- Fully responsive
|
|
||||||
- Type-safe
|
|
||||||
- SEO-friendly
|
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
The entire theme is fully customizable. The theme is setup a specific way to make it easy to customize.
|
|
||||||
|
|
||||||
### Colors
|
|
||||||
|
|
||||||
You can customize the colors of the theme by editing the `src/styles/global.css` file.
|
|
||||||
This file uses Tailwind CSS and CSS variables to customize the colors of the theme.
|
|
||||||
Zaggonaut uses the following CSS variables:
|
|
||||||
|
|
||||||
- `--color-zag-dark`: The dark color of the theme
|
|
||||||
- `--color-zag-light`: The light color of the theme
|
|
||||||
- `--color-zag-dark-muted`: The dark color of the theme with a slight opacity
|
|
||||||
- `--color-zag-light-muted`: The light color of the theme with a slight opacity
|
|
||||||
- `--color-zag-accent-light`: The light accent color of the theme
|
|
||||||
- `--color-zag-accent-light-muted`: The light accent color of the theme with a slight opacity
|
|
||||||
- `--color-zag-accent-dark`: The dark accent color of the theme
|
|
||||||
- `--color-zag-accent-dark-muted`: The dark accent color of the theme with a slight opacity
|
|
||||||
|
|
||||||
### Text
|
|
||||||
|
|
||||||
You can customize the text of the theme by editing the `src/lib/variables.ts` file.
|
|
||||||
This file contains all of the text used throughout the theme.
|
|
||||||
|
|
||||||
For example, you can change the `username` variable to your own username and everywhere the username is used will be replaced with your username.
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
export const GLOBAL = {
|
|
||||||
// Site metadata
|
|
||||||
username: "zaggonaut-fan123",
|
|
||||||
|
|
||||||
// ...
|
|
||||||
|
|
||||||
// Profile image
|
|
||||||
profileImage: "profile.webp",
|
|
||||||
|
|
||||||
// Menu items
|
|
||||||
menu: {
|
|
||||||
home: "/",
|
|
||||||
projects: "/projects",
|
|
||||||
blog: "/blog",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## Ready To Try?
|
|
||||||
|
|
||||||
Check out [the theme website](https://zaggonaut.dev) to give it a spin!
|
|
||||||
>>>>>>> beeac98 (initial commit)
|
|
Loading…
x
Reference in New Issue
Block a user