aferrer/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update styles in Experience, Hero, and Projects components for improved visual consistency and accessibility

Browse Source
This commit is contained in:
Asis ferrer
2025-11-01 12:06:53 +00:00
parent c53b645ed4
commit fc818ac157
3 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Experience.astro
+3 -3
View File
@@ -18,7 +18,7 @@ interface ExperienceProps {
<!-- Línea vertical única -->
<div class="absolute left-2.25 inset-0 w-px bg-sky-800"></div>
<!-- Bola que "baja" con el scroll -->
<div class="sticky top-1/2 w-5 h-5 rounded-full bg-sky-400 border-4 border-gray-100 shadow-lg translate-y-[-50%] transition-all duration-300 z-10"></div>
<div class="sticky top-1/2 w-5 h-5 rounded-full bg-sky-500 border-4 border-gray-300 shadow-lg translate-y-[-50%] transition-all duration-300 z-10"></div>
</div>
<!-- Contenedor de experiencias con padding para que la línea cubra bien -->
<div class="space-y-12 pt-8 pb-8">
@@ -30,11 +30,11 @@ interface ExperienceProps {
<h4 class="text-xl font-bold text-gray-200 mb-2 md:mb-0 md:max-w-1/2 text-pretty">
{exp.role}
</h4>
<span class="text-sm text-sky-400 mb-4 block md:mb-0">
<span class="text-sm text-sky-500 mb-4 block md:mb-0">
📅 {exp.duration}
</span>
</div>
<h5 class="text-md font-medium text-gray-300 mb-4">
<h5 class="text-md font-medium text-indigo-500 mb-4">
{exp.company}
</h5>
<p class="text-gray-300 text-wrap">
src/components/Hero.astro
+4 -4
View File
@@ -9,18 +9,18 @@ const { name, title, bio, github, linkedin } = Astro.props;
<img
src="/avatar.webp"
alt={`${name} Avatar`}
class="w-32 h-32 md:w-48 md:h-48 rounded-full mx-auto border-4 border-slate-600 md:border-slate-300 relative z-20"
class="w-32 h-32 md:w-48 md:h-48 rounded-full mx-auto border-4 border-gray-500 md:border-gray-300 relative z-20"
/>
<div class="absolute -inset-1 rounded-full blur-md bg-gradient-to-br from-slate-500 via-cyan-500 to-indigo-500 z-10 glow"></div>
<div class="absolute -inset-1 rounded-full blur-md bg-gradient-to-br from-gray-500 via-cyan-500 to-indigo-500 z-10 glow"></div>
</div>
<div class="flex-1 min-w-0">
<h1
class="text-4xl md:text-6xl font-extrabold tracking-tight bg-gradient-to-r from-slate-300 to-slate-500 bg-clip-text text-transparent mb-4 text-balance"
class="text-4xl md:text-6xl font-extrabold tracking-tight bg-gradient-to-r from-gray-300 to-gray-500 bg-clip-text text-transparent mb-4 text-balance"
>
{name}
</h1>
<h2
class="text-2xl md:text-3xl font-semibold tracking-tight bg-gradient-to-r from-cyan-400 to-indigo-400 bg-clip-text text-transparent mb-6"
class="text-2xl md:text-3xl font-semibold tracking-tight bg-gradient-to-r from-cyan-500 to-indigo-500 bg-clip-text text-transparent mb-6"
>
{title}
</h2>
src/components/Projects.astro
+2 -2
View File
@@ -27,10 +27,10 @@ interface ProjectProps {
<img src={project.imageUrl} alt={project.title} class="hidden md:block md:w-48 object-cover" />
)}
<div class="p-8 flex-1">
<h4 class="text-xl font-bold text-white mb-2">
<h4 class="text-xl font-bold text-gray-200 mb-2">
{project.title}
</h4>
<p class="text-gray-400 mb-4">{project.description}</p>
<p class="text-gray-300 text-wrap mb-4">{project.description}</p>
<div class="flex flex-wrap gap-2 mb-6">
{project.tags.map((tag: ProjectTag) => (
<span class="inline-flex items-center px-3 py-1 bg-gray-800 text-gray-300 text-sm rounded-full">