- Astro v4
- TailwindCSS utility classes
- ESLint / Prettier pre-installed and pre-configured
- Accessible, semantic HTML markup
- Responsive & SEO-friendly
- Dark / Light mode, using Tailwind and CSS variables (referenced from shadcn)
- Astro Assets Integration for optimised images
- MD & MDX posts
- Pagination
- Automatic RSS feed
- Auto-generated sitemap
- Expressive Code source code and syntax highlighter
- astro-theme-cactus for blog design
- minirezume-framer for resume homepage design
Inside of your Astro project, you'll see the following folders and files:
├── public/
├── src/
├── assets/
│ ├── components/
│ ├── content/
│ ├── layouts/
| ├── pages/
| ├── styles/
| ├── utils/
| ├── site.config.ts
│ └── types.ts
├── .elintrc.cjs
├── .gitignore
├── .prettierignore
├── package.json
├── prettier.config.cjs
├── README.md
├── tailwind.config.js
└── tsconfig.json
To edit site info such as site title and description, edit the src/site.config.ts file.
To edit the resume homepage content and design, edit the src/pages/index.astro file.
To edit page components found site-wide such as the card used in the homepage, edit the files found in the src/components/ directory.
To edit the base layouts of all pages, edit the src/layouts/BaseLayout.astro file.
To edit the layout of a blog article, edit the src/layouts/BlogPost.astro file.
To add blog content, insert .md files in the src/content/ directory.
To add images in blog articles, insert a folder in the src/content/ directory, add both the .md and image files into the new folder, and reference the image in your .md file.
To change the theme colours of the site, edit the src/styles/app.css file.
To change the fonts of the site, add your font files into /public, add it as a @font-face in the src/styles/app.css file, as a fontFamily in the tailwind.config.js file, and apply the new font class to the body tag in the src/layouts/BaseLayout.astro file.