Skip to main content

​
Prerequisites

Before you begin, make sure you have the following:

Modern Browser

Chrome, Firefox, Safari, or Edge (latest version)

Code Editor

VS Code, Sublime Text, or your preferred editor

Basic Knowledge

HTML, CSS fundamentals

Node.js

For installing npm dependencies (optional)
While Node.js is listed as a dependency for the animation libraries, the core site works perfectly with just HTML and CSS. The motion and @paper-design/shaders-react packages are optional enhancements.

​
Installation

1

Clone the Repository

First, clone the repository to your local machine:
git clone <repository-url>
cd <repository-name>
This will download all the source files to your computer.
2

Install Dependencies

The project uses two npm packages for enhanced animations and visual effects:
npm install
This installs:
  • motion (v12.34.0) - A lightweight animation library
  • @paper-design/shaders-react (v0.0.71) - React-based shader effects
If you prefer to keep the site completely vanilla, you can skip this step. The core functionality works without these dependencies.
3

Review the Project Structure

Familiarize yourself with the file organization:
.
├── index.html              # Homepage - start here!
├── styles.css             # All your styles in one place
├── logo.svg               # Custom logo (edit as needed)
├── fonts/                 # Self-hosted typefaces
│   ├── HostGrotesk-Regular.woff
│   ├── HostGrotesk-Regular.woff2
│   ├── HostGrotesk-Medium.woff
│   ├── HostGrotesk-Medium.woff2
│   ├── HostGrotesk-MediumItalic.woff
│   └── HostGrotesk-MediumItalic.woff2
├── links/
│   └── index.html        # Links page
├── post-db/
│   └── convex/
│       └── posts.ts      # Convex backend integration
├── robots.txt            # Bot protection
├── CNAME                 # Domain configuration
└── package.json          # Dependencies
4

Preview the Site Locally

You have several options for previewing the site:
# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000
Then visit http://localhost:8000 in your browser.

​
Understanding the Codebase

​
The Homepage (index.html)

The homepage is beautifully minimal:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <div><img class="logo" src="./logo.svg"> raster</div>
    <p>hey! i'm raster</p>
    <p>i do graphic design, game dev(in the future), and a bit of (vibe)coding on the side</p>
    
    <!-- Status.cafe Integration -->
    <div>
      <div id="statuscafe">
        <div id="statuscafe-username"></div>
        <div id="statuscafe-content"></div>
      </div>
    </div>
    <script src="https://status.cafe/current-status.js?name=raster" defer></script>
    
    <!-- Footer Navigation -->
    <div style="font-size: 14px; padding-top: 1rem;">
      <a href="https://status.cafe/users/raster" class="ftr">status</a>
      <a class="ftr" href="/links">links</a>
    </div>
</body>
</html>
  • Logo + Name: SVG logo with text identifier
  • Bio: Short, personality-driven introduction
  • Status Widget: Live updates from Status.cafe
  • Footer Links: Minimal navigation to key pages

​
The Stylesheet (styles.css)

The CSS is organized into clear sections: 
@font-face {
  font-family: 'Host Grotesk';
  src: url('/fonts/HostGrotesk-Regular.woff') format('woff'),
       url('/fonts/HostGrotesk-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

​
The Links Page

The links page (links/index.html) showcases curated tools organized by category: 
<h2>blogging tools</h2>
<p><a href="https://bearblog.dev/">bear blog</a> (freemium) - no-fluff blogging platform</p>

<h2>browsers</h2>
<p><a href="https://arc.net/">arc</a> (free) - og sidebar browser</p>

<h2>media tools</h2>
<p><a href="https://www.tldraw.com/">tldraw</a> (freemium) (semi oss) - very good free whiteboard</p>
Each link includes:
  • The tool name (linked)
  • Pricing model (free, freemium, paid, oss)
  • Brief description

​
Customization Guide

​
Personalizing the Content

1

Update Your Information

Edit index.html to replace raster’s info with yours:
<div><img class="logo" src="./logo.svg"> your-name</div>
<p>hey! i'm [your name]</p>
<p>[your bio and what you do]</p>
2

Configure Status.cafe

If you have a Status.cafe account, update the script source:
<script src="https://status.cafe/current-status.js?name=your-username" defer></script>
Also update the status link in the footer:
<a href="https://status.cafe/users/your-username" class="ftr">status</a>
If you don’t use Status.cafe, simply remove the entire status div and script.
3

Customize the Links Page

Edit links/index.html to add your own curated resources:
<h2>your category</h2>
<p><a href="https://example.com/">tool name</a> (pricing) - description</p>
4

Replace the Logo

Create your own SVG logo and replace logo.svg, or use a different image format:
<img class="logo" src="./logo.png">
Make sure to update the CSS if you change dimensions:
.logo {
  width: 12px;
  height: 12px;
}

​
Styling Modifications

Update the color scheme in styles.css:
:root {
  --sub: #your-secondary-color;
  --main: #your-primary-color;
}

body {
  color: #your-text-color;
  background-color: #your-bg-color;
}

​
Deployment

The site is static HTML/CSS and can be deployed to any web host:

GitHub Pages

Free hosting with custom domains. Push to a gh-pages branch or use GitHub Actions.

Netlify

Drag and drop deployment with automatic builds from Git. Free tier available.

Vercel

Zero-config deployment for static sites. Connect your Git repository.

Neocities

Free retro-style web hosting. Perfect for personal sites and portfolios.
If using a custom domain, update the CNAME file with your domain name.

​
Next Steps

Now that you have the site running locally:

Explore the Design System

Learn about typography, colors, and spacing

Add Status.cafe

Set up real-time status updates

Customize Styling

Modify colors, fonts, and layout

Deploy Your Site

Get your portfolio live on the web
Keep the minimalist philosophy in mind as you customize. Sometimes less is more!

Build docs developers (and LLMs) love

Get started for freeTalk to us