h4ckx0r/webSostenible
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cambio en las imágenes para mejorar el rendimiento

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2024-10-15 19:51:55 +02:00
parent 16cf39a088
commit 030bb68000
1 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/index.astro
View File

@@ -2,6 +2,7 @@
// Component Imports // Component Imports
import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro"; import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
import Navbar from "../components/Navbar.astro"; import Navbar from "../components/Navbar.astro";
import { Image } from "astro:assets";
const animateOnScroll = ` const animateOnScroll = `
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@@ -80,10 +81,14 @@ const animateOnScroll = `
</p> </p>
</div> </div>
<div class="col-md-6 animate-on-scroll"> <div class="col-md-6 animate-on-scroll">
<div <div class="text-white p-5 text-center">
class=" text-white p-5 text-center" <Image
> src="/imgs/17Objetivos.png"
<img src="../../public/imgs/17Objetivos.png" alt="" class="img-thumbnail .img-fluid"> alt=""
class="img-thumbnail .img-fluid"
width="730"
height="450"
/>
</div> </div>
</div> </div>
</div> </div>
@@ -156,20 +161,21 @@ const animateOnScroll = `
</h2> </h2>
<div class="row g-4"> <div class="row g-4">
{ {
[1, 2, 3, 4, 5, 6].map((num) => ( [1, 2, 3, 4, 5, 6].map((num) => (
<div class="col-md-4 animate-on-scroll"> <div class="col-md-4 animate-on-scroll">
<div class="bg-light p-4 text-center"> <div class="bg-light p-4 text-center">
<img <Image
src={`../../public/imgs/imgimp${num}.jpg`} src={`/imgs/imgimp${num}.jpg`}
alt={`Imagen de impacto ${num}`} alt={`Imagen de impacto ${num}`}
class="img-fluid img-fit" class="img-fluid img-fit"
/> width="10"
height="10"
</div> />
</div> </div>
)) </div>
))
} }
</div> </div>
</div> </div>
</section> </section>
@@ -193,7 +199,7 @@ const animateOnScroll = `
<div class="col-md-6 mb-4 animate-on-scroll"> <div class="col-md-6 mb-4 animate-on-scroll">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title"> <h5 class="card-title" aria-label="Proyecto">
Proyecto {num} Proyecto {num}
</h5> </h5>
<p class="card-text"> <p class="card-text">
@@ -265,7 +271,7 @@ const animateOnScroll = `
<style is:global> <style is:global>
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
h1, h1,
h2, h2,
h3, h3,
@@ -300,11 +306,10 @@ const animateOnScroll = `
margin-right: 10px; margin-right: 10px;
} }
.img-fit{ .img-fit {
width: 100%; width: 100%;
height: 200px; height: 200px;
object-fit: cover; object-fit: cover;
border-radius: 8px; border-radius: 8px;
} }
</style> </style>