Personal developer portfolio and showcase for Gustavo Herrera (@arcanoix), Senior Fullstack Developer with 15+ years of experience. Built with Astro, React, TypeScript, and Tailwind CSS for speed, accessibility, and clean component architecture.
- Modern Architecture: Fast static site generation powered by Astro 5 islands architecture.
- Interactive Components: Client-side interactive sections built with React 19, Tailwind CSS, and Radix UI primitives.
- Dark / Light Mode: Instant theme switching with local storage persistence and system preference fallback.
- Projects Showcase: Curated selection of real-world client platforms, open-source tools, and web applications.
- Experience & Skills Timeline: Chronological track record in software engineering, leadership, and core technical skills.
- Dockerized Environment: Ready-to-use Docker and Docker Compose configuration for quick local setup.
- Astro 5 - Web framework for content-driven websites
- React 19 - UI library for dynamic client components
- TypeScript - Strict typing and maintainability
- Tailwind CSS - Utility-first styling and theme tokens
- Radix UI - Unstyled, accessible component primitives
- Lucide Icons & React Icons - Vector icon packs
- Locomotive Scroll - Smooth scrolling
- Prettier with
prettier-plugin-astro- Code formatting - Docker & Docker Compose - Containerized development
-
Clone the repository:
git clone https://github.com/arcanoix/gustavoherrera.dev.git cd gustavoherrera.dev -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Navigate to http://localhost:4321 in your browser.
Run the development environment in a container without installing local Node dependencies:
docker compose upThe app will be available at http://localhost:4321 with hot reloading enabled.
| Command | Description |
|---|---|
npm run dev |
Starts the Astro development server at localhost:4321 |
npm run build |
Builds the static site for production into the dist/ directory |
npm run preview |
Previews the production build locally |
npm run prettier |
Formats all files across the repository |
├── images/ # Static showcase assets & covers
├── public/ # Public assets (icons, thumbnails, media)
├── src/
│ ├── components/ # UI components (ProjectSection, SkillsSection, Timeline, etc.)
│ ├── content/ # Data collections (projects.ts, skills.ts, experiences.ts, posts.ts)
│ ├── layouts/ # Astro layout templates
│ ├── lib/ # Shared utilities
│ ├── pages/ # Astro file-based routes (index.astro)
│ └── styles/ # Global styles and Tailwind imports
├── astro.config.mjs # Astro configuration with React and Tailwind
├── compose.yaml # Docker Compose configuration
├── Dockerfile.dev # Dockerfile for development
├── package.json # Dependencies and scripts
└── tailwind.config.mjs # Tailwind CSS configuration
Gustavo Herrera
- GitHub: @arcanoix
- LinkedIn: in/thavoo
- Freelancer: freelancer.com/u/gustavoherrera84
- X (Twitter): @arcanoix_
- WhatsApp: +58 412-1367894
- Email: gustavoh.2312@gmail.com
This project is licensed under the Apache-2.0 License.