AstroStarter

t3ma — Astro Starter Template

By temaprint

t3ma is an Astro-based personal portfolio and blog starter template with a dark theme and custom CSS, used to showcase projects, templates, and technical articles.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-05View source

What stands out

A quick read of the recorded project description.

01

Astro-based static site generation, using custom CSS to implement a dark theme without introducing a frontend framework

02

The homepage includes sections such as a hero, a bento grid, a project list, a career timeline, and a terminal-style CTA

03

Built-in blog route /posts/*, with three layouts provided: Layout, BlogPost, and SidebarLayout

04

Provides SEO configuration such as OG/Twitter metadata, JSON-LD (WebSite + Article), and canonical links

05

src/data/site.json centrally stores personal profile configuration, making it easy to replace site information

06

Includes the /signal easter egg page, serving as an "encrypted transmission" page for AI entities

Template Details

t3ma is the open-source template for the personal website and portfolio of independent developer Artem Kan (t3ma). It is built on Astro static site generation, uses custom CSS to implement a dark theme, and does not rely on a frontend framework. The site includes a homepage, an easter egg page /signal, and the /posts/* blog article route; the homepage consists of a hero, a bento grid, a project list, a career timeline, and a terminal-style CTA. In terms of content, the template is used to display templates and tools (such as a color scheme explorer, fonts, a bento UI template, a blog theme, and an AI tool directory) as well as case studies. The project structure is clear: src/pages holds routes, src/layouts provides Layout, BlogPost, and SidebarLayout, src/components provides Card, src/styles/global.css defines the dark theme and CSS variables, and src/data/site.json stores personal profile configuration. The design uses a #050505 background and the #8b5cf6 purple accent color, and includes CSS animations such as glitch text, scrollbars, pulsing dots, and gradient shifts; for SEO, it provides OG/Twitter metadata, JSON-LD (WebSite + Article), and canonical links. The README also lists deployment scripts (rsync to a Hetzner server) and update scripts, but these scripts are tied to the author's specific server environment, and reusing them directly requires adjustments. The template is released under the MIT license, and the free scope is the code of this version; third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses.

AstroStarter

Is it right for your project?

Use Cases

  • Building a personal portfolio website to centrally display projects, templates, and tools
  • Serving as a starting point for a technical blog to write articles related to projects and templates
  • Referencing its dark theme, CSS animations, and bento grid layout for a self-built Astro site
  • Serving as an example project for learning Astro routing, layouts, and the static build process

Suitable For

  • Independent developers who need an all-in-one personal portfolio and blog site
  • Developers who prefer Astro static generation and custom CSS and do not want to introduce a frontend framework
  • People who want to start quickly with a ready-made dark theme template and replace the content themselves

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After cloning the repository, run npm install, then run npm run dev to start the local development server

  2. 2

    npm run build generates static files into dist/, and npm run preview is used to preview the build result

  3. 3

    The deploy.sh and update.sh scripts are tied to the author's own Hetzner server and Git workflow, and must be modified for your own environment before reuse

  4. 4

    Site profile data is centralized in src/data/site.json, and this file must be adjusted in sync when replacing content

  5. 5

    Demo images, fonts (Inter, JetBrains Mono), and other third-party assets must be checked separately under their respective licenses

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of the code of this version are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the MIT license of the code.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
  • The deploy.sh script deploys via rsync to the author's own Hetzner server, and must be modified for your own server environment before reuse.
  • The update.sh script runs git add + commit + push to the author's GitHub repository, and must be modified for your own Git workflow before reuse.
  • The site uses the Inter and JetBrains Mono fonts from Google Fonts, which are external services, and you must check the font licenses and availability yourself.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

./deploy.sh # rsync to Hetzner server

Original README

./update.sh "msg" # git add + commit + push to GitHub

Original README

- **Google Fonts** — Inter + JetBrains Mono

Original README
https://github.com/temaprint/t3ma/blob/main/LICENSEhttps://github.com/temaprint/t3ma/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-05. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
Astro Themes
Documentation and maintenance reference score
More documented · 83 / 100
Technologies
Astro
Website type
Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-05-04
Screenshot last checked
2026-10-05

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: codex-user-requested-batch-review-20261017 · 2026-10-16

Inspect the recorded source material

SHA-256: 94e8ad61f715b860dc923c3d2a2b20743925ccbb2773ce5dd33e33d9313e6dc4

2026-10-05T13:45:44.593Z

Source file / repository
# temaprint.com

Personal site & portfolio of **Artem Kan** ([t3ma](https://github.com/temaprint)) — indie developer based in Thailand.

## Stack

- **Astro 4.15** — static site generation
- **Custom CSS** — dark theme, no frameworks
- **Google Fonts** — Inter + JetBrains Mono
- **@astrojs/sitemap** — sitemap generation

## Pages

| Route | Description |
|---|---|
| `/` | Homepage — hero, bento grid, projects, career timeline, terminal CTA |
| `/signal` | Easter egg page — "classified transmission" for AI entities |
| `/posts/*` | Blog posts about projects & templates |

## Content

### Templates & Tools
- **Color Palettes** — color palette explorer (colorpalette.wiki)
- **Freaky Font** — bold display typeface (fontfreaky.com)
- **Bento Style for Astro** — bento UI template (bento.temaprint.com)
- **Low Power Blog** — energy-efficient blog theme
- **topaitool.dev** — AI tools directory

### Case Studies
- **Icons8 Blog SEO** — technical optimization: 40% faster load, 30% more organic traffic

## Quick Start

```bash
git clone https://github.com/temaprint/t3ma.git
cd t3ma
npm install
npm run dev
```

## Scripts

```bash
npm run dev       # local dev server
npm run build     # static build → dist/
npm run preview   # preview build
./deploy.sh       # rsync to Hetzner server
./update.sh "msg" # git add + commit + push to GitHub
```

## Structure

```
src/
  pages/         # routes (index, signal, posts/, projects/)
  layouts/       # Layout, BlogPost, SidebarLayout
  components/    # Card
  styles/        # global.css (dark theme, CSS variables)
  data/          # site.json (profile config)
public/          # static assets, favicon, robots.txt
```

## Design

- Dark theme: background `#050505`, accent `#8b5cf6` (purple)
- CSS animations: glitch text, ticker, pulsing dots, gradient shifts
- SEO: OG/Twitter meta, JSON-LD (WebSite + Article), canonical URLs

## License

MIT — see [LICENSE](LICENSE)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.