Skip to main content

​
Welcome to Raster’s Website

This is a minimalist personal portfolio website for raster, a creative who specializes in graphic design, game development (coming soon), and coding. The site embraces a clean, distraction-free aesthetic that puts content first.

​
Purpose

The website serves as:
  • Personal Portfolio - A digital home showcasing raster’s work across multiple creative disciplines
  • Status Updates - Real-time status integration via Status.cafe
  • Resource Hub - A curated collection of useful tools and links for the web community

​
Key Features

​
Minimalist Design Philosophy

The site is built on principles of simplicity and clarity:
  • Clean Layout - Centered, single-column layout with generous whitespace
  • Typography-First - Relies on beautiful typefaces rather than heavy graphics
  • Mobile-Responsive - Adapts seamlessly to any screen size
  • Fast Loading - Minimal dependencies for quick page loads

​
Custom Typography Approach

The site uses a carefully curated typography system with two primary typefaces: 
@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;
}
Host Grotesk serves as the primary typeface for body text and headings, providing a clean, modern sans-serif appearance. ServerMono (loaded via CDN) adds monospace character for technical contexts. All fonts use font-display: swap to ensure text remains visible during font loading.

​
Status.cafe Integration

The homepage features live status updates powered by Status.cafe, allowing visitors to see what raster is currently up to: 
<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>
This integration provides a personal touch and real-time connection with visitors. The site features a simple, intuitive navigation system:
  • Home (/) - Main landing page with introduction and current status
  • Links (/links/) - Curated collection of useful tools and resources
  • Status - External link to full Status.cafe profile

​
Architecture

​
Technology Stack

Frontend

Pure HTML & CSS with minimal JavaScript

Styling

Custom CSS with CSS variables for theming

Dependencies

motion (v12.34.0) and @paper-design/shaders-react (v0.0.71)

Hosting

Static files deployable to any web host

​
File Structure

The project follows a flat, easy-to-navigate structure: 
.
├── index.html              # Main homepage
├── styles.css             # Global styles and typography
├── logo.svg               # Custom logo graphic
├── fonts/                 # Self-hosted Host Grotesk fonts
│   ├── HostGrotesk-Regular.woff
│   ├── HostGrotesk-Regular.woff2
│   ├── HostGrotesk-Medium.woff
│   ├── HostGrotesk-Medium.woff2
│   ├── HostGrotesk-MediumItalic.woff
│   └── HostGrotesk-MediumItalic.woff2
├── links/
│   └── index.html        # Links and resources page
├── post-db/
│   └── convex/           # Backend integration (Convex)
│       └── posts.ts      # Post creation mutations
├── robots.txt            # Search engine directives
├── CNAME                 # Custom domain configuration
└── package.json          # Node dependencies

​
Design System

The site uses a minimal color palette defined with CSS custom properties: 
:root {
  --sub: #828282;    /* Subdued/secondary text */
  --main: #000000;   /* Primary text color */
}
Background is pure white (#ffffff), creating maximum contrast and readability.

​
Responsive Layout

The site uses a centered, table-based layout approach for perfect vertical and horizontal centering: 
html {
  display: table;
  margin: auto;
}

body {
  width: 70%;
  max-width: 400px;
  display: table-cell;
  vertical-align: middle;
}
The narrow content width (max 400px) creates an intimate, focused reading experience perfect for mobile and desktop viewing.

​
AI Bot Protection

The site includes a comprehensive robots.txt file that blocks AI training bots and web scrapers, including:
  • OpenAI (GPTBot, ChatGPT-User)
  • Anthropic (ClaudeBot, anthropic-ai)
  • Google Extended
  • Meta crawlers
  • And many more
This protects the site’s content from being used in AI training datasets without consent.

​
Next Steps

Getting Started

Set up the project locally and start customizing

Design System

Explore the typography and styling approach

Features

Dive into Status.cafe integration and more

Development

Learn about the development workflow

Build docs developers (and LLMs) love

Get started for freeTalk to us