Refactor Section component to accept title prop and update usage in About, Experience, Projects, and Skills components for improved consistency and semantic structure
This commit is contained in:
1 parent
332ea17e6f
commit
c53b645ed4
5 files changed
+13
-17
No files matched your search
@@ -5,10 +5,7 @@ const { aboutMe } = Astro.props;
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Section id="about-me">
|
<Section id="about-me" title="Acerca de mí">
|
||||||
<h3 class="text-3xl font-bold text-gray-100 text-center mb-10">
|
|
||||||
Acerca de mí
|
|
||||||
</h3>
|
|
||||||
{aboutMe.split("\n").map((line: string) => (
|
{aboutMe.split("\n").map((line: string) => (
|
||||||
line.trim() !== "" ? (
|
line.trim() !== "" ? (
|
||||||
<p class="text-gray-300 mb-4 text-wrap">{line}</p>
|
<p class="text-gray-300 mb-4 text-wrap">{line}</p>
|
||||||
|
|||||||
@@ -11,10 +11,7 @@ interface ExperienceProps {
|
|||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<Section id="experience">
|
<Section id="experience" title="Experiencia">
|
||||||
<h3 class="text-3xl font-bold text-white text-center mb-10">
|
|
||||||
Experiencia
|
|
||||||
</h3>
|
|
||||||
<!-- Contenedor del timeline -->
|
<!-- Contenedor del timeline -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="absolute top-8 bottom-8 w-px">
|
<div class="absolute top-8 bottom-8 w-px">
|
||||||
|
|||||||
@@ -18,10 +18,7 @@ interface ProjectProps {
|
|||||||
repoUrl: string;
|
repoUrl: string;
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
<Section id="projects">
|
<Section id="projects" title="Proyectos">
|
||||||
<h3 class="text-3xl font-bold text-white text-center mb-10">
|
|
||||||
Proyectos
|
|
||||||
</h3>
|
|
||||||
<div class="space-y-12">
|
<div class="space-y-12">
|
||||||
{
|
{
|
||||||
projects.map((project: ProjectProps) => (
|
projects.map((project: ProjectProps) => (
|
||||||
|
|||||||
@@ -10,10 +10,7 @@ interface SkillProps {
|
|||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<Section id="skills">
|
<Section id="skills" title="Habilidades">
|
||||||
<h3 class="text-3xl font-bold text-white text-center mb-10">
|
|
||||||
Habilidades
|
|
||||||
</h3>
|
|
||||||
<div class="flex flex-wrap gap-6 justify-center md:justify-start">
|
<div class="flex flex-wrap gap-6 justify-center md:justify-start">
|
||||||
{skills.map((skill:SkillProps) => (
|
{skills.map((skill:SkillProps) => (
|
||||||
<div class="flex flex-col items-center justify-center w-24 md:w-28 p-6">
|
<div class="flex flex-col items-center justify-center w-24 md:w-28 p-6">
|
||||||
|
|||||||
@@ -1,3 +1,11 @@
|
|||||||
<section class="container mx-auto md:max-w-7xl md:px-6 py-12 md:py-20" id={Astro.props.id}>
|
---
|
||||||
|
const { id, title } = Astro.props;
|
||||||
|
---
|
||||||
|
<section class="container mx-auto md:max-w-7xl md:px-6 py-12 md:py-20" id={id}>
|
||||||
|
{title && (
|
||||||
|
<h3 class="text-3xl font-bold text-gray-100 text-center mb-10">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
)}
|
||||||
<slot />
|
<slot />
|
||||||
</section>
|
</section>
|
||||||
Reference in new issue
Block a user