https://github.com/juanpablodiaz/jpdiaz

My Portfolio Site
https://github.com/juanpablodiaz/jpdiaz

astro tailwind

Last synced: about 9 hours ago
JSON representation

My Portfolio Site

• Host: GitHub
• URL: https://github.com/juanpablodiaz/jpdiaz
• Owner: JuanPabloDiaz
• Created: 2023-10-17T19:46:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-05T22:32:53.000Z (8 days ago)
• Last Synced: 2025-02-05T23:22:31.865Z (8 days ago)
• Topics: astro, tailwind
• Language: Astro
• Homepage: https://jpdiaz.dev
• Size: 5.31 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


 

    

  

# [JpDiaz](https://jpdiaz.dev)

Welcome to my personal website! I'm Juan Pablo Díaz, a Front-End Developer and UI/UX Designer. I'm passionate about creating beautiful and intuitive user interfaces, and I'm always looking for new opportunities to learn and grow.












  

  


  

  

  

  

  





[![jpdiaz](https://img.shields.io/badge/View%20Demo-000?style=for-the-badge&logo=Google-Chrome&logoColor=white)](https://jpdiaz.dev/)

[![repo](https://img.shields.io/badge/View%20Code-000?style=for-the-badge&logo=GitHub&logoColor=white)](https://stackblitz.com/github.com/JuanPabloDiaz/jpdiaz)



### Desktop View 🖥️



### iPad view 📱



### Mobile view 📱



### Lighthouse Score 🚀



Check out the [Lighthouse Report](https://performance-jpdiaz.netlify.app/) for more details.

### Built With 🔑

![Astro](https://img.shields.io/badge/Astro-000.svg?style=for-the-badge&logo=Astro&logoColor=white)

![Tailwind-CSS](https://img.shields.io/badge/Tailwind%20CSS-06B6D4.svg?style=for-the-badge&logo=Tailwind-CSS&logoColor=white)

Features:

- ✅ Dark and light color mode

- ✅ Mobile-first responsive layout

- ✅ Hero section with bio

- ✅ About section

- ✅ Portfolio collection with GitHub API

- ✅ Open Source projects section

- ✅ [Contact form](https://web3forms.com/)

- ✅ Professional resume page with download option

- ✅ Additional projects page

- ✅ [Tailwind CSS](https://tailwindcss.com/)

- ✅ [Navbar with burger button](https://github.com/surjithctly/astro-navbar)

- ✅ Image Optimization

- ✅ SEO-friendly with canonical URLs and OpenGraph data

- ✅ Sitemap support

- ✅ Markdown support

- ✅ Google Analytics metrics

- ✅ [GitHub Actions for automated tasks](https://github.com/JuanPabloDiaz/jpdiaz/actions)

## Useful Commands 🧰

- Run before Deploy: `$ npm run build`

- Run Prettier: `$ npm run format`

- Run Lighthouse in local: `$ npm run lighthouse`

## Get started 🛠️

To get started with [jpdiaz](https://jpdiaz.dev), simply clone the repository and follow the setup instructions. You'll be up and running in no time!

### Setup 📋

1. Clone the repo

2. Install dependencies

   ```sh

   npm install

   ```

3. Start the development server

   ```sh

   npm run dev

   ```

4. Open [http://localhost:5173/](http://localhost:5173/) with your browser to see the result.

## Contribution 🤝

I welcome contributions to the jpdiaz collection repo! Feel free to fork the repository and submit pull requests with your improvements. -->

## License 📜

[jpdiaz](https://jpdiaz.dev) is licensed under the MIT License.

I hope you enjoy using the jpdiaz repo!

## Acknowledgments 📚

Resources list that I find helpful and would like to give credit to.

- [Astro](https://astro.build/)

- [AstroShip](https://astroship.web3templates.com/)

- [Tailwind CSS](https://tailwindcss.com/)

- [Vercel](https://vercel.com/)

- [GitHub API](https://docs.github.com/en/rest)

- [Web3Forms](https://web3forms.com/)

- [Dev-skill-icons](https://github.com/lelouchfr/skill-icons) 

- I used [Astro Portfolio Template - Created by veranikabarel](https://github.com/veranikabarel/astro-portfolio) as a starting point for this project.

(👆 Top 👆)