Skip to content

Commit

Permalink
fix: fix sticky
Browse files Browse the repository at this point in the history
  • Loading branch information
@gxskpo
gxskpo committed Oct 13, 2024
1 parent 4080bac commit b76c5fb
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 171 deletions.
6 changes: 4 additions & 2 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,10 @@ import Community from "../sections/Community.astro";
class="min-h-screen min-w-screen flex flex-col justify-start items-center h-screen gap-10 pb-20"
>
<Intro />
<WhyRustSection />
<Community />
<div class="relative">
<WhyRustSection />
<Community />
</div>
<Footer />
<div class="fixed bottom-9 animate-bounce">
<svg
Expand Down
237 changes: 116 additions & 121 deletions src/sections/Community.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,148 +24,143 @@ const prebuiltData = await readTOMLFiles("proyectos-comunitarios/proyectos");
}
</style>

<section id="community" class="relative">
<div
class="flex flex-col justify-center items-center gap-5 relative sec h-[70vh]"
>
<div class="flex flex-col justify-center mt-3 items-center gap-2">
<h2 class="text-[30px]">AQUÍ</h2>
<h2 class="text-orange-600 text-[50px]">Podras</h2>
</div>
<div
class="flex flex-col justify-center items-center gap-5 relative sec h-[70vh]"
>
<div class="flex flex-col justify-center mt-3 items-center gap-2">
<h2 class="text-[30px]">AQUÍ</h2>
<h2 class="text-orange-600 text-[50px]">Podras</h2>
</div>

<div class="relative w-fit mx-auto">
<img
src={image1.src}
alt="Image 1"
class="shadow-lg top-0 left-0 z-20 w-72 h-auto lg:w-80 md:w-96"
/>
<img
src={image2.src}
alt="Image 2"
class="shadow-lg relative left-10 z-10 w-72 h-auto lg:w-96"
/>
</div>
<div class="relative w-fit mx-auto">
<img
src={image1.src}
alt="Image 1"
class="shadow-lg top-0 left-0 z-20 w-72 h-auto lg:w-80 md:w-96"
/>
<img
src={image2.src}
alt="Image 2"
class="shadow-lg relative left-10 z-10 w-72 h-auto lg:w-96"
/>
</div>
</div>

<div class="mx-auto p-10 sec h-[50vh]">
<div class="flex flex-col gap-5 justify-center items-center">
<h2 class="text-[40px]">APRENDER</h2>
<div class="mx-auto p-10 sec h-[50vh]">
<div class="flex flex-col gap-5 justify-center items-center">
<h2 class="text-[40px]">APRENDER</h2>

<!-- First row -->
<div class="flex justify-center items-center gap-8">
<Clickable>Roadmap</Clickable>
<Clickable className="mt-[50px]">El Libro</Clickable>
</div>
<!-- First row -->
<div class="flex justify-center items-center gap-8">
<Clickable>Roadmap</Clickable>
<Clickable className="mt-[50px]">El Libro</Clickable>
</div>

<!-- Second row -->
<div class="flex justify-center items-center gap-8">
<Clickable>Rust para c# Developers</Clickable>
<Clickable className="mt-[50px]">Mas</Clickable>
</div>
<!-- Second row -->
<div class="flex justify-center items-center gap-8">
<Clickable>Rust para c# Developers</Clickable>
<Clickable className="mt-[50px]">Mas</Clickable>
</div>
</div>
<div
class="flex flex-col justify-start items-center gap-5 sec h-screen pt-10"
>
<h2>CONECTAR</h2>
<h3 class="text-[25px]">Y SER PARTE</h3>
</div>
<div class="flex flex-col justify-start items-center gap-5 sec h-screen pt-10">
<h2>CONECTAR</h2>
<h3 class="text-[25px]">Y SER PARTE</h3>

<div class="flex flex-col justify-center items-center h-[60vh]">
<iframe
src="https://discord.com/widget?id=778674594856960012&theme=dark"
width="350"
height="500"
allowtransparency="true"
frameborder="0"
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
></iframe>
</div>
<div class="flex flex-col justify-center items-center h-[60vh]">
<iframe
src="https://discord.com/widget?id=778674594856960012&theme=dark"
width="350"
height="500"
allowtransparency="true"
frameborder="0"
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
></iframe>
</div>
<div class="flex flex-col items-center sec pt-10 h-[70vh]">
<h2>COMPARTIR</h2>
<h3>TUS PROYECTOS</h3>
</div>
<div class="flex flex-col items-center sec pt-10 h-[70vh]">
<h2>COMPARTIR</h2>
<h3>TUS PROYECTOS</h3>

