aiello-portfolio-site

Framework

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

CMS

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.

Site Hosting

The site is configured to be deployed to Netlify 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!).

Image Hosting

Most images on the site are hosted using the free tier of 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: