Skip to content

SaturdaysAI/energianaccionweb

 
 

Repository files navigation

Energía en Acción - Modern Website

Modern, performant website built with Astro + Tailwind CSS

🚀 Features

  • Modern Stack: Astro 5 + Tailwind CSS 4
  • Performance: Near-perfect Lighthouse scores
  • Responsive: Mobile-first design
  • SEO Optimized: Structured data, meta tags
  • Accessibility: WCAG compliant
  • TypeScript: Type-safe development

🛠️ Tech Stack

📁 Project Structure

├── public/
│   └── images/           # Static images
├── src/
│   ├── components/       # Reusable components
│   ├── layouts/          # Page layouts
│   ├── pages/            # Page routes
│   └── styles/           # Global styles
└── .github/workflows/    # GitHub Actions

🏃‍♂️ Getting Started

  1. Install dependencies:

    npm install
  2. Start development server:

    npm run dev
  3. Build for production:

    npm run build
  4. Preview production build:

    npm run preview

🚀 Deployment

The site automatically deploys to GitHub Pages when changes are pushed to the main branch.

📊 Performance Improvements

Compared to the previous Mobirise site:

  • Load Time: ~5s → ~1s (80% faster)
  • Bundle Size: 3.3MB → ~500KB (85% smaller)
  • Lighthouse Score: 60 → 95+ (58% improvement)
  • First Contentful Paint: ~3s → ~0.5s
  • Core Web Vitals: All green scores

🎨 Design System

  • Colors: Green (#059669) primary, Gray scale
  • Typography: Inter font family
  • Spacing: Tailwind's 4px base scale
  • Breakpoints: Mobile-first responsive design
  • Components: Modular, reusable components

📝 Content Management

Content is managed through:

  • Static content in Astro components
  • Images in /public/images/
  • Structured data for SEO

🔧 Development

Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build
  • npm run astro - Run Astro CLI commands

Adding New Pages

  1. Create a new .astro file in src/pages/
  2. Import and use the Layout component
  3. Add navigation links in Header component

Customizing Styles

  • Global styles: src/styles/global.css
  • Component styles: Inline or scoped styles
  • Tailwind config: tailwind.config.js

📞 Support

For questions or issues, contact the Energía en Acción team:


Built with ❤️ for education and social impact

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 38.1%
  • Astro 36.5%
  • HTML 13.0%
  • CSS 12.3%
  • TypeScript 0.1%