<div
class="w-screen
<div
class="w-screen
min-h-[280px]
h-[30vh]
inline-flex
flex-nowrap overflow-hidden
[mask-image:_linear-gradient(to_right,transparent_0,_black_32px,_black_calc(100%-32px),transparent_100%)]"
>
<ul
class="flex
>
<ul
class="flex
items-center
justify-center
animate-infinite-scroll
p-5"
id="projects-container"
>
{
[...prebuiltData, ...prebuiltData].map((project: Project) => {
if (project.button_text.length > 0)
return (
<Clickable
className="relative flex flex-col mx-3 w-[85vw] h-full flex-shrink-0 p-2"
justify="normal"
>
{project.brand_as_letter ? (
<p class="flex flex-row justify-center items-center h-14 w-14 rounded-full self-start bg-[#ffedd5]">
{project.brand_src}
</p>
) : (
<img
alt="icon"
src={`project-assets/${project.brand_src.substring(2)}`}
class="h-14 w-14 rounded-full self-start"
/>
)}

<p class="font-bold self-start">{project.name.join(" ")}</p>
<p class="text-black text-pretty">{project.description}</p>
<a
href={project.button_link}
target="_blank"
class="self-start absolute bottom-0 mb-2"
>
<Clickable>{project.button_text}</Clickable>
</a>
</Clickable>
);
})
}
</ul>
</div>
id="projects-container"
>
{
[...prebuiltData, ...prebuiltData].map((project: Project) => {
if (project.button_text.length > 0)
return (
<Clickable
className="relative flex flex-col mx-3 w-[85vw] h-full flex-shrink-0 p-2"
justify="normal"
>
{project.brand_as_letter ? (
<p class="flex flex-row justify-center items-center h-14 w-14 rounded-full self-start bg-[#ffedd5]">
{project.brand_src}
</p>
) : (
<img
alt="icon"
src={`project-assets/${project.brand_src.substring(2)}`}
class="h-14 w-14 rounded-full self-start"
/>
)}

<a href="">
<Clickable className="text-1xl p-2"> Publica </Clickable>
</a>
<p class="font-bold self-start">{project.name.join(" ")}</p>
<p class="text-black text-pretty">{project.description}</p>
<a
href={project.button_link}
target="_blank"
class="self-start absolute bottom-0 mb-2"
>
<Clickable>{project.button_text}</Clickable>
</a>
</Clickable>
);
})
}
</ul>
</div>
<div class="flex flex-col justify-center items-center sec h-[80vh]">
<h2>CREAR</h2>
<h3 class="text-[25px]">SIN LIMITES</h3>

<div class="flex flex-col justify-center items-center mt-10 px-4">
<div class="flex justify-center items-center gap-4">
<Clickable>Servicios</Clickable>
<Clickable className="mt-[50px]">Aplicaciones Multiplataforma</Clickable
>
</div>
<div class="flex justify-center items-center gap-4">
<Clickable>Videojuegos</Clickable>
<Clickable className="mt-[50px]">Inteligencia Artificial</Clickable>
</div>
<div class="mt-10 justify-center items-center">
<Clickable>Y mucho, mucho mas</Clickable>
</div>
<div
class="justify-center items-center flex mt-14 w-[70%] text-left font-medium"
>
<p>
Quizas Todavia te preguntes Que Puedes Crear con Rust, La Respuesta
Corta, Todo Lo Que Quieras.
</p>
</div>
<a href="">
<Clickable className="text-1xl p-2"> Publica </Clickable>
</a>
</div>
<div class="flex flex-col justify-center items-center sec h-[80vh]">
<h2>CREAR</h2>
<h3 class="text-[25px]">SIN LIMITES</h3>

<div class="flex flex-col justify-center items-center mt-10 px-4">
<div class="flex justify-center items-center gap-4">
<Clickable>Servicios</Clickable>
<Clickable className="mt-[50px]">Aplicaciones Multiplataforma</Clickable>
</div>
<div class="flex justify-center items-center gap-4">
<Clickable>Videojuegos</Clickable>
<Clickable className="mt-[50px]">Inteligencia Artificial</Clickable>
</div>
<div class="mt-10 justify-center items-center">
<Clickable>Y mucho, mucho mas</Clickable>
</div>
<div
class="justify-center items-center flex mt-14 w-[70%] text-left font-medium"
>
<p>
Quizas Todavia te preguntes Que Puedes Crear con Rust, La Respuesta
Corta, Todo Lo Que Quieras.
</p>
</div>
</div>
</section>
</div>
94 changes: 46 additions & 48 deletions src/sections/WhyRust.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,54 @@ import chart from "@assets/rust_performance.svg";
import Clickable from "@components/Clickable.astro";
---

