aiello-portfolio-site

This site is built with Astro using both Astro-native and Svelte components (thanks to Astro's islands architecture).

Forestry CMS (defunct)

This site was configured to integrate with Forestry CMS, an excellent CMS that integrated with GitHub to edit site contents by making commits to the site's repo. But the service was discontinuted in March 2023, so currently the site must be updated manually by manually updating the Markdown files — not a user-friendly experience.

Netlify Hosting via CI/CD Pipeline

The site is configured to be deployed via a CI/CD pipeline. Whenever commits are pushed to GitHub, Netlify automatically builds and deploys a new version of the site across its worldwide edge network (for free!).

Cloudinary Image Hosting

Most images on the site are hosted using Cloudinary, for its ability to optimize images and because it integrated well with Forestry CMS.

Code Formatting and Linting

This project is configured to use Prettier for formatting code and ESLint for linting code. Husky is used to provide a git pre-commit hook which calls lint-staged to run both Prettier and ESLint on any files being committed at the time of the commit. These tools help maintain (and enforce) code quality and consistency.

Project Structure

These are the most important parts of the structure:

/
├── .prettierignore                   # files Prettier should ignore
├── .prettierrc.mjs                   # Prettier config
├── astro.config.mjs                  # Astro config
├── eslint.config.mjs                 # ESLint config
├── netlify.toml                      # Netlify deployment config
├── public                            # contents of this directory automatically served from site root
│   ├── admin                         # Forestry CMS control panel (defunct)
│   ├── fonts                         # custom web fonts
│   └── img                           # images and icons not handled by the CMS
└── src
    ├── components                    # both Astro and Svelte components that comprise the site
    ├── layout
    │   └── Layout.astro              # boilerplate site html
    ├── pages
    │   └── index.astro               # page structure
    ├── scripts
    │   └── getDimsFromImageUrls.js   # fetches image dimensions and calculates aspect ratios
    ├── settings
    │   ├── Settings.md               # user-editable settings
    │   └── siteInfo.js               # other settings
    ├── styles
    │    └── global.scss               # site CSS (uses Sass)
    └── user-content
        ├── About.md                  # user-editable content for About section
        └── Projects.md               # user-editable content for all projects

Commands

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

Command	Action
npm install	Install dependencies
npm run dev	Start local dev server at localhost:3000
npm run build	Build production site to ./dist/
npm run preview	Preview build locally before deploying
npm run cms-preview	For use by Forestry CMS (defunct)