Jonathan Albarrán | Full-Stack Developer Portfolio

Welcome to my personal portfolio project! This repository contains the source code for my professional portfolio website, designed to showcase my software development journey, personal projects, and technical expertise.

🚀 Overview

This project is a high-performance, modern portfolio built with Astro for optimal speed and SEO. It features a clean, professional aesthetic designed to highlight my work in software development and beyond.

Key Features

• Lightning Fast Performance: Utilizing Astro's zero-JS-by-default architecture.
• Responsive Design: Fully optimized for mobile, tablet, and desktop viewing.
• Dynamic Project Showcase: Easy-to-manage project categories and detailed descriptions.
• SEO Optimized: Semantic HTML and meta tags for better search engine visibility.
• Modern UI/UX: Clean, dark-mode focused aesthetic for a premium developer feel.

Tech Stack

• Framework: Astro (Static Site Generation)
• Styling: Tailwind CSS & Vanilla CSS
• Deployment: GitHub Pages via GitHub Actions
• Icons & Assets: SVGs for crisp, resolution-independent visuals

🧠 What I Learned

Implementing this portfolio was a great opportunity to refine my skills and explore new technologies from a senior perspective. Key takeaways include:

• Senior-Level Architecture & Best Practices: Focused on creating a highly maintainable and scalable codebase by implementing a robust Internationalization (i18n) system, applying advanced SEO techniques (semantic HTML, structured data), and strictly following DRY (Don't Repeat Yourself) principles for maximum code reusability.
• Modern SSG Frameworks (Astro): Deepened my expertise in Astro to build a high-performance static site, leveraging its zero-JS-by-default architecture and component-driven model to achieve superior speed and SEO.
• DevOps & CI/CD Automation: Architected a seamless delivery pipeline using GitHub Actions to automate the build and deployment process to GitHub Pages, ensuring a reliable and efficient release cycle.
• Utility-First Styling & Asset Optimization: Leveraged Tailwind CSS for rapid and maintainable UI development. Additionally, refined my skills in Custom SVG Manipulation, directly editing SVG files to ensure crisp, resolution-independent visuals and optimized performance.

🛠 Project Structure

• /src/pages: Contains the main routes and pages of the portfolio.
• /src/components: Reusable UI components (Sidebar, Project cards, etc.).
• /src/layouts: Common page layouts for consistency across the site.
• /public/assets: Static assets including images, icons, and global styles.

🌟 Acknowledgments

This project was built using the Codefolio template developed by Daniel United. I have customized and extended it to fit my personal brand and specific project showcasing needs.

⚙️ Development

To run this project locally:

1. Clone the repository:

   git clone https://github.com/jalbarran/puertofolio.git
   cd puertofolio

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build for production:

   npm run build

🚢 Deployment

This portfolio is automatically deployed to GitHub Pages using GitHub Actions. Any changes pushed to the main branch trigger a new build and deployment process.

The deployment configuration can be found in .github/workflows/deploy.yml.

📬 Contact

I'm always open to collaborating on interesting projects or discussing new opportunities. Feel free to reach out!

• Email: jaal1388@gmail.com
• Linkedin: Linkedin
• Website: puertofolio

---

Licensed under the MIT License.