feat: projects description

dararod · Oct 16, 2024 · 28a404e · 28a404e
1 parent d54de79
commit 28a404e
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 136 deletions.
diff --git a/src/components/Badge.astro b/src/components/Badge.astro
@@ -1,3 +1,5 @@
-<span class="bg-yellow-100 h-7 flex justify-center items-center text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
-    <slot/>
-</span>
+<span
+  class="bg-yellow-100 h-7 flex justify-center items-center text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300"
+>
+  <slot />
+</span>
diff --git a/src/components/Experience.astro b/src/components/Experience.astro
@@ -1,14 +1,17 @@
 <ol class="relative border-gray-200 dark:border-gray-700">
-    <li class="ms-4">
-        <time
-            class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-            >February 2023 - Now</time
-        >
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-           Software Developer
-        </h3>
-        <p class="max-w-[500px] text-pretty text-sm lg:text-base font-normal text-gray-500 dark:text-gray-400">
-            I worked developing in a performant e-commerce doing Fron-End and testing, and I also work on many beutiful landing pages. 
-        </p>
-    </li>
+  <li class="ms-4">
+    <time
+      class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
+      >February 2023 - October 2024</time
+    >
+    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+      Software Developer
+    </h3>
+    <p
+      class="max-w-[500px] text-pretty text-sm lg:text-base font-normal text-gray-500 dark:text-gray-400"
+    >
+      I worked developing in a performant e-commerce doing Fron-End and testing,
+      and I also work on many beutiful landing pages.
+    </p>
+  </li>
 </ol>
diff --git a/src/components/Projects.astro b/src/components/Projects.astro
@@ -2,70 +2,77 @@
 import Svelte from "../icons/Svelte.astro";
 import Tailwind from "../icons/Tailwind.astro";
 import TypeScript from "../icons/TypeScript.astro";
+import Vitest from "../icons/Vitest.astro";
 
 const TAGS = {
-    SVELTE: {
-        name: "Svelte",
-        class: "bg-[#ff3e00]/30 text-white",
-        icon: Svelte,
-    },
-    TAILWIND: {
-        name: "Tailwind CSS",
-        class: "bg-cyan-700/30 text-white",
-        icon: Tailwind,
-    },
-    TYPESCRIPT: {
-        name: "TypeScript",
-        class: "bg-[#2f74c0]/30 text-white",
-        icon: TypeScript,
-    },
+  SVELTE: {
+    name: "Svelte",
+    class: "bg-[#ff3e00]/30 text-white",
+    icon: Svelte,
+  },
+  TAILWIND: {
+    name: "Tailwind CSS",
+    class: "bg-cyan-700/30 text-white",
+    icon: Tailwind,
+  },
+  TYPESCRIPT: {
+    name: "TypeScript",
+    class: "bg-[#2f74c0]/30 text-white",
+    icon: TypeScript,
+  },
+  VITEST: {
+    name: "Vitest",
+    class: "bg-[#729b1a]/30 text-white",
+    icon: Vitest,
+  },
 };
 
 const PROJECTS = [
-    {
-        title: "LeBonDessert Page",
-        description:
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-        link: "https://lebondessert.com/",
-        image: "/images/lebondessert.webp",
-        tags: [TAGS.SVELTE, TAGS.TYPESCRIPT, TAGS.TAILWIND],
-    },
-    {
-        title: "Endurance Trainning Page",
-        description:
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-        link: "https://lebondessert.com/",
-        image: "/images/endurance.webp",
-        tags: [TAGS.SVELTE, TAGS.TYPESCRIPT, TAGS.TAILWIND],
-    },
+  {
+    title: "LeBonDessert Page",
+    description:
+      "A web page solution for an entrepreneur, featuring a tempting menu of desserts. Users can browse and place orders via WhatsApp, blending convenience with a delightful browsing experience.",
+    link: "https://lebondessert.com/",
+    image: "/images/lebondessert.webp",
+    tags: [TAGS.SVELTE, TAGS.TYPESCRIPT, TAGS.TAILWIND],
+  },
+  {
+    title: "Endurance Trainning App",
+    description:
+      "In collaboration with my team, I developed a web solution for a coach that includes an interactive calendar. This tool allows the creation of classes and management of student payments and attendance, facilitating efficient and personalized organization.",
+    link: "https://lebondessert.com/",
+    image: "/images/endurance.webp",
+    tags: [TAGS.SVELTE, TAGS.TYPESCRIPT, TAGS.TAILWIND, TAGS.VITEST],
+  },
 ];
 ---
+
 <div class="flex flex-col gap-y-16">
