logo

Package Versions (Astro)

🚀
v4.x

Astro

⚛️
v19.x

React

🎨
v4.x

Tailwindcss

📘
v5+

TypeScript

✨
v12.x

Framer Motion

This Crypgo template has been converted to Astro with React islands.

The theme is ready to use and fully customizable per your requirements.

You should have knowledge of Astro, React, Tailwind, and TypeScript to modify this template.

Package Structure

Crypgo Astro Template

crypgo-astro/
|— public/
|   |— images/
|— src/
|   |— components/
|   |   |— auth/
|   |   |— documentation/
|   |   |— home/
|   |   |— layout/
|   |   |— ui/
|   |— data/
|   |   |— index.ts
|   |— layouts/
|   |   |— Layout.astro
|   |— pages/
|   |   |— index.astro
|   |   |— documentation/
|   |   |— signin/
|   |   |— signup/
|   |   |— 404.astro
|   |   |— api/
|   |       |— register.ts
|   |— styles/
|       |— global.css
|— astro.config.mjs

|— package.json
|— tsconfig.json

Quick Start

1. Requirements

Before proceeding, you need to have the latest stable node.js

Recommended environment:
  • Node.js 20+
  • npm 10+
2. Install

Open the project folder and install dependencies.

cd crypgo-astro

npm install

3. Start Dev Server

Run the development server.

npm run dev

Opens at http://localhost:4321

4. Build / Deployment

Build for production:

npm run build

Output is written to the dist/ folder, ready to deploy to any static host.

5. Preview Build

Serve the production build locally:

npm run preview

Project Configuration

Colors

Colors are defined as CSS custom properties in src/styles/global.css. This pattern lets Tailwind's opacity modifiers (e.g. bg-primary/20) work correctly.

:root { /* CSS custom properties — supports opacity modifiers like bg-primary/20 */ --primary-rgb: 134 239 172; --secondary-rgb: 103 232 249; --background-rgb: 13 17 23; }

Each CSS variable is wired into Tailwind inside src/styles/global.css (@theme block):

// src/styles/global.css colors: { --color-primary: var(--primary); --color-background: var(--background); }

Typography

The default font is DM Sans, loaded from Google Fonts in src/layouts/Layout.astro.

To change the font, swap the Google Fonts <link> tag in the layout and update the font-family in your CSS.

Logo

Replace public/images/logo/logo.svg with your own logo file.

The logo is referenced directly via /images/logo/logo.svg in Header.tsx and the auth pages.

Routing

Astro uses file-based routing. Every .astro file inside src/pages/ becomes a URL automatically.

src/pages/ |— index.astro → / |— documentation/ | |— index.astro → /documentation |— signin/ | |— index.astro → /signin |— signup/ | |— index.astro → /signup

React Islands

Interactive components are loaded selectively using Astro's Islands Architecture .

  • client:load — hydrates immediately (Header, Hero, auth pages)
  • client:visible — hydrates when scrolled into view (TimeLine, Portfolio…)
  • No directive — renders as static HTML (Footer, Platform, Perks)
--- // .astro page import Hero from '../components/home/Hero'; import Footer from '../components/layout/Footer.astro'; --- <!-- Hero hydrates immediately; Footer is static HTML --> <Hero client:load /> <Footer />

Authentication

next-auth was removed during the Astro migration. The sign-in and sign-up forms are scaffolded and ready to wire up. Recommended options:

  • Lucia Auth — native Astro support, session-based
  • Auth.js for Astro — OAuth providers (Google, GitHub, etc.)
  • Custom JWT logic inside Astro middleware

Environment Variables

Create a .env file at the project root. Prefix public variables with PUBLIC_ to expose them in client-side code.

# .env (create at project root) PUBLIC_SITE_URL=https://yoursite.com # Add your own auth / DB secrets here