The portfolio at leviek.dev is built on a carefully selected set of modern web technologies. Each dependency has a specific role: Astro handles static generation and routing, React powers interactive islands, Tailwind CSS v4 manages styling via a Vite plugin, and a combination of GSAP, OGL, and Motion One brings animations and WebGL effects to life. This page documents every package, its version, and its purpose in the project.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Emmanuel-Mtz-777/My-Personal-Portfolio/llms.txt
Use this file to discover all available pages before exploring further.
Production Dependencies
| Package | Version | Purpose |
|---|---|---|
astro | ^6.0.5 | Static site framework — handles routing, SSG, layouts, and i18n |
@astrojs/react | ^5.0.0 | React integration for Astro islands; enables .jsx components |
@tailwindcss/vite | ^4.1.18 | Tailwind CSS v4 integration via Vite plugin (no config file needed) |
gsap | ^3.14.2 | Animation library powering the logo loop and transitions |
@gsap/react | ^2.1.2 | GSAP React hooks (useGSAP) for imperative animations in React components |
ogl | ^1.0.11 | Lightweight WebGL library used for the particle background effect |
three | ^0.184.0 | Three.js 3D graphics library |
motion | ^12.27.0 | Motion One animation library for declarative UI animations |
react | ^19.2.3 | React 19 — UI component library used for interactive islands |
react-dom | ^19.2.3 | React DOM renderer, required alongside react |
react-icons | ^5.5.0 | Icon library providing SVG icons used throughout the UI |
sharp | ^0.34.5 | High-performance image optimization during Astro’s build step |
tw-animate-css | ^1.4.0 | Pre-built Tailwind CSS animation utilities (fade, slide, zoom, etc.) |
@types/react | ^19.2.8 | TypeScript type definitions for React |
@types/react-dom | ^19.2.3 | TypeScript type definitions for React DOM |
Development Dependencies
| Package | Version | Purpose |
|---|---|---|
tailwindcss | ^4.1.18 | Core Tailwind CSS v4 engine |
autoprefixer | ^10.4.23 | PostCSS plugin that adds vendor prefixes to CSS output |
postcss | ^8.5.6 | CSS transformation pipeline used alongside autoprefixer |
Why Astro?
Astro was chosen as the foundation of this portfolio for three key reasons: 1. Static site generation (SSG) by default. Astro generates pure HTML at build time, meaning every page is served as a fast, pre-rendered file. There is no server-side rendering overhead, and the output is trivially deployable to any CDN or static host. 2. Island architecture. Astro ships zero JavaScript by default. Interactive components — like theParticles.jsx WebGL background or the LogoLoop.jsx animated ticker — are explicitly hydrated on the client using directives such as client:load. This keeps the initial page load lightweight while still supporting rich interactivity where it matters.
3. Built-in i18n routing. Astro 6 includes first-class support for internationalized routing. With a single i18n block in astro.config.mjs, the portfolio serves Spanish at / (the default locale) and English at /en/, with no third-party routing library required.
Animation Stack
The project uses three animation libraries, each targeting a different use case:- GSAP (
gsap+@gsap/react) — Available for imperative timeline and scroll-trigger animations. The@gsap/reactpackage provides theuseGSAPhook for safe integration inside React’s lifecycle. - OGL (
ogl) — Powers theParticles.jsxWebGL background in the Hero section and skill cards. OGL provides a minimal WebGL abstraction (Renderer,Camera,Geometry,Program,Mesh) without the full weight of Three.js for this specific effect. - Motion (
motion) — The Motion One library is available for declarative CSS-based animations on UI elements.
LogoLoop.jsx component implements its own animation loop using native requestAnimationFrame and CSS transform: translate3d, without depending on GSAP, Motion, or any other animation library.
Image Pipeline
Astro’s<Image /> component from astro:assets is used throughout the project (e.g., in Header.astro for the logo, and in ProjectCard.astro for project screenshots). The sharp package runs automatically during astro build to compress and convert images, producing optimized WebP/AVIF output.