Skip to main content

raster’s personal website

A minimalist personal website built with custom typography, clean design principles, and modern web standards. Explore the design system, features, and development guide.

Get startedExplore docs
raster logoraster logo

Quick start

Get familiar with the website structure and design system in just a few steps.

1

Clone the repository

Start by cloning the repository to your local machine:
git clone https://github.com/rdotsvg/rdotsvg.github.io.git
cd rdotsvg.github.io
2

Install dependencies

The site uses motion and Paper Design shaders. Install them with your preferred package manager:
npm
npm install
The package.json includes:
  • @paper-design/shaders-react (^0.0.71) - For visual effects
  • motion (^12.34.0) - For animations
3

Explore the design system

The site uses custom typography with Host Grotesk and ServerMono fonts. Check out styles.css to see:
:root {
  --sub: #828282;
  --main: #000000;
}

body {
  font-family: 'Host Grotesk', -apple-system, ...;
  color: #000000;
  background-color: #ffffff;
}
Learn more about the typography system in the typography guide.
4

Preview locally

Open index.html in your browser to see the site. The layout is centered with a max-width of 400px for a focused reading experience.

Explore by topic

Dive into specific areas of the website documentation.

Design system

Learn about the custom typography, styling approach, and visual assets that make up the design system.

Features

Discover integrated features like Status.cafe, the curated links page, and Convex backend integration.

Development

Understand the project structure, deployment process, and how to customize the site for your needs.

Getting started

Step-by-step guide to setting up and understanding the website codebase.

Key features

What makes this personal website unique.

Custom typography

Host Grotesk and ServerMono fonts create a distinctive reading experience with optimized font loading strategies.

Status.cafe integration

Real-time status updates from Status.cafe display directly on the homepage with a simple script integration.

Curated links

A dedicated links page features carefully selected tools and resources across blogging, browsers, and media tools.

Convex backend

Post management is powered by Convex with a simple mutation API for creating and storing content.

Ready to explore?

Start with the introduction to understand the website’s design philosophy and architecture.

View introduction