-    {
-        PROJECTS.map(({ image, title, description, tags }) => (
-            <article class="ms-4">
-                <h3 class="text-lg font-semibold mb-2">{title}</h3>
-                <p class="text-pretty text-sm lg:text-base font-normal text-gray-500 dark:text-gray-400">
-                    {description}
-                </p>
-                <ul class="flex gap-x-2 flex-row my-4">
-                    {tags.map((tag) => (
-                        <li>
-                            <span
-                                class={`flex gap-x-2 rounded text-xs ${tag.class} py-1 px-2 `}
-                            >
-                                <tag.icon class="size-4" />
-                                {tag.name}
-                            </span>
-                        </li>
-                    ))}
-                </ul>
-                <img
-                    class="rounded shadow-2xl h-96 w-full"
-                    src={image}
-                    alt="Screenshot of the project"
-                />
-            </article>
-        ))
-    }
+  {
+    PROJECTS.map(({ image, title, description, tags }) => (
+      <article class="ms-4">
+        <h3 class="text-lg font-semibold mb-2">{title}</h3>
+        <p class="text-pretty text-sm lg:text-base font-normal text-gray-500 dark:text-gray-400">
+          {description}
+        </p>
+        <ul class="flex gap-x-2 flex-row my-4">
+          {tags.map((tag) => (
+            <li>
+              <span
+                class={`flex gap-x-2 rounded text-xs ${tag.class} py-1 px-2 `}
+              >
+                <tag.icon class="size-4" />
+                {tag.name}
+              </span>
+            </li>
+          ))}
+        </ul>
+        <img
+          class="rounded shadow-2xl h-96 w-full"
+          src={image}
+          alt="Screenshot of the project"
+        />
+      </article>
+    ))
+  }
 </div>
diff --git a/src/components/SectionContainer.astro b/src/components/SectionContainer.astro
@@ -1,6 +1,7 @@
 ---
-const { id } = Astro.props
+const { id } = Astro.props;
 ---
+
 <section id={id} class={`w-full lg:w-[740px] mx-auto ${Astro.props.class}`}>
-    <slot />
-</section>
+  <slot />
+</section>
diff --git a/src/components/SocialPill.astro b/src/components/SocialPill.astro
@@ -1,8 +1,8 @@
 <a
-    class="border h-8 text-xs lg:text-sm border-white/10 flex rounded-lg hover:scale-110 transition bg-white/5 justify-center gap-x-1 lg:gap-x-2 p-1 lg:px-2 lg:py-2 items-center"
-    href={Astro.props.href}
-    target="_blank"
-    rel="noopener noreferrer"
+  class="border h-8 text-xs lg:text-sm border-white/10 flex rounded-lg hover:scale-110 transition bg-white/5 justify-center gap-x-1 lg:gap-x-2 p-1 lg:px-2 lg:py-2 items-center"
+  href={Astro.props.href}
+  target="_blank"
+  rel="noopener noreferrer"
 >
-    <slot />
+  <slot />
 </a>
diff --git a/src/icons/Vitest.astro b/src/icons/Vitest.astro
@@ -0,0 +1,16 @@
+<svg
+  {...Astro.props}
+  viewBox="0 0 256 234"
+  width="256"
+  height="234"
+  xmlns="http://www.w3.org/2000/svg"
+  preserveAspectRatio="xMidYMid"
+  ><path
+    d="m192.115 70.808-61.2 88.488a5.27 5.27 0 0 1-2.673 2.002 5.285 5.285 0 0 1-3.343-.005 5.25 5.25 0 0 1-2.66-2.01 5.214 5.214 0 0 1-.903-3.203l2.45-48.854-39.543-8.386a5.256 5.256 0 0 1-2.292-1.118 5.222 5.222 0 0 1-1.83-4.581 5.226 5.226 0 0 1 .895-2.383L142.218 2.27a5.279 5.279 0 0 1 6.016-1.996 5.243 5.243 0 0 1 2.66 2.01c.643.942.96 2.066.903 3.203l-2.45 48.855 39.542 8.386a5.262 5.262 0 0 1 2.293 1.117 5.21 5.21 0 0 1 1.829 4.582 5.212 5.212 0 0 1-.896 2.382Z"
+    fill="#FCC72B"></path><path
+    d="M128.025 233.537a12.356 12.356 0 0 1-8.763-3.63l-57.828-57.823a12.389 12.389 0 0 1 .023-17.5 12.394 12.394 0 0 1 17.5-.024l49.068 49.061L234.917 96.733a12.39 12.39 0 0 1 17.523 17.524l-115.655 115.65a12.343 12.343 0 0 1-8.76 3.63Z"
+    fill="#729B1B"></path><path
+    d="M127.975 233.537a12.356 12.356 0 0 0 8.763-3.63l57.828-57.823a12.385 12.385 0 0 0 3.605-8.754 12.395 12.395 0 0 0-12.375-12.376 12.4 12.4 0 0 0-8.755 3.606l-49.066 49.061L21.082 96.733a12.392 12.392 0 0 0-17.524 17.524l115.656 115.65a12.347 12.347 0 0 0 8.76 3.63Z"
+    fill-opacity=".5"
+    fill="#729B1B"></path></svg
+>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,65 +2,71 @@
 import Layout from "../layouts/Layout.astro";
 import Badge from "../components/Badge.astro";
 import SocialPill from "../components/SocialPill.astro";
