Building kznava.dev: A Modern Developer Portfolio

From template to personalized portfolio

Building a personal website that truly represents your identity as a developer requires more than just filling in content. This post explores the journey of transforming astro-erudite, an opinionated static blogging template, into a personalized portfolio that reflects my development philosophy and aesthetic preferences.

Why astro-erudite?

When selecting a foundation for this website, several key factors influenced the decision to use astro-erudite:

Technical excellence: Built on Astro, the template leverages modern web development practices including static site generation, optimized asset handling, and TypeScript support. The use of Tailwind CSS provides utility-first styling flexibility, while shadcn/ui components ensure consistent, accessible UI patterns.

Content-first architecture: The template’s MDX-based content system with Expressive Code integration makes technical writing seamless. Support for features like syntax highlighting, callouts, and rich media embeds aligns perfectly with the needs of a developer-focused blog.

Extensibility: Rather than being a rigid framework, astro-erudite provides a solid foundation that encourages customization. The codebase is well-organized, documented, and designed to be modified.

Core customizations and enhancements

The transformation from template to personalized portfolio involved strategic modifications across multiple dimensions: design system, component architecture, and user experience enhancements.

Establishing a cohesive design language

The most significant visual change involved implementing a comprehensive blue theme throughout the site. This wasn’t simply changing a few color values, but rather establishing a complete design system using OKLCH color space for better perceptual uniformity:

1
:root {
2
  --primary: oklch(0.50 0.20 260);
3
  --ring: oklch(0.60 0.20 260);
4
  --border: oklch(0.88 0.025 260);
5
}
6

7
[data-theme='dark'] {
8
  --primary: oklch(0.70 0.20 260);
9
  --ring: oklch(0.65 0.20 260);
10
  --border: oklch(0.25 0.04 260);
11
}

Beyond static colors, the site features dynamic background animations that create visual interest without overwhelming content. Animated gradient blobs and floating elements use reduced opacity in light mode to maintain readability while providing subtle movement.

Component-driven development

Several reusable components were developed to maintain consistency and reduce code duplication:

TechSection component

Rather than manually writing HTML for each technology stack section, this component accepts a title, technology array with optional icons, and styling options:

1
---
2
interface Tech {
3
  name: string
4
  icon?: string
5
}
6

7
interface Props {
8
  title: string
9
  technologies: Tech[]
10
  centered?: boolean
11
  className?: string
12
}
13

14
const { title, technologies, centered = false, className = '' } = Astro.props
15
---
16

17
<div class={`group cursor-default rounded-2xl border border-[#0066ff]/20
18
  bg-gradient-to-br from-[#0066ff]/5 to-transparent p-6
19
  transition-all duration-300 hover:border-[#0066ff]/40
20
  hover:shadow-xl ${className}`}>
21
  <h2 class={`mb-4 text-xl font-medium ${centered ? 'text-center' : ''}`}>
22
    {title}
23
  </h2>
24
  <div class={`flex flex-wrap gap-2 ${centered ? 'justify-center' : ''}`}>
25
    {technologies.map((tech) => (
26
      <Badge variant="muted">
27
        {tech.icon && <Icon name={tech.icon} class="mr-1 size-3" />}
28
        {tech.name}
29
      </Badge>
30
    ))}
31
  </div>
32
</div>

This component is used throughout the site for displaying technology stacks:

1
<TechSection
2
  title="Programming Languages & Technologies"
3
  technologies={[
4
    { name: 'C# / .NET', icon: 'lucide:code-xml' },
5
    { name: 'VB.NET', icon: 'lucide:code' },
6
    { name: 'JavaScript', icon: 'lucide:braces' },
7
    { name: 'T-SQL', icon: 'lucide:database' },
8
  ]}
9
/>

WorkExperience component

Professional experience is displayed using a timeline-style component that features gradient icons, company details, and technology badges:

1
---
2
interface Props {
3
  title: string
4
  company: string
5
  period: string
6
  description: string
7
  technologies: string[]
8
  icon: string
9
}
10

11
const { title, company, period, description, technologies, icon } = Astro.props
12
---
13

14
<div class="relative pb-8 last:pb-0">
15
  <!-- Timeline line -->
16
  <div class="absolute left-0 top-0 h-full w-0.5
