first commit

src/pages/index.astro

@@ -0,0 +1,66 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Experience from "../components/portfolio/Experience.astro";
+import HeroIndex from "../components/portfolio/HeroIndex.astro";
+import Contact from "../components/portfolio/Contact.astro";
+import ListProjects from "../components/portfolio/ListProjects.astro";
+import { Icon } from "astro-icon/components";
+const pageTitle = "Fernando Lopez | Frontend Developer | EFEELE ";
+const description = "I'm Fernando Lopez, a passionate frontend developer focused on design and usability. Here you can explore my projects and discover how I can transform your ideas into quality web solutions.";
+const ogimage = {
+  url: "/images/imagedefault.webp",
+  alt: "Screenshot of a web portfolio with a modern and dark design. Featuring Fernando López, a Frontend Developer with 8 years of experience, highlighting his passion for development and technology. Includes contact sections, projects, and a technology stack with technologies like HTML5, JavaScript, TypeScript, Angular, Node.js, CSS, Tailwind, and more.",
+};
+import Heading from "../components/ui/Heading.astro";
+---
+
+<Layout pageTitle={pageTitle} description={description} ogimage={ogimage}>
+  <HeroIndex />
+
+  <section
+    class="py-8 px-8 max-md:py-4 mb-4 scroll-m-16"
+    id="experience"
+  >
+    <div class="flex flex-col  pt-8 max-w-4xl mx-auto">
+      <div class="flex gap-4 items-center justify-center">
+        <Icon class="text-3xl dark:text-white text-blacktext" name="briefcase" />
+        <Heading text="Experience" textGradient="Work" level={2}/>
+      </div>
+
+      <Experience />
+    </div>
+  </section>
+
+  <section
+    class="bg-gradient-to-t dark:from-[#0e0e10] from-[#fff] from-50% to-transparent to-100% scroll-m-16"
+    id="projects"
+  >
+    <div class="flex flex-col gap-8 max-w-7xl mx-auto">
+      <ListProjects>
+        <div class="flex gap-4 items-center justify-center text-center">
+          <Icon class="text-3xl dark:text-white text-blacktext" name="code" />
+          <Heading text="Projects" textGradient="Completed" level={2}/>
+        </div>
+        <p
+          class="z-2 text-center mx-auto text-lg max-xl:text-base max-w-2xl dark:text-gray-200 text-blacktext my-6 leading-6 font-medium"
+        >
+          I love <b
+            class=" bg-gradient-to-r  from-riptide-500 to-mint-500 dark:from-riptide-300 dark:to-mint-200 text-transparent bg-clip-text"
+            >turning ideas into real projects.</b
+          >
+          <br /> Here I show you some of the <b
+            class="d bg-gradient-to-r  from-riptide-500 to-mint-500 dark:from-riptide-300 dark:to-mint-200 text-transparent bg-clip-text"
+            >developments</b
+          > I've worked on, applying technology, design, and lots of creativity.
+          <b
+            class=" bg-gradient-to-r  from-riptide-500 to-mint-500 dark:from-riptide-300 dark:to-mint-200 text-transparent bg-clip-text"
+            >Check them out!</b
+          >
+        </p>
+      </ListProjects>
+    </div>
+  </section>
+
+
+  <Contact />
+</Layout>