This is the source code for my personal portfolio—check it out at maxparisi.me.
It's built on Astro and uses a Cloudflare Worker for hosting on my domain. It was based on the Astro Portfolio Theme, though significantly modified.
My portfolio has various pages; here are a few:
- Home: includes a short description about me, a photo, skills, and recent projects.
- Projects: showcases my projects, with a seperate page on each.
- About: provides more information about me and my hobbies
For a complete list, check out my sitemap.
Astro files are based on HTML but support custom components for repetive layouts.
I use layouts for my main HTML boilerplate.
My BaseLayout.astro layout incorporates everything from my <head> to CSS backgrounds.
Astro layouts (and components) use a <slot /> to include content, so BaseLayout also adds the header and footer surrounding the main body.
I also have ProjectLayout.astro and MarkdownLayout.astro, which are used for Markdown files and each project.
I use components more extensively than layouts. While they are similar, components are usually used for small UI pieces.
Here are a few of my components:
MainHead.astro: used for my HTML<head>and SEO tagsHero.astro: defines the top banner of most pagesIcon.astro: used withicons.tsfor custom SVG iconsFooter.astro: adds a footer to each and every page
I also use components for everything from Call to Actions to hidden easter eggs.
Each of my projects is written in a Markdown file and parsed by a dynamic page into HTML.
[...slug].astro renders the Markdown into an Astro document (later to be transformed into HTML), while [...slug].md.ts uses an endpoint to generate a Markdown file for LLMs to read.
I also made more endpoints to generate an RSS feed and sitemap. These find and add pages to an XML template for better Search Engine Optimization (SEO).
In my mind, this portfolio will never be finished. I still have more projects to add and an extensive todo list.
Please support my portfolio by sharing it with people. Feel free to reach out with any questions or suggestions at max@maxparisi.me. Thank you!