Pierre Hanna

This is the source code for my personal website, hosted with GitHub Pages at alkhatir.github.io.

The site is built from the AstroPaper template and customized as a place for my projects, notes, technical writing, and personal updates. I use it to document work around artificial intelligence, software engineering, data science, web development, and tools I am currently exploring.

About This Site

• Personal homepage for Pierre Hanna.
• Blog and notes powered by Markdown.
• Project writeups for AI, software engineering, and related technical work.
• Fast static site generated with Astro.
• Responsive layout with light and dark mode.
• SEO, RSS, sitemap, search, and dynamic Open Graph image support inherited from AstroPaper.

Status

This website is in active development. The current focus is replacing the default AstroPaper content with my own homepage, about page, project notes, and blog posts.

🚀 Project Structure

Inside of AstroPaper, you'll see the following folders and files:

/
├── public/
│   ├── pagefind/          # auto-generated on build
│   ├── favicon.svg
│   └── default-og.jpg
├── src/
│   ├── assets/
│   │   ├── icons/
│   │   └── images/
│   ├── components/
│   ├── content/
│   │   ├── pages/
│   │   │   └── about.md
│   │   └── posts/
│   │       └── some-blog-posts.md
│   ├── i18n/
│   ├── layouts/
│   ├── pages/
│   ├── scripts/
│   ├── styles/
│   ├── types/
│   ├── utils/
│   ├── config.ts
│   └── content.config.ts
├── astro-paper.config.ts  # user-defined configurations
└── astro.config.ts

All blog posts are stored in the src/content/posts/ directory. You can organise posts into subdirectories — the subdirectory name becomes part of the post URL.

📖 Documentation

Documentation can be read in two formats_ markdown & blog post.

• Configuration - markdown | blog post
• Add Posts - markdown | blog post
• Customize Color Schemes - markdown | blog post
• Predefined Color Schemes - markdown | blog post

💻 Tech Stack

Main Framework - Astro
Type Checking - TypeScript
Styling - TailwindCSS
UI/UX - Figma Design File
Static Search - Pagefind
Icons - Tablers
Code Formatting - Prettier
Deployment - Cloudflare Pages
Linting - ESLint
Dynamic OG images - Satori + Sharp + Astro Fonts

👨🏻‍💻 Running Locally

In case you want to start from scratch

You can have the same project template by running the following command in your desired directory:

# pnpm
pnpm create astro@latest --template satnaing/astro-paper

# pnpm
pnpm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper

# bun
bun create astro@latest -- --template satnaing/astro-paper

Starting the server and installing the dependencies

Then start the project by running the following commands:

# install dependencies if you haven't done so in the previous step.
pnpm install

# start running the project
pnpm dev

As an alternative approach, if you have Docker installed, you can use Docker to run this project locally. Here's how:

# Build the Docker image
docker build -t astropaper .

# Run the Docker container
docker run -p 4321:80 astropaper

🧞 Commands

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

Note! For Docker commands we must have it installed in your machine.

Command	Action
pnpm install	Installs dependencies
pnpm dev	Starts local dev server at localhost:4321
pnpm build	Build your production site to ./dist/
pnpm preview	Preview your build locally, before deploying
pnpm format:check	Check code format with Prettier
pnpm format	Format codes with Prettier
pnpm sync	Generates TypeScript types for all Astro modules. Learn more.
pnpm lint	Lint with ESLint
docker compose up -d	Run AstroPaper on docker, You can access with the same hostname and port informed on dev command.
docker compose run app npm install	You can run any command above into the docker container.
docker build -t astropaper .	Build Docker image for AstroPaper.
docker run -p 4321:80 astropaper	Run AstroPaper on Docker. The website will be accessible at http://localhost:4321.

Warning! Windows PowerShell users may need to install the concurrently package if they want to run diagnostics during development (astro check --watch & astro dev). For more info, see this issue.

✨ Feedback & Suggestions

Please feel free to contact me in case you a suggestion or an issue with the website. Otherwise, I am open for a chit-chat!

You can find me on GitHub, X, or LinkedIn.

📜 License

This site is based on the MIT-licensed AstroPaper template.

---

Built by Pierre Hanna.