https://github.com/sonvice/pixel-punk-landing

Este proyecto es una landing page futurista inspirada en la estética Cyberpunk, diseñada en Figma y desarrollada utilizando el Astro Framework.
https://github.com/sonvice/pixel-punk-landing

astro astrojs css css-grid cyber-punk ia js landing landing-page scss

Last synced: 15 days ago
JSON representation

Este proyecto es una landing page futurista inspirada en la estética Cyberpunk, diseñada en Figma y desarrollada utilizando el Astro Framework.

• Host: GitHub
• URL: https://github.com/sonvice/pixel-punk-landing
• Owner: sonvice
• Created: 2024-09-07T18:54:03.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-12-15T08:08:10.000Z (19 days ago)
• Last Synced: 2024-12-15T09:19:40.745Z (19 days ago)
• Topics: astro, astrojs, css, css-grid, cyber-punk, ia, js, landing, landing-page, scss
• Language: SCSS
• Homepage: https://pixelpunk-ia.netlify.app/
• Size: 12 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Pixel Punk 🤖

![Cyber Punk Banner](https://raw.githubusercontent.com/sonvice/pixel-punk-landing/main/public/theme.png)





    

    

    

    

    



Pixel Punk Landing



# Pixel Punk Landing

Este proyecto es una landing page futurista inspirada en la estética **Cyberpunk**, diseñada en Figma y desarrollada utilizando el **Astro Framework**. La página es completamente responsive, aprovechando el poder de **Sass** para gestionar los estilos de manera eficiente. El diseño incorpora un enfoque moderno, utilizando **CSS Grid**, animaciones y degradados llamativos, y elementos visuales en **SVG**.

## Características principales:

- **Diseño en Figma inspirado en Cyberpunk:** Captura la esencia de un futuro distópico, con colores brillantes y efectos visuales avanzados que reflejan una estética tecnológica y futurista.

  

- **Desarrollada con Astro Framework:** La implementación se realizó con **Astro**, aprovechando su rendimiento y capacidades modernas para crear una experiencia de usuario rápida y eficiente.

  

- **Animaciones fluidas con AOS (Animate On Scroll):** Utilizamos la librería **AOS** para integrar animaciones dinámicas que se activan al hacer scroll, mejorando la interactividad y el dinamismo de la página.

- **Diseño responsivo con CSS Grid:** El layout está organizado con **CSS Grid**, lo que permite una disposición flexible y adaptable en cualquier dispositivo, brindando una experiencia visual cohesiva en pantallas grandes y pequeñas.

- **Animaciones y degradados modernos:** Se han incorporado degradados avanzados y animaciones CSS que hacen que el sitio web cobre vida, creando un entorno inmersivo para los usuarios.

- **Elementos SVG y gráficos vectoriales:** Los gráficos SVG aportan un toque moderno y de alta calidad, manteniendo el rendimiento del sitio incluso con elementos visuales complejos.

## Tecnologías utilizadas:

- Figma

- Astro Framework

- AOS Scroll

- CSS Grid

- Sass

- SVG

## 🧞 Commands

All commands are run from the root of the project, from a terminal:

| Command                   | Action                                           |

| :------------------------ | :----------------------------------------------- |

| `npm install`             | Installs dependencies                            |

| `npm run dev`             | Starts local dev server at `localhost:4321`      |

| `npm run build`           | Build your production site to `./dist/`          |

| `npm run preview`         | Preview your build locally, before deploying     |

| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |

| `npm run astro -- --help` | Get help using the Astro CLI                     |

## 👀 Want to learn more?

Feel free to check [our documentation](https://docs.astro.build).