<section id="reasons" class="relative">
<div class="flex flex-col items-center gap-5 sec h-[65vh]">
<div class="flex flex-col mt-32 items-center gap-2">
<h3 class="text-[30px]">POR QUE</h3>
<h2 class="text-orange-600 text-[50px]">RUST</h2>
</div>

<img class="relative w-[230px] h-[230px]" src="rust.png" />
</div>
<div class="flex flex-col items-center justify-center p-4 gap-2 sec h-screen">
<h2>MUY RAPIDO</h2>
<img src={chart.src} />
<p class="text-pretty p-2 text-center">
Al ser un lenguaje de sistemas, Rust tiene excelente rendimiento.
</p>
<div class="flex flex-col items-center gap-5 sec h-[65vh]">
<div class="flex flex-col mt-32 items-center gap-2">
<h3 class="text-[30px]">POR QUE</h3>
<h2 class="text-orange-600 text-[50px]">RUST</h2>
</div>
<div class="flex flex-col items-center justify-center gap-2 sec h-screen">
<h2>RECURSOS</h2>
<h3 class="text-[25px]">PREDECIBLES</h3>

<img src="predictability.png" />
<p class="text-pretty py-2 px-6 text-center">
Olvidate de metricas dificiles de predecir y presupuestar
</p>
</div>
<div
class="flex flex-col items-center justify-center py-4 gap-2 sec h-screen"
>
<h2>SEGURO</h2>
<h3 class="text-[25px]">POR DISEÑO</h3>
<img class="relative w-[230px] h-[230px]" src="rust.png" />
</div>
<div class="flex flex-col items-center justify-center p-4 gap-2 sec h-screen">
<h2>MUY RAPIDO</h2>
<img src={chart.src} />
<p class="text-pretty p-2 text-center">
Al ser un lenguaje de sistemas, Rust tiene excelente rendimiento.
</p>
</div>
<div class="flex flex-col items-center justify-center gap-2 sec h-screen">
<h2>RECURSOS</h2>
<h3 class="text-[25px]">PREDECIBLES</h3>

<img src="predictability.png" />
<p class="text-pretty py-2 px-6 text-center">
Olvidate de metricas dificiles de predecir y presupuestar
</p>
</div>
<div class="flex flex-col items-center justify-center py-4 gap-2 sec h-screen">
<h2>SEGURO</h2>
<h3 class="text-[25px]">POR DISEÑO</h3>

<img src="secure.png" class="max-h-[280px] self-end" />
<p class="text-pretty py-2 px-6 text-center">
Evita muchos problemas productivos antes de imaginarlos gracias al
compilador.
</p>
<img src="secure.png" class="max-h-[280px] self-end" />
<p class="text-pretty py-2 px-6 text-center">
Evita muchos problemas productivos antes de imaginarlos gracias al
compilador.
</p>
</div>
<div
class="flex flex-col items-center justify-center p-1 gap-4 pt-20 sec h-[70vh]"
>
<h2>ECOSISTEMA</h2>
<h4 class="font-bold">MODERNO</h4>
<div class="flex justify-center items-center gap-8">
<Clickable className="px-2 py-4"> Formatter </Clickable>
<Clickable className="px-2 py-4"> Gestor de paquetes </Clickable>
</div>
<div class="flex flex-col items-center justify-center p-1 gap-4 pt-20 sec">
<h2>ECOSISTEMA</h2>
<h4 class="font-bold">MODERNO</h4>
<div class="flex justify-center items-center gap-8">
<Clickable className="px-2 py-4"> Formatter </Clickable>
<Clickable className="px-2 py-4"> Gestor de paquetes </Clickable>
</div>
<div class="flex justify-center items-center gap-6">
<Clickable className="px-2 py-4"> Reglas para calidad </Clickable>
<Clickable className="px-2 py-4"> Y mucho más </Clickable>
</div>
<p class="p-5 text-pretty text-center">
Todas las herramientas que necesitas,<br /> Ya incluidas en la instalación.
</p>
<div class="flex justify-center items-center gap-6">
<Clickable className="px-2 py-4"> Reglas para calidad </Clickable>
<Clickable className="px-2 py-4"> Y mucho más </Clickable>
</div>
</section>
<p class="p-5 text-pretty text-center">
Todas las herramientas que necesitas,<br /> Ya incluidas en la instalación.
</p>
</div>

0 comments on commit b76c5fb

Please sign in to comment.