add new project

midudev · Mar 31, 2024 · 3312c2a · 3312c2a
1 parent ba3b119
commit 3312c2a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 14 deletions.
diff --git a/web/public/projects/03.webp b/web/public/projects/03.webp
diff --git a/web/src/components/InfoProject.astro b/web/src/components/InfoProject.astro
@@ -1,5 +1,7 @@
 ---
 const { info } = Astro.props
+const { theme = {} } = info
+const { isDark = false } = theme
 ---
 
 <div class="hidden sm:block absolute left-4 bottom-4 px-8 py-1 rounded-lg">
@@ -10,22 +12,24 @@ const { info } = Astro.props
  >
  <div class="flex flex-col text-center leading-none">
  <span
- class="tracking-tighter text-4xl px-1 bg-clip-text inline-block text-transparent bg-gradient-to-r from-slate-400 to-slate-600"
- >100</span
+ class:list={[
+ {
+ "from-slate-400 to-slate-600": !isDark,
+ "from-slate-100 via-slate-400 to-slate-500": isDark,
+ },
+ "tracking-tighter text-4xl px-1 bg-clip-text inline-block text-transparent bg-gradient-to-r",
+ ]}>100</span
  >
- <span class="tracking-tighter text-slate-800 text-[14px]"
- >proyectos</span
+ <span
+ class:list={[
+ isDark ? "text-white/80" : "text-black/80",
+ "tracking-tighter text-slate-800 text-[14px]",
+ ]}>proyectos</span
  >
  </div>
 
  <span class="rotate-6">
- <svg
- class="rounded"
- width="52"
- height="52"
- xmlns="https://www.w3.org/2000/svg"
- viewBox="0 0 630 630"
- >
+ <svg class="rounded" width="52" height="52" viewBox="0 0 630 630">
  <rect width="630" height="630" fill="#f7df1e"></rect>
  <path
  d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"
@@ -35,11 +39,18 @@ const { info } = Astro.props
  </a>
  </h1>
  <h2
- class="font-semibold animate-fade-in animate-delay-300 mt-2 text-base text-center tracking-tighter text-yellow-800"
+ class:list={[
+ isDark ? "text-yellow-400" : "text-yellow-600",
+ "font-semibold animate-fade-in animate-delay-300 mt-2 text-base text-center tracking-tighter",
+ ]}
  >
  #{info.number} - {info.title}
  </h2>
- <a class="text-xs animate-fade-in animate-delay-800 hover:underline" href="/"
- >← Volver a los proyectos</a
+ <a
+ class:list={[
+ "text-xs animate-fade-in animate-delay-800 hover:underline",
+ isDark ? "text-white/90" : "text-black/90",
+ ]}
+ href="/">← Volver a los proyectos</a
  >
 </div>
diff --git a/web/src/consts.js b/web/src/consts.js
@@ -25,4 +25,18 @@ export const PROJECTS = [
  ],
  youtube: 'https://www.youtube.com/watch?v=b6du6MvQmuQ'
  },
+ {
+ slug: "03-midu-typing-game",
+ title: "Reto de Mecanografía",
+ description: "Pon a prueba tus habilidades de mecanografía con este reto",
+ learnings: [
+ "DOM",
+ "Eventos de teclado",
+ "Manejo de clases",
+ "Optimización selectores"
+ ],
+ theme: {
+ isDark: true
+ }
+ }
 ]