Skip to main content

​
Overview

Proyecto Renacer is built with Astro, a modern static site generator optimized for content-focused websites. The project uses Astro’s file-based routing, component architecture, and Tailwind CSS for styling.

​
Directory Structure

proyecto-renacer/
├── .git/                  # Git version control
├── .vscode/               # VS Code settings
├── public/                # Static assets
│   ├── img/              # Image files
│   ├── favicon.ico       # Browser icon
│   └── favicon.svg       # SVG icon
├── src/                   # Source code
│   ├── assets/           # Optimized assets (images, etc.)
│   │   ├── astro.svg
│   │   ├── background.svg
│   │   └── mockImg.webp
│   ├── components/       # Reusable Astro components
│   ├── data/             # Application state and data
│   ├── layouts/          # Page layout templates
│   ├── pages/            # File-based routing pages
│   └── styles/           # Global CSS styles
├── astro.config.mjs      # Astro configuration
├── package.json          # Dependencies
├── tsconfig.json         # TypeScript configuration
├── LICENSE               # Project license
└── README.md             # Project documentation

​
Core Directories Explained

​
/public/

Static assets served directly without processing. Files here are copied to the build output as-is. Contents:
  • favicon.ico and favicon.svg - Site icons
  • img/ - Image directory for static images
Usage: 
<!-- Reference public files with absolute paths -->
<img src="/img/photo.jpg" alt="Photo" />

​
/src/

All source code, components, and pages. This is where development happens.

​
/src/assets/

Optimized assets processed by Astro’s image optimization. Use for images that need optimization. Contents:
  • mockImg.webp - Mock imagery for cards
  • astro.svg, background.svg - Vector graphics
Usage: 
---
import { Image } from 'astro:assets';
import img from '../assets/mockImg.webp';
---
<Image src={img} alt="Description" />

​
/src/components/

Reusable UI components. See Components for details.

​
/src/data/

Application state and shared data. Example - state.ts: 
export const socios = {
  maximo: 64,
  actual: 32,
  porcentaje: () => Math.round((socios.actual / socios.maximo) * 100),
}

​
/src/layouts/

Page layout templates. See Layouts for details.

​
/src/pages/

File-based routing pages. See Pages for details.

​
/src/styles/

Global CSS and styling configurations.

​
Configuration Files

​
astro.config.mjs

Astro configuration with Tailwind CSS integration: 
// @ts-check
import { defineConfig } from 'astro/config';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});
Key features:
  • Tailwind CSS integration via Vite plugin
  • Standard Astro configuration
  • TypeScript support enabled

​
package.json

Project dependencies and scripts: 
{
  "name": "proyecto-renacer",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro"
  }
}
Available commands:
  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build

​
tsconfig.json

TypeScript configuration for the project. Enables type checking for .ts files and provides IDE support.

​
Build Output

When you run npm run build, Astro generates a static site in the dist/ directory: 
dist/
├── index.html
├── como-ser-socio.html
├── proyecto.html
├── requisitos.html
├── contacto.html
├── noticias.html
├── _astro/           # Optimized CSS, JS, images
└── img/              # Static images from public/

​
Development Workflow

1

Start Dev Server

Run npm run dev to start the development server at http://localhost:4321
2

Make Changes

Edit files in /src/ - the server hot-reloads automatically
3

Add Pages

Create .astro files in /src/pages/ for new routes
4

Build

Run npm run build to create production-ready static files

​
Key Technologies

Astro

Static site generator with component islands architecture

Tailwind CSS

Utility-first CSS framework for rapid UI development

TypeScript

Type-safe JavaScript for better developer experience

Material Symbols

Icon font from Google for UI elements

​
Next Steps

Pages

Learn about the routing system and page structure

Components

Explore reusable UI components

Layouts

Understand layout templates and page wrapping