Kevin Arauz - Portfolio

A modern, responsive portfolio website showcasing my skills, projects, and experience as a Software Engineer and FullStack Developer. Built with Astro, TypeScript, and Tailwind CSS.

🚀 Technologies Used

• Framework: Astro
• Styling: Tailwind CSS
• Language: TypeScript
• Deployment: Netlify
• Icons: Lucide Icons

👨‍💻 About Me

Hi there! I'm Kevin Arauz, a passionate Software Engineer and FullStack Developer currently pursuing a degree in Information Systems Engineering. This portfolio showcases my journey in software development, featuring projects that demonstrate my skills in various technologies and frameworks.

📋 Table of Contents

• 🚀 Technologies Used
• 👨‍💻 About Me
• 🎯 Features
• 🌐 Demo
• 🚀 Getting Started
• 📁 Project Structure
• 🤝 Contributing
• 📄 License
• 📞 Contact

🎯 Features

• 🎨 Responsive Design: Seamless experience across all devices and screen sizes
• 🌙 Dark/Light Mode: Toggle between dark and light themes
• 📱 Mobile-First Approach: Optimized for mobile devices with progressive enhancement
• ⚡ Fast Loading: Built with Astro for optimal performance
• 🎯 Project Showcase: Curated selection of projects with detailed overviews
• 📊 Skills Section: Interactive display of technical skills and proficiencies
• 🎓 Training & Certifications: Comprehensive list of completed courses and certifications
• 📬 Contact Form: Easy way to get in touch directly through the site
• 🔍 SEO Optimized: Proper meta tags and structured data for search engines

🌐 Demo

🔗 Live Site: arauzdev.netlify.app

🚀 Getting Started

To run this project locally:

Prerequisites

• Node.js (v22.12.0 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/kjarj54/Portafolio.git
cd Portafolio

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:4321

Build for Production

npm run build

Drizzle Commands

Use these commands to manage your database schema with Drizzle Kit:

# Generate SQL migrations from your schema
npx drizzle-kit generate

# Apply migrations to the database
npx drizzle-kit migrate

# Push schema changes directly (without migration files)
npx drizzle-kit push

# Open Drizzle Studio
npx drizzle-kit studio

The built site will be in the dist/ folder.

📁 Project Structure

/
├── public/
│   └── robots.txt
├── src/
│   ├── middleware.ts
│   ├── assets/
│   ├── components/
│   │   ├── LanguajePicker.astro
│   │   ├── SEO.astro
│   │   ├── dashboard/
│   │   ├── landingpage/
│   │   │   ├── About.astro
│   │   │   ├── Contact.astro
│   │   │   ├── Expericence.astro
│   │   │   ├── Footer.astro
│   │   │   ├── Header.astro
│   │   │   ├── Hero.astro
│   │   │   ├── Projects.astro
│   │   │   └── SocialSideBar.astro
│   │   ├── login/
│   │   │   ├── BackgroundEffects.astro
│   │   │   ├── LoginCard.astro
│   │   │   └── LoginForm.astro
│   │   └── ui/
│   │       ├── Button.astro
│   │       └── Input.astro
│   ├── content/
│   │   ├── en/
│   │   │   └── hello-world.md
│   │   └── es/
│   │       └── hola-mundo.md
│   ├── db/
│   │   ├── index.ts
│   │   ├── loader.ts
│   │   └── schema.ts
│   ├── i18n/
│   │   ├── ui.ts
│   │   └── utils.ts
│   ├── layouts/
│   │   ├── BlogPost.astro
│   │   └── Layout.astro
│   ├── lib/
│   │   ├── auth-client.ts
│   │   └── auth.ts
│   ├── loaders/
│   │   └── blogApiLoader.ts
│   ├── pages/
│   │   ├── index.astro
│   │   ├── [lang]/
│   │   │   ├── index.astro
│   │   │   ├── blog/
│   │   │   │   ├── [slug].astro
│   │   │   │   └── index.astro
│   │   │   ├── login/
│   │   │   │   └── index.astro
│   │   │   └── projects/
│   │   │       └── index.astro
│   │   └── api/
│   │       ├── hello.ts
│   │       └── auth/
│   │           └── [...all].ts
│   ├── styles/
│   │   └── global.css
│   └── content.config.ts
├── env.d.ts
├── LICENSE
├── README.md
├── astro.config.mjs
├── drizzle.config.ts
├── tsconfig.json
└── package.json

This layout follows Astro conventions:

• src/pages defines routes (required by Astro).
• src/components, src/layouts, and src/styles follow common Astro structure.
• public stores static files served as-is.
• src/content.config.ts defines content collections (using a custom DB loader in this project).

🤝 Contributing

While this is a personal portfolio, I'm open to suggestions and improvements! If you'd like to contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Note: This portfolio is open source and available for learning purposes. Feel free to use it as inspiration for your own portfolio, but please give appropriate credit and don't claim it as your own work.

📞 Contact

Feel free to reach out to me through any of these channels:

• 📧 Email: kjarj14@gmail.com
• 💼 LinkedIn: Connect with me
• 🐱 GitHub: kjarj54
• 🌐 Portfolio: arauzdev.netlify.app

---

⭐ If you found this project helpful, please give it a star!

Thank you for visiting my portfolio! 👾