-import LinkedInIcon from "../icons/LinkedIn.astro"
-import GithubIcon from "../icons/Github.astro"
-import MailIcon from "../icons/Mail.astro"
+import LinkedInIcon from "../icons/LinkedIn.astro";
+import GithubIcon from "../icons/Github.astro";
+import MailIcon from "../icons/Mail.astro";
 import SectionContainer from "../components/SectionContainer.astro";
 import Experience from "../components/Experience.astro";
 import Projects from "../components/Projects.astro";
 ---
 
-<Layout description="Hire David to create your web application. Web developer." title="David's Portfolio - Web developer and programmer">
-	<main class="mx-4 pb-20 md:mx-auto lg:m-0 h-full">
-		<SectionContainer class="pt-14 lg:pt-44 pb-12 lg:pb-24">
-			<img
-				class="size-12 mb-4 object-cover rounded-full"
-				src="https://avatars.githubusercontent.com/u/29829194?v=4"
-				alt=""
-			/>
-			<h1
-				class="text-white text-3xl md:text-4xl lg:text-5xl font-bold flex flex-row gap-x-4 pb-4"
-			>
-				Hey, I'm David
-				<div class="flex justify-center items-center">
-					<a
-						href="https://www.linkedin.com/in/david-rodr%C3%ADguez-370080250/"
-						rel="noopener"
-						target="_blank"
-					>
-						<Badge>Available for hire</Badge>
-					</a>
-				</div>
-			</h1>
-			<h2 class="text-base lg:text-xl md:text-lg opacity-80 max-w-[700px]">
-				Web developer based in Valencia, Venezuela. I specialize in Web
-				Apps I grew up surrounded by technology, and started learning
-				programming when I was 17. I'm self-taught programer
-			</h2>
-
-			<nav class="flex gap-4 mt-4 flex-wrap">
-				<SocialPill href="https://www.linkedin.com/in/david-rodr%C3%ADguez-370080250/">
-					<LinkedInIcon class="size-4 lg:size-5"/>
-					LinkedIn
-				</SocialPill>
-				<SocialPill href="https://github.com/dararod">
-					<GithubIcon class="size-4 lg:size-5"/>
-					Github
-				</SocialPill>
-				<SocialPill href="mailto:[email protected]">
-					<MailIcon class="size-4 lg:size-5"/>
-					[email protected]
-				</SocialPill>
+<Layout
+  description="Hire David to create your web application. Web developer."
+  title="David's Portfolio - Web developer and programmer"
+>
+  <main class="mx-4 pb-20 md:mx-auto lg:m-0 h-full">
+    <SectionContainer class="pt-14 lg:pt-44 pb-12 lg:pb-24">
+      <img
+        class="size-12 mb-4 object-cover rounded-full"
+        src="https://avatars.githubusercontent.com/u/29829194?v=4"
+        alt=""
+      />
+      <h1
+        class="text-white text-3xl md:text-4xl lg:text-5xl font-bold flex flex-row gap-x-4 pb-4"
+      >
+        Hey, I'm David
+        <div class="flex justify-center items-center">
+          <a
+            href="https://www.linkedin.com/in/david-rodr%C3%ADguez-370080250/"
+            rel="noopener"
+            target="_blank"
+          >
+            <Badge>Available for hire</Badge>
+          </a>
+        </div>
+      </h1>
+      <h2 class="text-base lg:text-xl md:text-lg opacity-80 max-w-[700px]">
+        Web developer based in Valencia, Venezuela. I specialize in Web Apps I
+        grew up surrounded by technology, and started learning programming when
+        I was 17. I'm self-taught programmer
+      </h2>
 
-			</nav>
-		</SectionContainer>
-		<SectionContainer class="pb-14" id="experience">
-			<h2 class="text-2xl lg:text-3xl font-semibold mb-3 lg:mb-4">Experience</h2>
-			<Experience />
-		</SectionContainer>
-		<SectionContainer id="projects">
-			<h2 class="text-2xl lg:text-3xl font-semibold mb-3 lg:mb-4">Projects</h2>
-			<Projects />
-		</SectionContainer>
-	</main>
+      <nav class="flex gap-4 mt-4 flex-wrap">
+        <SocialPill
+          href="https://www.linkedin.com/in/david-rodr%C3%ADguez-370080250/"
+        >
+          <LinkedInIcon class="size-4 lg:size-5" />
+          LinkedIn
+        </SocialPill>
+        <SocialPill href="https://github.com/dararod">
+          <GithubIcon class="size-4 lg:size-5" />
+          Github
+        </SocialPill>
+        <SocialPill href="mailto:[email protected]">
+          <MailIcon class="size-4 lg:size-5" />
+          [email protected]
+        </SocialPill>
+      </nav>
+    </SectionContainer>
+    <SectionContainer class="pb-14" id="experience">
+      <h2 class="text-2xl lg:text-3xl font-semibold mb-3 lg:mb-4">
+        Experience
+      </h2>
+      <Experience />
+    </SectionContainer>
+    <SectionContainer id="projects">
+      <h2 class="text-2xl lg:text-3xl font-semibold mb-3 lg:mb-4">Projects</h2>
+      <Projects />
+    </SectionContainer>
+  </main>
 </Layout>