first commit
This commit is contained in:
EFEELE
109
src/pages/about-me.md
Normal file
109
src/pages/about-me.md
Normal file
@@ -0,0 +1,109 @@
|
||||
---
|
||||
layout: /src/layouts/MarkdownAbout.astro
|
||||
title: "Fernando López | My Journey in Technology and Web Development 🚀| EFEELE"
|
||||
description: "Web developer, technology enthusiast, and event organizer. From my beginnings in development to creating communities and impactful projects, here I share my journey, experiences, and learnings. 🚀☕"
|
||||
author: "Fernando Lopez"
|
||||
image:
|
||||
url: "/images/efeeleprofile.webp"
|
||||
alt: "Photo of Fernando Aldair López Ponce (EFEELE) for the blog"
|
||||
---
|
||||
|
||||
I started developing my first commercial projects as a web developer in 2017. Although I've been passionate about technology for as long as I can remember. I discovered the internet at age 6, and along with it, I learned to use **Paint** 🎨 and play **Pinball** on a **Windows XP** computer that my cousins had. Years passed, and I discovered there was a cyber café near my house, so accompanied by my older brother, I spent a lot of time there, watching others play **Age of Empires** ⚔️. When I could, I also played on the computers and investigated how those games worked. But above all, I remember that while sitting there, I watched the owner, Alfredo, the good <a href="https://fred.cpp.mx/" target="_blank" rel="noopener noreferrer">Fred</a>, while he programmed and modeled game maps, or at least that's what I remember. That made me want to try doing the same. I found it incredible how so many things happened on his screen that, although I couldn't understand them, looked amazing. Without a doubt, he was my first influence to get into programming.
|
||||
|
||||
When we got our first computer at home, around 2011, I spent all my time there, creating my own texture packs to integrate them into one of the games I played the most: **GTA SA**. For this, I learned to use **GIMP** and later **Photoshop**. I wanted to go further and started creating scenarios for the game, so that's when I learned 3D modeling. By then, I was already 12 years old, and I remember I had the intention of dedicating myself to creating video games 🎮. A couple of years later, knowing that programming is needed to create video games, I researched a bit and created my first website with **HTML 4** and **CSS3**. It was a static page, clearly not responsive, and its design and content were very poor, but I felt very proud seeing my page working online.
|
||||
|
||||
## My Beginnings in Programming 🖥️
|
||||
|
||||
In 2014, I entered high school and decided to take the Programming Technician career. In the first semester, as an integral project, I knew I wanted to make a video game, so I committed to doing it. I learned to use **Unity**, delved deeper into **Blender**, and a bit into **C#**. It was an arduous process, as no one on my team knew how to program, but with their help, we all learned a bit more and managed to complete the project. We delivered a functional demo of a character in a scenario in our 3D _survival_ type game. It was at that moment that I discovered that making a video game is not easy at all and understood the magnitude of knowledge, time, and dedication needed.
|
||||
|
||||
I felt good about having achieved that small project, but gradually I fell more in love with web design and development. So, I started learning more about **HTML**, **CSS**, and **JavaScript**. I spent all my free time watching courses and practicing on fictional sites that I designed.
|
||||
|
||||
## The World of Robotics 🤖
|
||||
|
||||
In high school, a teacher and good friend, **Esteban Ángeles**, recruited me to belong to the school's robotics team, which competed in <a href="https://www.vexrobotics.com.mx/" target="_blank" rel="noopener noreferrer">VEX Robotics</a> tournaments. He saw me while I was designing a "3D spider robot" in **Autodesk Inventor**, so I was able to integrate more friends into the team. One of them was <a href="https://github.com/erikestr" target="_blank" rel="noopener noreferrer">Erik Alejandro Estrada Sauza</a>, someone with the same drive and curiosity as me. I was the robot designer, and he programmed it. Along with the rest of the team, we built it. It was a very fun experience full of learning.
|
||||
|
||||
In 2015, thanks to teacher Esteban, I was invited to take an **Autodesk Inventor** course for a week in another city, offered directly by **Autodesk**. At that time, the need arose in the team to get a 3D printer to further improve the functioning of our robot, so we started researching and trying to manufacture our own 3D printer. During that process, we discovered **Kickstarter** and ventured to try to publish a 3D printing project.
|
||||
|
||||
## Exploring Crowdfunding 💡
|
||||
|
||||
We discovered that in Mexico there was **_Fondeadora_**, a platform similar to Kickstarter. Coincidentally, both platforms were about to merge and, as we had a draft project on Kickstarter, we were invited to the merger event between Fondeadora and Kickstarter. Additionally, we participated in the _<a href="https://www.kickstarter.com/projects/willburgm/100-kickstarter-dreams-the-voice-of-100-creators#react-campaign" target="_blank" rel="noopener noreferrer">Make/100 Kickstarter Dreams - The Voice of 100 Creators</a>_ project, an e-book with a compilation of 100 creators sharing their experience and knowledge gained in their campaigns. There I appeared representing my team as one of the 100 creators.
|
||||
|
||||
## My First Steps in TEDx Events 🎤
|
||||
|
||||
I was approximately 14 years old when I discovered **TED** talks. I instantly became a fan and, since then, I wanted to attend a TED event, give a talk, or even be part of the organizing team. In 2018, I met a good friend, <a href="https://www.ted.com/profiles/7487162/" target="_blank" rel="noopener noreferrer">Octavio Rojas Xicali</a>, who gave me the opportunity to participate in my first **TEDx** event. I helped with the development of the event's website and with other organizational tasks. It was an incredible experience that consolidated my love for TED and my desire to contribute to spreading ideas.
|
||||
|
||||
Thanks to the people I met in that TEDx experience, I got some of my first clients, some of whom continue working with me to this day. Since then, I've dedicated myself to web development, while also carrying out small projects and organizing events.
|
||||
|
||||
## We Organize Events 🚀
|
||||
|
||||
Between 2018 and 2019, I had the fortune to be a sponsor and collaborate in organizing:
|
||||
|
||||
- **<a href="https://www.ted.com/tedx/events/25335" target="_blank" rel="noopener noreferrer">TEDxPalmitas Transform Your Walls</a>** | 2018
|
||||
- **<a href="https://nights.talent-network.org/ediciones-anteriores/#" target="_blank" rel="noopener noreferrer">Talent Nights Hidalgo, Second Edition</a>** | 2018
|
||||
- **<a href="https://www.talent-network.org/comunidades/comunidades-centro/pachuca-startup-weekend/" target="_blank" rel="noopener noreferrer">Startup Weekend Pachuca Social Innovation</a>** | 2018
|
||||
- **<a href="https://www.talent-network.org/comunidades/comunidades-centro/pachuca-startup-weekend/" target="_blank" rel="noopener noreferrer">Techstars Global Startup Weekend Sustainable Revolution Pachuca</a>** | 2019
|
||||
- **<a href="https://www.ted.com/tedx/events/34332" target="_blank" rel="noopener noreferrer">TEDxPalmitas Winds of Change</a>** | 2019
|
||||
|
||||
## Creating Impact with Technology 🌍
|
||||
|
||||
<iframe class="w-full rounded-2xl overflow-hidden aspect-video h-auto" width="560" height="315" src="https://www.youtube.com/embed/6MlhVoqGWlM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<br>
|
||||
|
||||
In 2020, with the COVID-19 pandemic, I observed the need in some local medical centers and decided, along with a group of friends including <a href="https://www.linkedin.com/in/mmayradiga/" target="_blank" rel="noopener noreferrer">Mayra Diaz</a>, to contribute our grain of sand by printing and donating 3D face shields. Little by little, the project grew and more people joined. Thus was born <a href="https://sdgactionawards.org/homemakersmexico/" target="_blank" rel="noopener noreferrer">Hope Makers México</a>.
|
||||
|
||||
In 2021, together with another great friend, Guillermo Mora, we created <a href="https://devs.tizayocan.com/" target="_blank" rel="noopener noreferrer">Devs_Tiza</a>, a community for developers, designers, and technology enthusiasts. Our goal is to organize events, workshops, and mentoring to strengthen the local technology ecosystem.
|
||||
|
||||
## Sharing Knowledge 🧠
|
||||
|
||||
I've always liked **sharing my knowledge**. I often give small courses or mentoring to friends, students, or companies. When questions arise from them is when I learn the most, because sometimes these questions may seem simple and the answers are something we take for granted, but perhaps we don't fully understand why it is so. This pushes us to:
|
||||
|
||||
- Deepen our understanding of concepts
|
||||
- Understand them better
|
||||
- Transform them into something that can be taught clearly and practically
|
||||
|
||||
> Grounding knowledge is, for me, the bridge between knowing and teaching.
|
||||
|
||||
### Programming Mentoring 💻
|
||||
|
||||
From 2021 to the present, I have closely guided more than 15 high school students in the programming career. Taking into account that they are starting their education, when they reach the point of understanding how web pages are made, they begin with the most basic:
|
||||
|
||||
1. HTML
|
||||
2. CSS
|
||||
3. JavaScript (fundamentals)
|
||||
|
||||
I have tried to teach them this in the way I would have liked to learn it at the time, obtaining excellent results, as concepts that weren't clear to them in school could be understood and applied following this different approach.
|
||||
|
||||
### Educational Content on YouTube 📹
|
||||
|
||||
Many of them were especially interested in frontend and wanted to better understand and master CSS. Therefore, I started creating small videos that I uploaded to my <a href="https://www.youtube.com/@efeeledev" target="_blank" rel="noopener noreferrer">YouTube channel</a> privately so they could consult them when needed.
|
||||
|
||||
In 2024, I recorded some <a href="https://www.frontendmentor.io/" target="_blank" rel="noopener noreferrer">FrontEndMentor</a> challenges with better quality and published them on my channel. Currently, I share these resources with people I know who are interested in the topic and want to learn by watching how it's put into practice.
|
||||
|
||||
Although there are few videos, I really enjoyed the process. Due to time limitations, I haven't been able to record more, as they require a lot of dedication, but I'm sure that **I'll soon be publishing new content**.
|
||||
|
||||
### Some of My Videos 🎬
|
||||
|
||||
Here I share some of those videos I've created to help others learn web development. Each one addresses different challenges and techniques that can be useful for those who are starting in the frontend world.
|
||||
|
||||
<div className="grid grid-cols-2 grid-rows-1 gap-4">
|
||||
<a href="https://www.youtube.com/watch?v=3c_I0z7zWA4" target="_blank" class="w-full aspect-video rounded-lg overflow-hidden"> <img src="https://i.ytimg.com/vi/3c_I0z7zWA4/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLAlyIf_1XClnSkZvhjsDHVO1fNpdw"> </a>
|
||||
<a href="https://www.youtube.com/watch?v=1q7YTgCgYEM&t " target="_blank" class="w-full aspect-video rounded-lg overflow-hidden"><img src="https://i.ytimg.com/vi/1q7YTgCgYEM/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLADBY3y6quLEnjFya4a1Goo6h5_2w"></img></a>
|
||||
<a href="https://www.youtube.com/watch?v=PYMEWsxiu5A&t" target="_blank" class="w-full aspect-video rounded-lg overflow-hidden"><img src="https://i.ytimg.com/vi/PYMEWsxiu5A/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLAS2t0vxEufiWoxqwRRq8qIxRvICw"></img></a>
|
||||
<a href="https://www.youtube.com/watch?v=vbefk8HFEzc&t" target="_blank" class="w-full aspect-video rounded-lg overflow-hidden"><img src="https://i.ytimg.com/vi/vbefk8HFEzc/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLDaxgQ4OBeCsn-KMbJXaZK_wJh9GQ"></img></a>
|
||||
</div>
|
||||
|
||||
## What's Next... 🚀
|
||||
|
||||
In 2023, **Proyecto Tizayocan** was born, an initiative that seeks to apply technology to improve education, urban management, and connectivity in the municipality. This project is still in development, and we are gathering more collaborators to continue advancing.
|
||||
|
||||
At the end of 2024, after years working in the city council as **_Software Development Coordinator_**, and seeing the technological deficiencies of some municipalities, **StellarGov** emerges, a web components framework with Tailwind to help developers of small governments create fast and quality websites.
|
||||
|
||||
## A Bit More About Me ☕
|
||||
|
||||
Today, in 2025, I continue working as **_Software Development Coordinator_** in my municipality, collaborating with my usual clients and launching projects. I love creating things, experimenting with new ideas, and organizing events. I live with the _maker_ spirit: learning, experimenting, and sometimes causing a bit of chaos. But well, everything is forgiven if there's music and coffee involved. ☕🎶
|
||||
|
||||
Oh! And I'm an expert at preparing coffee. Seriously, whether it's to start the day or for a creative session, I have the perfect recipe. I'm also pretty good at board games, so if you ever need a partner for a game night, I'm your person! 🎲
|
||||
|
||||
I'm **Fernando Aldair López Ponce**, and I thank you for reading this.
|
||||
|
||||
## Let's Create Amazing Things! 🚀
|
||||
54
src/pages/blog/all-posts.astro
Normal file
54
src/pages/blog/all-posts.astro
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Hero from "../../components/blog/Hero.astro";
|
||||
import Tags from "../../components/blog/Tags.astro";
|
||||
import ListPosts from "../../components/blog/ListPosts.astro";
|
||||
const pageTitle = "Web Development and Technology Blog | Fernando López | EFEELE";
|
||||
const description = "Welcome to my blog, where I share my passion for frontend development, web design, and the latest technology trends.";
|
||||
const ogimage = {
|
||||
url: "/images/blogimage.webp",
|
||||
alt: "EFEELE.dev logo with green background and light effect. Text: 'Web Development and Technology Blog' and URL 'www.efeele.dev'.",
|
||||
};
|
||||
const currentUrl = `https://efeele.dev${Astro.url.pathname}`;
|
||||
const tweetText = encodeURIComponent(`"${pageTitle}"`);
|
||||
import Heading from "../../components/ui/Heading.astro";
|
||||
import Share from "../../components/ui/Share.astro";
|
||||
|
||||
import Languages from "../../components/blog/Languages.astro";
|
||||
---
|
||||
|
||||
<Layout pageTitle={pageTitle} description={description} ogimage={ogimage}>
|
||||
<div class="relative mx-auto max-w-7xl px-8 max-sm:px-4 gap-6">
|
||||
<div
|
||||
class="grid my-8 grid-cols-3 grid-rows-1 max-lg:grid-cols-1 max-lg:grid-rows-[1fr_auto] gap-12 max-md:gap-4"
|
||||
>
|
||||
<div class="lg:col-span-2">
|
||||
<ListPosts all={true} />
|
||||
</div>
|
||||
|
||||
<div class="lg:col-start-3">
|
||||
<div
|
||||
class="bg-white dark:bg-transparent w-full mt-0 rounded-2xl dark:border-0 border border-neutral-100 top-14 px-6 pt-8 pb-12"
|
||||
>
|
||||
<div class="flex flex-col gap-4 pl-0">
|
||||
<Heading textGradient="Categories" />
|
||||
<Tags variant="compact" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-white dark:bg-transparent w-full mt-8 rounded-2xl dark:border-0 border border-neutral-100 top-14 px-6 pt-8 pb-12"
|
||||
>
|
||||
<div class="flex flex-col gap-4 pl-0">
|
||||
<Heading textGradient="Technologies" level={2} />
|
||||
<Languages level={2} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-8 flex justify-end">
|
||||
<Share currentUrl={currentUrl} tweetText={tweetText} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
22
src/pages/blog/index.astro
Normal file
22
src/pages/blog/index.astro
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Hero from "../../components/blog/Hero.astro";
|
||||
import Tags from "../../components/blog/Tags.astro";
|
||||
import ListPosts from "../../components/blog/ListPosts.astro";
|
||||
const pageTitle = "Web Development and Technology Blog | Fernando López | EFEELE";
|
||||
const description = "Welcome to my blog, where I share my passion for frontend development, web design, and the latest technology trends.";
|
||||
const ogimage ={
|
||||
url: "/images/blogimage.webp",
|
||||
alt: "EFEELE.dev logo with green background and light effect. Text: 'Web Development and Technology Blog' and URL 'www.efeele.dev'."
|
||||
};
|
||||
---
|
||||
|
||||
<Layout pageTitle={pageTitle} description={description} ogimage={ogimage}>
|
||||
|
||||
<Hero />
|
||||
<Tags />
|
||||
<div class="px-8 max-sm:px-4">
|
||||
<ListPosts />
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
@@ -0,0 +1,240 @@
|
||||
---
|
||||
layout: /src/layouts/MarkdownPostLayout.astro
|
||||
title: Create an Animated Border with Tailwind CSS
|
||||
author: Fernando López
|
||||
description: "Add a dynamic touch to your designs with an animated border in Tailwind CSS. Learn how to use conic-gradient and animations to achieve an impressive visual effect. 🚀✨"
|
||||
image:
|
||||
url: "/images/posts/animated-borders-tailwind.webp"
|
||||
alt: "Example of animated borders with Tailwind CSS in a dark design, featuring a vibrant color gradient background."
|
||||
pubDate: 2025-03-27
|
||||
tags:
|
||||
[
|
||||
"CSS", "Tailwind", "Animation", "Frontend", "UI"
|
||||
|
||||
]
|
||||
languages: ["tailwind", "html", ]
|
||||
---
|
||||
|
||||
The `border` property in CSS cannot be animated natively. However, we can simulate this effect by using a `div` with an animated background and placing the content inside a child element with `padding`, which will act as the "thickness" of the border.
|
||||
|
||||
This method might seem complex for those who don't frequently work with CSS or frameworks like Tailwind CSS, but you'll see that it's not that difficult and the final result is quite satisfying.
|
||||
|
||||
## Types of Gradients in CSS
|
||||
|
||||
To achieve our animated border effect, we need to know the different types of gradients in CSS:
|
||||
|
||||
- **Linear Gradient:** Linear gradient along a specific direction.
|
||||
- [Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)
|
||||
- **Radial Gradient:** Radial gradient from a central point outward.
|
||||
- [Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient)
|
||||
- **Conic Gradient:** Conic gradient around a central point, creating a "wheel" effect.
|
||||
- [Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient)
|
||||
|
||||
For our animated border, we'll use **conic gradient**, as it allows us to create a spinning effect.
|
||||
|
||||
## Implementing the Animated Border
|
||||
|
||||
```html
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_0deg] from-white to-white dark:from-black via-green-400 dark:to-black rounded-2xl p-px"
|
||||
>
|
||||
<div class="p-10 rounded-2xl bg-transparent">
|
||||
<p class="text-white text-center font-semibold ">
|
||||
Parent container background
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="w-full max-w-lg bg-conic/[from_0deg] from-white to-white dark:from-black via-green-400 dark:to-black rounded-2xl p-px">
|
||||
<div class="p-10 rounded-2xl bg-transparent">
|
||||
<p class="text-white text-center font-semibold mt-8">
|
||||
Parent container background
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
|
||||
If we add a background to the child container, we achieve the border effect:
|
||||
|
||||
```html
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_0deg] from-white to-white dark:from-black via-green-400 dark:to-black rounded-2xl p-px"
|
||||
>
|
||||
<!-- Parent container -->
|
||||
<div class="p-10 rounded-2xl dark:dark:bg-zinc-900 bg-mint-50">
|
||||
<!-- Child container -->
|
||||
<p class="text-white text-center font-semibold">
|
||||
By adding a background to the child container, we achieve the border effect
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="w-full max-w-lg bg-conic/[from_0deg] from-white to-white dark:from-black via-green-400 dark:to-black rounded-2xl p-px">
|
||||
<div class="p-10 rounded-2xl dark:bg-zinc-900 bg-zinc-50">
|
||||
<p class="text-white text-center font-semibold mt-8">
|
||||
By adding a background to the child container, we achieve the border effect
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Adding Animation with `@property`
|
||||
|
||||
We'll use `@property` to define a custom property that will allow us to animate the border:
|
||||
|
||||
```css
|
||||
@property --border-angle {
|
||||
syntax: "<angle>";
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
}
|
||||
```
|
||||
|
||||
Then, we create the animation with `@keyframes` and add it to the Tailwind CSS theme:
|
||||
|
||||
```css
|
||||
@theme {
|
||||
--animate-rotate-border: border-rotate 3s linear infinite;
|
||||
@keyframes border-rotate {
|
||||
to {
|
||||
--border-angle: 360deg;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now we'll implement it in our parent container classes:
|
||||
|
||||
```html
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-white to-white dark:from-black via-green-400 dark:to-black animate-rotate-border rounded-2xl p-px"
|
||||
>
|
||||
<div class="p-10 rounded-2xl bg-transparent">
|
||||
<p class="text-white text-center font-semibold">
|
||||
Animated parent container background
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-white to-white dark:from-black via-green-400 dark:to-black animate-rotate-border rounded-2xl p-px">
|
||||
<div class="p-10 rounded-2xl bg-transparent">
|
||||
<p class="text-white text-center font-semibold mt-8">
|
||||
Animated parent container background
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-white to-white dark:from-black via-green-400 dark:to-black animate-rotate-border rounded-2xl p-px"
|
||||
>
|
||||
<div class="p-10 rounded-2xl dark:bg-zinc-900 bg-zinc-50">
|
||||
<p class="text-white text-center font-semibold mt-8">
|
||||
This is how it looks with a background in our content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Adjusting the Border Thickness
|
||||
|
||||
By modifying the `padding`, we can control the border thickness:
|
||||
|
||||
```html
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-white to-white dark:from-black via-green-400 dark:to-black animate-rotate-border rounded-2xl p-[3px]"
|
||||
>
|
||||
<div class="p-10 rounded-2xl dark:bg-zinc-900 bg-zinc-50">
|
||||
<p class="text-white text-center font-semibold">
|
||||
By adjusting the padding we can "increase the border thickness"
|
||||
<br />
|
||||
<code>p-[3px]</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-white to-white dark:from-black via-green-400 dark:to-black animate-rotate-border rounded-2xl p-[3px]"
|
||||
>
|
||||
<div class="p-10 rounded-2xl dark:bg-zinc-900 bg-zinc-50">
|
||||
<p class="text-white text-center font-semibold mt-8">
|
||||
By adjusting the padding we can "increase the border thickness"
|
||||
<br>
|
||||
<code>p-[3px]</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Customizing the Gradient
|
||||
|
||||
In Tailwind CSS, we can control the position of the gradient colors:
|
||||
|
||||
- `from-*` → Starting color of the gradient.
|
||||
- `via-*` → Intermediate color.
|
||||
- `to-*` → Final color of the gradient.
|
||||
|
||||
We can also adjust the color positions, for example:
|
||||
|
||||
```html
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-white to-white dark:from-black via-green-400 dark:to-black from-30% to-60% animate-rotate-border rounded-2xl p-px"
|
||||
>
|
||||
<div class="p-10 rounded-2xl bg-transparent">
|
||||
<p class="text-white text-center font-semibold">
|
||||
By adjusting the color positions we achieve a different effect
|
||||
<br />
|
||||
<code>from-30% to-60%</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-white to-white dark:from-black via-green-400 dark:to-black from-30% to-60% animate-rotate-border rounded-2xl p-px"
|
||||
>
|
||||
<div class="p-10 rounded-2xl bg-transparent">
|
||||
<p class="text-white text-center font-semibold mt-8">
|
||||
By adjusting the color positions we achieve a different effect
|
||||
<br />
|
||||
<code>from-30% to-60%</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Final Result
|
||||
|
||||
I'll make some small adjustments, changing the from and to colors to achieve a more natural effect. Also, I'll use a 1px padding.
|
||||
|
||||
```html
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-green-200/20 via-green-400 to-green-200/20 from-30% to-60% animate-rotate-border rounded-2xl p-px"
|
||||
>
|
||||
<div class="p-10 rounded-2xl dark:bg-zinc-900 bg-zinc-50">
|
||||
<p class="text-white text-center font-semibold">
|
||||
This is the final result
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div
|
||||
class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-green-200/20 via-green-400 to-green-200/20 from-30% to-60% animate-rotate-border rounded-2xl p-px"
|
||||
>
|
||||
<div class="p-10 rounded-2xl dark:bg-zinc-900 bg-zinc-50">
|
||||
<p class="text-white text-center font-semibold mt-8">
|
||||
This is the final result
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Conclusion
|
||||
|
||||
I hope this guide has helped you understand how to create an animated border with Tailwind CSS and that you can implement it in your projects. Experiment with gradients and animations to get unique effects! 🎨✨
|
||||
164
src/pages/blog/posts/markdown-tutorial.md
Normal file
164
src/pages/blog/posts/markdown-tutorial.md
Normal file
@@ -0,0 +1,164 @@
|
||||
---
|
||||
layout: /src/layouts/MarkdownPostLayout.astro
|
||||
title: The Complete Markdown Guide
|
||||
author: Fernando López
|
||||
description: "A comprehensive guide to Markdown syntax, covering everything from basic formatting to advanced features. Learn how to create headers, lists, emphasis, and more with this essential markup language for content creation."
|
||||
image:
|
||||
url: "/images/posts/markdown.webp"
|
||||
alt: "Example of animated borders with Tailwind CSS in a dark design, featuring a vibrant color gradient background."
|
||||
pubDate: 2025-04-05
|
||||
tags:
|
||||
[
|
||||
"documentation", "tutorial", "web-development", "content-creation", "writing"
|
||||
]
|
||||
languages: ["markdown", "html", "css"]
|
||||
---
|
||||
|
||||
Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world's most popular markup languages.
|
||||
|
||||
## Basic Syntax
|
||||
|
||||
### Headers
|
||||
|
||||
```markdown
|
||||
# H1
|
||||
## H2
|
||||
### H3
|
||||
#### H4
|
||||
##### H5
|
||||
###### H6
|
||||
```
|
||||
|
||||
### Emphasis
|
||||
|
||||
```markdown
|
||||
*Italic text* or _Italic text_
|
||||
**Bold text** or __Bold text__
|
||||
***Bold and italic*** or ___Bold and italic___
|
||||
~~Strikethrough~~
|
||||
```
|
||||
|
||||
### Lists
|
||||
|
||||
#### Unordered Lists
|
||||
```markdown
|
||||
- First item
|
||||
- Second item
|
||||
- Third item
|
||||
- Indented item
|
||||
- Another indented item
|
||||
```
|
||||
|
||||
#### Ordered Lists
|
||||
```markdown
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
1. Indented item
|
||||
2. Another indented item
|
||||
```
|
||||
|
||||
### Links and Images
|
||||
|
||||
```markdown
|
||||
[Link text](https://www.example.com)
|
||||
|
||||
```
|
||||
|
||||
### Code
|
||||
|
||||
#### Inline Code
|
||||
```markdown
|
||||
Use `code` in your text
|
||||
```
|
||||
|
||||
#### Code Blocks
|
||||
````markdown
|
||||
```javascript
|
||||
const hello = "world";
|
||||
console.log(hello);
|
||||
```
|
||||
````
|
||||
|
||||
### Blockquotes
|
||||
|
||||
```markdown
|
||||
> This is a blockquote
|
||||
>
|
||||
> It can span multiple lines
|
||||
```
|
||||
|
||||
### Horizontal Rules
|
||||
|
||||
```markdown
|
||||
---
|
||||
***
|
||||
___
|
||||
```
|
||||
|
||||
## Extended Syntax
|
||||
|
||||
### Tables
|
||||
|
||||
```markdown
|
||||
| Syntax | Description |
|
||||
| ----------- | ----------- |
|
||||
| Header | Title |
|
||||
| Paragraph | Text |
|
||||
```
|
||||
|
||||
### Task Lists
|
||||
|
||||
```markdown
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
```
|
||||
|
||||
### Footnotes
|
||||
|
||||
```markdown
|
||||
Here's a sentence with a footnote. [^1]
|
||||
|
||||
[^1]: This is the footnote.
|
||||
```
|
||||
|
||||
### Emoji
|
||||
|
||||
```markdown
|
||||
:smile: :heart: :rocket:
|
||||
```
|
||||
|
||||
### Highlight
|
||||
|
||||
```markdown
|
||||
==highlighted text==
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Keep it Simple**: Markdown is meant to be easy to read and write.
|
||||
2. **Use Consistent Formatting**: Stick to one style for similar elements.
|
||||
3. **Add Whitespace**: Use blank lines to separate different sections.
|
||||
4. **Use Headers Properly**: Start with H1 and use lower levels for subsections.
|
||||
5. **Escape Special Characters**: Use backslash to escape special characters.
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- Forgetting to add spaces after headers
|
||||
- Not properly indenting nested lists
|
||||
- Mixing different list markers
|
||||
- Not escaping special characters when needed
|
||||
|
||||
## Tools and Resources
|
||||
|
||||
- [Markdown Guide](https://www.markdownguide.org/)
|
||||
- [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
- [Dillinger](https://dillinger.io/) - Online Markdown Editor
|
||||
- [Markdown Preview](https://markdownlivepreview.com/) - Live Preview Tool
|
||||
|
||||
## Conclusion
|
||||
|
||||
Markdown is a powerful tool for creating well-formatted documents quickly and efficiently. Whether you're writing documentation, taking notes, or creating content for the web, Markdown provides a simple yet effective way to structure your text.
|
||||
|
||||
Remember: The best way to learn Markdown is to practice! Try creating your own documents and experiment with different syntax elements.
|
||||
197
src/pages/blog/posts/readme-neonmint.md
Normal file
197
src/pages/blog/posts/readme-neonmint.md
Normal file
@@ -0,0 +1,197 @@
|
||||
---
|
||||
layout: /src/layouts/MarkdownPostLayout.astro
|
||||
title: NeonMint Template Documentation
|
||||
author: Fernando López
|
||||
description: "NeonMint is a modern, minimalist template crafted for developers and digital creatives. Its dark-themed layout with mint green highlights delivers a sleek, elegant, and functional visual experience—perfect for portfolios, dashboards, or tech landing pages."
|
||||
image:
|
||||
url: "/images/projects/neonmint.webp"
|
||||
alt: "Screenshot of NeonMint, a modern and minimalist web template built with Astro and TailwindCSS. It displays various sections such as blog, portfolio, work experience, and Markdown guide, in both light and dark modes with mint green accents."
|
||||
pubDate: 2025-04-04
|
||||
tags:
|
||||
[
|
||||
"documentation", "portfolio", "web-development", "astro", "tailwindcss"
|
||||
]
|
||||
languages: ["astro", "javascript", "tailwind", "markdown"]
|
||||
---
|
||||
|
||||
## 🎯 Overview
|
||||
|
||||
**NeonMint** is a minimalist and modern template designed for developers and digital creatives. Its dark-toned aesthetic with mint green accents offers a clean, elegant, and functional visual experience, ideal for portfolios, dashboards, or tech landing pages.
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
```bash
|
||||
└── 📁NeonMint
|
||||
└── 📁public
|
||||
├── android-chrome-192x192.png
|
||||
├── android-chrome-512x512.png
|
||||
├── apple-touch-icon.png
|
||||
├── favicon-16x16.png
|
||||
├── favicon-32x32.png
|
||||
├── favicon.ico
|
||||
└── 📁images
|
||||
├── 📁posts # Post images
|
||||
└── 📁projects # Project images
|
||||
└── site.webmanifest # PWA configuration file
|
||||
└── 📁src
|
||||
├── 📁components # Reusable UI components
|
||||
│ ├── 📁blog # Blog components
|
||||
│ ├── 📁layout # Layout components
|
||||
│ ├── 📁portfolio # Portfolio components
|
||||
│ └── 📁ui # UI components
|
||||
├── 📁icons # Icons (.svg)
|
||||
├── 📁layouts # Site layouts
|
||||
│ ├── Layout.astro # Main application layout
|
||||
│ ├── MarkdownAbout.astro # About-me page layout
|
||||
│ ├── MarkdownPostLayout.astro # Posts page layout
|
||||
│ └── ProjectLayout.astro # Projects page layout
|
||||
├── 📁pages # Site pages
|
||||
│ ├── about-me.md # About-me page
|
||||
│ ├── 📁blog
|
||||
│ │ ├── all-posts.astro # All posts page
|
||||
│ │ ├── index.astro # Blog home page
|
||||
│ │ ├── 📁posts # Blog posts
|
||||
│ │ ├── 📁tags # Blog tags
|
||||
│ │ └── 📁techs # Blog technologies
|
||||
│ ├── index.astro # Home page
|
||||
│ ├── 📁portfolio
|
||||
│ │ └── 📁projects # Portfolio projects
|
||||
│ ├── robots.txt.ts # robots.txt configuration
|
||||
│ └── rss.xml.js # RSS configuration
|
||||
├── 📁scripts
|
||||
│ └── menu.js # Menu script
|
||||
├── 📁styles
|
||||
│ └── global.css # Global styles
|
||||
└── 📁utils
|
||||
└── languages.ts # Technology tools configuration
|
||||
├── .gitignore
|
||||
├── astro.config.mjs
|
||||
├── package-lock.json
|
||||
├── package.json
|
||||
├── README.md
|
||||
└── tsconfig.json
|
||||
```
|
||||
|
||||
## 🛠️ Technology Stack
|
||||
|
||||
- **Framework**: Astro v5.4.2
|
||||
- **UI Library**: Preact v10.26.2
|
||||
- **Styling**: TailwindCSS v4.0.8
|
||||
- **Icons**: astro-icon v1.1.5
|
||||
- **Syntax Highlighting**: PrismJS v1.30.0
|
||||
- **Animations**: tailwindcss-animated v2.0.0
|
||||
- **Analytics**: @vercel/speed-insights v1.2.0
|
||||
|
||||
## ✨ Key Features
|
||||
|
||||
1. **🚀 Performance Optimized**
|
||||
- Static site generation
|
||||
- Partial hydration with Preact
|
||||
- Optimized images and assets
|
||||
|
||||
2. **💻 Modern Development Experience**
|
||||
- TypeScript support
|
||||
- Hot module replacement
|
||||
- ESLint integration
|
||||
|
||||
3. **🔍 SEO & Analytics**
|
||||
- Built-in sitemap generation
|
||||
- RSS feed support
|
||||
- Vercel Speed Insights
|
||||
|
||||
4. **🎨 Styling & UI**
|
||||
- TailwindCSS for utility-first styling
|
||||
- Animated components
|
||||
- Responsive design
|
||||
- Dark mode support
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
1. **📦 Installation**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
2. **⚡ Development**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. **🏗️ Build**
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
4. **👀 Preview**
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## ⚙️ Configuration
|
||||
|
||||
The project is configured through several key files:
|
||||
|
||||
- `astro.config.mjs`: Main Astro configuration
|
||||
- `tailwind.config.js`: TailwindCSS configuration
|
||||
- `tsconfig.json`: TypeScript configuration
|
||||
|
||||
## 🎨 Customization
|
||||
|
||||
### 📄 Adding New Pages
|
||||
|
||||
Create new `.astro` files in the `src/pages` directory. The file name will determine the route.
|
||||
|
||||
### 🔧 Adding New Languages or Technologies
|
||||
|
||||
To incorporate a new programming language or technological tool into the site's capsules, follow these steps:
|
||||
|
||||
1. **🖼️ Add the SVG icon**: Place the SVG file of the language or tool in the `src/icons` folder.
|
||||
|
||||
> **💡 Recommendation**: For SVG icons, I recommend using [SVGL](https://svgl.app/), an excellent library of high-quality vectors that offers optimized icons for most popular languages and technologies.
|
||||
|
||||
2. **📝 Register the language**: Open the `utils/languages.ts` file and add a new entry to the languages object following this format:
|
||||
|
||||
```typescript
|
||||
html: {
|
||||
name: "HTML 5",
|
||||
iconName: "html",
|
||||
},
|
||||
```
|
||||
|
||||
Where:
|
||||
- `html`: Is the unique identifier for the language
|
||||
- `name`: Is the name that will be displayed visibly in the interface
|
||||
- `iconName`: Is the name of the SVG file without the extension (must match exactly with the file name in `src/icons`)
|
||||
|
||||
Once these steps are completed, the new language or technology will be available for use in the site's capsules. You can select it when creating or editing projects or posts, and the corresponding icon will be displayed correctly in the interface.
|
||||
|
||||
If you encounter any issues during this process, try restarting the development server. In some cases, changes to configuration files or static resources require a restart to be detected correctly.
|
||||
|
||||
To verify that the new language has been added correctly, check the list of available technologies in the user interface after restarting the server.
|
||||
|
||||
### 🎨 Styling
|
||||
|
||||
- Use TailwindCSS classes for styling
|
||||
- Add custom styles in `src/styles/global.css`
|
||||
|
||||
### 🧩 Components
|
||||
|
||||
- Create reusable components in `src/components`
|
||||
- Import icons using `astro-icon`
|
||||
|
||||
## 🚀 Deployment
|
||||
|
||||
The site is configured for deployment on Vercel, but can be deployed to any static hosting service.
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
1. Fork the repository
|
||||
2. Create a feature branch
|
||||
3. Commit your changes
|
||||
4. Push to the branch
|
||||
5. Create a Pull Request
|
||||
|
||||
## 📄 License
|
||||
|
||||
This project is licensed under the MIT License - see the LICENSE file for details.
|
||||
|
||||
41
src/pages/blog/tags/[tag].astro
Normal file
41
src/pages/blog/tags/[tag].astro
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
import Layout from '../../../layouts/Layout.astro';
|
||||
import BlogPost from '../../../components/blog/BlogPost.astro';
|
||||
import Heading from '../../../components/ui/Heading.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const allPosts: any[] = await Astro.glob("../posts/*.md");
|
||||
|
||||
const uniqueTags: string[] = [
|
||||
...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat()),
|
||||
];
|
||||
|
||||
return uniqueTags.map((tag) => {
|
||||
const filteredPosts = allPosts.filter((post) =>
|
||||
post.frontmatter.tags.includes(tag),
|
||||
);
|
||||
return {
|
||||
params: { tag },
|
||||
props: { posts: filteredPosts },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const { tag } = Astro.params;
|
||||
const { posts } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout pageTitle={tag} >
|
||||
<section class="py-8">
|
||||
<div class="flex flex-col gap-8 max-w-4xl mx-auto">
|
||||
<Heading text="Posts about" textGradient={tag}/>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<BlogPost url={post.url} title={post.frontmatter.title} date={post.frontmatter.pubDate } tags={post.frontmatter.tags } languages={post.frontmatter.languages } image={post.frontmatter.image } />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Layout>
|
||||
|
||||
19
src/pages/blog/tags/index.astro
Normal file
19
src/pages/blog/tags/index.astro
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import Tags from "../../../components/blog/Tags.astro";
|
||||
import Heading from "../../../components/ui/Heading.astro";
|
||||
|
||||
const pageTitle = "Tags";
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<Layout pageTitle={pageTitle} >
|
||||
<section class="py-8">
|
||||
<div class="flex flex-col gap-8 max-w-3xl mx-auto">
|
||||
<Heading text="Tags" />
|
||||
<Tags variant="vertical" />
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
55
src/pages/blog/techs/[category].astro
Normal file
55
src/pages/blog/techs/[category].astro
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import BlogPost from "../../../components/blog/BlogPost.astro";
|
||||
import Heading from "../../../components/ui/Heading.astro";
|
||||
import type { MarkdownInstance } from 'astro';
|
||||
|
||||
interface Frontmatter {
|
||||
languages: string[];
|
||||
title: string;
|
||||
pubDate: string;
|
||||
tags: string[];
|
||||
image: string;
|
||||
}
|
||||
export async function getStaticPaths(): Promise<Array<{params: {category: string}, props: {posts: MarkdownInstance<Frontmatter>[]}}>>{
|
||||
const allPosts: MarkdownInstance<Frontmatter>[] = await Astro.glob<Frontmatter>("../posts/*.md");
|
||||
|
||||
const uniqueTags: string[] = [
|
||||
...new Set(allPosts.map((post: MarkdownInstance<Frontmatter>) => post.frontmatter.languages).flat()),
|
||||
];
|
||||
|
||||
return uniqueTags.map((category) => {
|
||||
const filteredPosts = allPosts.filter((post) =>
|
||||
post.frontmatter.languages.includes(category)
|
||||
);
|
||||
return {
|
||||
params: { category },
|
||||
props: { posts: filteredPosts },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const { category } = Astro.params;
|
||||
const { posts } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout pageTitle={category} >
|
||||
<section class="py-8">
|
||||
<div class="flex flex-col gap-8 max-w-4xl mx-auto">
|
||||
<Heading text="Posts about" textGradient={category} />
|
||||
|
||||
{
|
||||
posts.map((post) => (
|
||||
<BlogPost
|
||||
url={post.url}
|
||||
title={post.frontmatter.title}
|
||||
date={post.frontmatter.pubDate}
|
||||
tags={post.frontmatter.tags}
|
||||
languages={post.frontmatter.languages}
|
||||
image={post.frontmatter.image}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
20
src/pages/blog/techs/index.astro
Normal file
20
src/pages/blog/techs/index.astro
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import Languages from "../../../components/blog/Languages.astro";
|
||||
import Heading from "../../../components/ui/Heading.astro";
|
||||
|
||||
const pageTitle = "Languages";
|
||||
const allPosts = await Astro.glob("../posts/*.md");
|
||||
const languages = [
|
||||
...new Set(allPosts.map((post) => post.frontmatter.languages).flat()),
|
||||
];
|
||||
---
|
||||
|
||||
<Layout pageTitle={pageTitle} >
|
||||
<section class="py-8">
|
||||
<div class="flex flex-col gap-8 max-w-3xl mx-auto">
|
||||
<Heading text="Technologies" />
|
||||
<Languages variant="vertical" />
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
66
src/pages/index.astro
Normal file
66
src/pages/index.astro
Normal file
@@ -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>
|
||||
43
src/pages/portfolio/projects/neonmint.md
Normal file
43
src/pages/portfolio/projects/neonmint.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
layout: /src/layouts/ProjectLayout.astro
|
||||
title: 'NeonMint'
|
||||
pubDate: 2025-04-05
|
||||
description: 'NeonMint is a modern, minimalist template crafted for developers and digital creatives.'
|
||||
languages: ["astro", "tailwind", "cloudflare", "javascript","vercel"]
|
||||
image:
|
||||
url: "/images/projects/neonmint.webp"
|
||||
alt: "Thumbnail of Astro arches."
|
||||
---
|
||||
|
||||
**NeonMint** is a modern, minimalist web template created for developers, designers, and digital creatives. This project aims to offer an elegant and functional visual experience, combining a dark-toned aesthetic with mint green accents to highlight content without distractions.
|
||||
|
||||
Developed with **Astro** and styled with **TailwindCSS**, NeonMint focuses on speed, modularity, and a component-centered architecture.
|
||||
|
||||
## 🧩 Features
|
||||
|
||||
- Responsive and minimalist design
|
||||
- Dark mode aesthetic with mint green accents
|
||||
- Clean and reusable UI components
|
||||
- Ideal for portfolios, dashboards or tech landing pages
|
||||
- Modern typography and clear visual hierarchy
|
||||
- Developed with **Astro**
|
||||
- Styled with **TailwindCSS**
|
||||
|
||||
## 💡 Technologies used
|
||||
|
||||
- Astro
|
||||
- TailwindCSS
|
||||
- HTML5
|
||||
- JavaScript
|
||||
|
||||
|
||||
## 🌐 Demo
|
||||
|
||||
👉 [View live demo](https://github.com/EFEELE/NeonMint)
|
||||
|
||||
## 🎯 Objective
|
||||
|
||||
The purpose of NeonMint is to combine style and functionality in a clean interface that enhances content without overwhelming the user. It's an exercise in design and development focused on visual detail and user experience.
|
||||
|
||||
|
||||
🚀 *Developed by EFEELE.*
|
||||
15
src/pages/robots.txt.ts
Normal file
15
src/pages/robots.txt.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
const getRobotsTxt = (sitemapURL: URL) => `
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: ${sitemapURL.href}
|
||||
|
||||
|
||||
`;
|
||||
|
||||
export const GET: APIRoute = ({ site }) => {
|
||||
const sitemapURL = new URL('sitemap-index.xml', site);
|
||||
return new Response(getRobotsTxt(sitemapURL));
|
||||
};
|
||||
11
src/pages/rss.xml.js
Normal file
11
src/pages/rss.xml.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import rss, { pagesGlobToRssItems } from '@astrojs/rss';
|
||||
|
||||
export async function GET(context) {
|
||||
return rss({
|
||||
title: 'Web Development and Technology Blog | Fernando López | EFEELE',
|
||||
description: 'Welcome to my blog, where I share my passion for frontend development, web design, and the latest technology trends.',
|
||||
site: context.site,
|
||||
items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
|
||||
customData: `<language>es</language>`,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user