Portfolio Website v2

This is the second iteration of my website, made with Astro with a React integration. It uses Sanity.io as a CMS.

To run the project locally:

npm install
npm run prepare

The prepare script installs husky enabling commit/merge linting via git hooks and lint-staged.

Project Structure

┌── public/
│
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── img/
│
└── package.json

public/: Currently, contains smaller content like images.

components/: Resuable components.

layouts/: Components that encapsulate other html.

img/: Images, pretty self-explanatory. Note, per Astro's docs, most images are placed here in src, instead of public.

Note: Each folder in src/ has an index.astro file. For cleaner imports, each component should export into that file in their respective folders. Then, components can be imported with named imports from the index file.

Additionally, both Vite and Typscript are set up so that the import alias @components is valid. Similarly for layouts, pages, and img folders.

NPM Scripts

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run prepare	Prepares husky git hooks
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying

Sanity Integration

A projectID is needed for the sanity integration. SANITY_PROJECT_ID="[projectId]" should be loaded in a .env file, ignored by .gitignore. See astro.config.mjs

Commitlint

Commit linting is configured with the Commitlint module. This helps to maintain a clean commit history for later viewing. I've separated the types of commits and their formatting rules in the commits folder, and will reiterate the fields here:

Field	Description
feat	New behaviors or major milestones
refactor	Changes to codebase to improve structure, organization, and/or readability
fix	Fixes to bugs or bad behaviors
style	Changes to the styling of components
chore	Tasks that don't modify src, like updating dependencies, adding assets, etc.
working	Intermediate commits that represent a working idea, or one that is in progress
perf	Optimizations and improvements (e.g. page load time, images, etc. )
docs	Changes to README files or other documentation
test	Addition/modifications to test cases

Along with husky, this works with lint-staged to run eslint and prettier only on staged files at commit.