17
    bg-[#0066ff]/20 dark:bg-[#338aff]/20"></div>
18

19
  <div class="relative flex items-start gap-4">
20
    <!-- Icon circle -->
21
    <div class="flex size-10 shrink-0 items-center justify-center
22
      rounded-full bg-gradient-to-br from-[#0066ff] to-[#338aff]
23
      shadow-lg shadow-[#0066ff]/30 z-10">
24
      <Icon name={icon} class="size-5 text-white" />
25
    </div>
26

27
    <div class="flex-1 pt-1">
28
      <div class="mb-1 flex flex-col sm:flex-row
29
        sm:items-center sm:justify-between gap-1">
30
        <h3 class="text-lg font-bold">{title}</h3>
31
        <span class="text-muted-foreground text-sm">{period}</span>
32
      </div>
33
      <p class="text-[#0066ff] dark:text-[#338aff]
34
        text-sm font-medium mb-2">{company}</p>
35
      <p class="text-muted-foreground text-sm leading-relaxed mb-3">
36
        {description}
37
      </p>
38
      <div class="flex flex-wrap gap-2">
39
        {technologies.map((tech) => (
40
          <Badge variant="muted" className="text-xs">{tech}</Badge>
41
        ))}
42
      </div>
43
    </div>
44
  </div>
45
</div>

Usage on homepage:

1
<WorkExperience
2
  title="Information System Manager"
3
  company="Multitel Pagliero S.p.A."
4
  period="Feb 2022 - Present"
5
  description="Leading digital transformation initiatives..."
6
  technologies={['ERP', 'System Architecture', 'IT Security']}
7
  icon="lucide:building-2"
8
/>

Enhanced card components

Both project and blog cards were redesigned with blue gradient backgrounds and glowing borders. Here’s the BlogCard implementation:

1
<article class="group relative overflow-hidden rounded-2xl
2
  border border-[#0066ff]/20
3
  bg-gradient-to-br from-[#0066ff]/5 via-transparent to-[#338aff]/5
4
  p-6 transition-all duration-300
5
  hover:border-[#0066ff]/40 hover:shadow-lg hover:shadow-[#0066ff]/10
6
  dark:border-[#338aff]/30 dark:from-[#0066ff]/10 dark:to-[#338aff]/10
7
  dark:hover:border-[#338aff]/50 dark:hover:shadow-[#338aff]/20">
8

9
  <Link href={`/${entry.collection}/${entry.id}`} class="flex flex-col gap-6">
10
    {entry.data.image && (
11
      <div class="overflow-hidden rounded-xl border border-[#0066ff]/20">
12
        <Image
13
          src={entry.data.image}
14
          alt={entry.data.title}
15
          width={1200}
16
          height={630}
17
          quality="high"
18
          class="aspect-video w-full object-cover
19
            transition-transform duration-300 group-hover:scale-105"
20
        />
21
      </div>
22
    )}
23

24
    <div class="flex items-start gap-4">
25
      <div class="flex size-12 shrink-0 items-center justify-center
26
        rounded-xl bg-gradient-to-br from-[#0066ff] to-[#338aff]
27
        shadow-lg shadow-[#0066ff]/30">
28
        <Icon name="lucide:file-text" class="size-6 text-white" />
29
      </div>
30

31
      <div class="flex-1">
32
        <h3 class="mb-2 text-xl font-bold
33
          group-hover:text-[#0066ff] transition-colors
34
          dark:group-hover:text-[#338aff]">
35
          {entry.data.title}
36
        </h3>
37
        <p class="text-muted-foreground text-base leading-relaxed">
38
          {entry.data.description}
39
        </p>
40
      </div>
41
    </div>
42
  </Link>
43
</article>

Multiple UX enhancements were implemented to improve site usability:

Reading progress indicator

A fixed progress bar at the top of blog posts provides visual feedback about reading completion:

1
<div
2
  id="reading-progress-bar"
3
  class="fixed top-0 left-0 h-1 w-0
4
    bg-gradient-to-r from-[#0066ff] to-[#338aff]
5
    shadow-lg shadow-[#0066ff]/30 z-[9999]"
6
></div>
7

8
<script>
9
  document.addEventListener('astro:page-load', () => {
10
    const progressBar = document.getElementById('reading-progress-bar')
11
    if (!progressBar) return
12

13
    const updateProgressBar = () => {
14
      const scrollHeight = document.documentElement.scrollHeight -
15
                          document.documentElement.clientHeight
16
      const scrolled = document.documentElement.scrollTop
17
      const progress = (scrolled / scrollHeight) * 100
18
      progressBar.style.width = `${progress}%`
19
    }
20

21
    window.addEventListener('scroll', updateProgressBar, { passive: true })
22
    updateProgressBar()
23
  })
24
</script>

Back to top button

A small button appears after scrolling 300 pixels, with smooth scroll-to-top functionality:

1
<Button
2
  variant="outline"
3
  size="icon"
4
  className="fixed right-8 bottom-8 z-50 hidden
5
    size-10 rounded-full border-[#0066ff]/30
6
    bg-gradient-to-br from-[#0066ff]/10 to-transparent
7
    shadow-lg shadow-[#0066ff]/20"
8
  id="scroll-to-top"
9
>
10
  <Icon name="lucide:arrow-up" class="size-5 text-[#0066ff]" />
11
</Button>
12

13
<script>
14
  document.addEventListener('astro:page-load', () => {
15
    const button = document.getElementById('scroll-to-top')
16
    if (!button) return
17

18
    const toggleVisibility = () => {
19
      if (window.scrollY > 300) {
20
        button.classList.remove('hidden')
21
      } else {
22
        button.classList.add('hidden')
23
      }
24
    }
25

26
    button.addEventListener('click', () => {
27
      window.scrollTo({ top: 0, behavior: 'smooth' })
28
    })
29

30
    window.addEventListener('scroll', toggleVisibility, { passive: true })
31
    toggleVisibility()
32
  })
33
</script>

The header includes a shining text effect on the site title:

1
<Link href="/" class="flex items-center gap-3 group">
2
  <Image
3
    src={logo}
4
    alt="Logo"
5
    class="size-6 transition-all group-hover:scale-110
6
      drop-shadow-[0_0_8px_rgba(0,102,255,0.4)]
7
      dark:drop-shadow-[0_0_12px_rgba(51,138,255,0.6)]"
8
  />
9
  <span class="text-lg font-bold
10
    bg-gradient-to-r from-[#0066ff] via-[#338aff] to-[#0066ff]
11
    bg-clip-text text-transparent
12
    bg-[length:200%_100%] animate-shine">
13
    {SITE.title}
14
  </span>
15
</Link>

The shine animation is defined in the global CSS:

1
@keyframes shine {
2
  to {
3
    background-position: 200% center;
4
  }
5
}
6

7
.animate-shine {
8
  animation: shine 3s linear infinite;
9
}

Custom 404 page

Error states maintain the site’s aesthetic:

1
<section class="flex min-h-[60vh] flex-col items-center
2
  justify-center gap-y-8 py-16 text-center">
3
  <!-- Large 404 with blur effect -->
4
  <div class="relative">
5
    <div class="absolute inset-0 blur-3xl opacity-30">
6
      <div class="bg-gradient-to-r from-[#0066ff] to-[#338aff]
7
        h-full w-full"></div>
8
    </div>
9
    <h1 class="relative text-9xl font-bold
10
      bg-gradient-to-r from-[#0066ff] to-[#338aff]
11
      bg-clip-text text-transparent">
12
      404
13
    </h1>
14
  </div>
15

16
  <!-- Icon -->
17
  <div class="flex size-20 items-center justify-center
18
    rounded-full bg-gradient-to-br from-[#0066ff] to-[#338aff]
19
    shadow-lg shadow-[#0066ff]/30">
20
    <Icon name="lucide:search-x" class="size-10 text-white" />
21
  </div>
22

23
  <div class="max-w-md space-y-3">
24
    <h2 class="text-3xl font-bold">Page Not Found</h2>
25
    <p class="text-muted-foreground text-lg">
26
      The page you're looking for doesn't exist or has been moved.
27
    </p>
28
  </div>
29
</section>

Content architecture improvements

The about page was restructured to provide a comprehensive professional profile:

Personal introduction: A detailed narrative replaces generic placeholder text, explaining the journey from smartphone repair technician to Information System Manager over nine years of professional development.

Categorized skills: Technologies are organized into logical categories (Programming Languages, Frontend Knowledge, Backend & Cloud Services, Tools & Platforms) using the TechSection component with appropriate icons.

Featured content: The page showcases one featured project and one latest blog post, each occupying a full row for maximum visual impact.

Technical implementation details

Animation system

Sequential entrance animations create a polished first impression on the homepage. The global CSS defines multiple keyframe animations:

1
@keyframes fade-in {
2
  from { opacity: 0; }
3
  to { opacity: 1; }
4
}
5

6
@keyframes slide-up {
7
  from {
8
    opacity: 0;
9
    transform: translateY(10px);
10
  }
11
  to {
12
    opacity: 1;
13
    transform: translateY(0);
14
  }
15
}
16

17
@keyframes scale-in {
18
  from {
19
    opacity: 0;
20
    transform: scale(0.95);
21
  }
22
  to {
23
    opacity: 1;
24
    transform: scale(1);
25
  }
26
}
27

28
@keyframes pulse-subtle {
29
  0%, 100% { opacity: 1; }
30
  50% { opacity: 0.85; }
31
}

These animations are applied with utility classes:

1
.animate-fade-in {
2
  animation: fade-in 0.5s ease-out;
3
}
4

5
.animate-slide-up {
6
  animation: slide-up 0.5s ease-out;
7
}
8

9
.animate-scale-in {
10
  animation: scale-in 0.5s ease-out;
11
}
12

13
.animate-pulse-subtle {
14
  animation: pulse-subtle 3s ease-in-out infinite;
15
}
16

17
/* Staggered delays */
18
.animation-delay-100 {
19
  animation-delay: 100ms;
20
}
21

22
.animation-delay-200 {
23
  animation-delay: 200ms;
24
}
25

26
.animation-delay-300 {
27
  animation-delay: 300ms;
28
}

Homepage implementation with cascading animations:

1
<section class="py-16 text-center animate-fade-in">
2
  <div class="mb-6 flex justify-center animate-scale-in">
3
    <Image
4
      src={avatar}
5
      alt="kznava avatar"
6
      width={128}
7
      height={128}
8
      class="size-32 rounded-full object-cover
9
        shadow-lg shadow-[#0066ff]/40 animate-pulse-subtle"
10
    />
11
  </div>
12

13
  <h1 class="mb-2 bg-gradient-to-r from-[#0066ff] to-[#338aff]
14
    bg-clip-text text-5xl font-bold text-transparent
15
    animate-slide-up">
16
    kznava
17
  </h1>
18

19
  <p class="text-muted-foreground mb-4 text-sm
20
    animate-slide-up animation-delay-100">
21
    Juan Navarro
22
  </p>
23

24
  <p class="text-muted-foreground mb-6 text-xl
25
    animate-slide-up animation-delay-150">
26
    Software Developer & Gamer
27
  </p>
28

29
  <div class="flex justify-center gap-3
30
    animate-slide-up animation-delay-300">
31
    <!-- Quick action buttons -->
32
  </div>
33
</section>

Image optimization

All images leverage Astro’s built-in image optimization. The avatar is imported and rendered with explicit dimensions:

1
---
2
import { Image } from 'astro:assets'
3
import avatar from '../../public/static/avatar.jpg'
4
---
5

6
<Image
7
  src={avatar}
8
  alt="kznava avatar"
9
  width={128}
10
  height={128}
11
  class="size-32 rounded-full object-cover
12
    shadow-lg shadow-[#0066ff]/40
13
    ring-2 ring-[#0066ff]/20 dark:ring-[#338aff]/30"
14
/>

For blog and project cards, images are loaded at 1200x630 with high quality settings:

1
{entry.data.image && (
2
  <Image
3
    src={entry.data.image}
4
    alt={entry.data.title}
5
    width={1200}
6
    height={630}
7
    quality="high"
8
    class="aspect-video w-full object-cover
9
      transition-transform duration-300 group-hover:scale-105"
10
  />
11
)}

This ensures optimal loading performance while maintaining visual quality across different viewport sizes.

Responsive design patterns

The site employs mobile-first responsive design with careful attention to typography scales, spacing, and component layouts. Tech stack cards, work experience timelines, and content grids all adapt gracefully to different screen sizes.

Deployment and performance

The site is built as a static site, ensuring fast load times and excellent performance metrics. Astro’s partial hydration means only necessary JavaScript is shipped to the client, keeping bundle sizes minimal.

Future enhancements

While the current implementation achieves the core vision, several potential enhancements are being considered:

Integration with GitHub API to dynamically display repository statistics
Progressive Web App capabilities for offline access
Advanced search functionality across blog content

Conclusion

Building kznava.dev demonstrated how a well-architected template like astro-erudite can serve as an excellent foundation for creating a unique, personalized web presence. By focusing on thoughtful customization rather than wholesale replacement, the result maintains the template’s technical strengths while expressing individual style and requirements.

The key to successful template customization lies in understanding the underlying architecture, identifying extension points, and implementing changes that enhance rather than fight against the original design. This approach results in a maintainable codebase that can evolve over time while retaining its core identity.

For developers considering similar projects, astro-erudite offers an excellent starting point. Its combination of modern tooling, thoughtful defaults, and extensible architecture makes it ideal for those who want to focus on content and customization rather than foundational infrastructure.