🚀 Portfolio - M. Abu Amar Al Badawi

Software Engineer passionate about Mobile Development & Full-Stack Solutions

✨ Overview

A modern, responsive portfolio showcasing my journey as a Software Engineer specializing in Mobile Development with Flutter, React, and Full-Stack technologies.

🌟 Live Demo: abuamar.site

🛠️ Tech Stack

• Frontend: Vue.js 3 + TypeScript + Composition API
• Database: MongoDB Atlas
• Backend API: Separate Express.js project (backend.abuamar.site)
• Styling: Tailwind CSS v4 with Dracula Theme
• Build Tool: Vite
• Icons: Heroicons
• Deployment: Vercel (Frontend) + Vercel (Backend API)

🚀 Quick Start

Development Setup

# Clone & install
git clone https://github.com/abuamar142/portfolio.git
cd portfolio
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your backend API URL

# Start frontend development
npm run dev

Development Commands

# Start frontend development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# For development with local backend (optional)
npm run api-server  # Start local API server
npm run dev:full    # Start both API server and frontend

# Start only API server
npm run api-server

# Start both API server and frontend
npm run dev:full

# Test MongoDB connection (for development only)
npm run test-mongo

🚀 Deployment

Production Architecture

Frontend (Vue.js) → Backend API → MongoDB Atlas
    Vercel           Vercel       Cloud Database

Environment Variables for Production

# Vercel Environment Variables
VITE_BACKEND_URL=https://www.backend.abuamar.site

Deploy to Vercel

1. Fork this repository
2. Connect to Vercel
3. Add environment variable: VITE_BACKEND_URL=https://www.backend.abuamar.site
4. Deploy automatically

🎨 Features

• 🌙 Dracula Theme - Beautiful dark theme with purple accents
• 📱 Fully Responsive - Perfect on all devices
• ⚡ Fast & Optimized - Built with Vite for optimal performance
• 🎯 TypeScript - Full type safety
• 🎨 Smooth Animations - Engaging user experience
• 🔄 Real-time Data - Content managed via separate backend API

# Start development

npm run dev

# Build for production

npm run build

🎨 Features

• 🌙 Dracula Theme - Beautiful dark theme with purple accents
• 📱 Fully Responsive - Perfect on all devices
• ⚡ Fast & Optimized - Built with Vite for optimal performance
• 🎯 TypeScript - Full type safety
• 🎨 Smooth Animations - Engaging user experience

📁 Structure

src/
├── components/
│ ├── layout/ # Header, Footer
│ ├── sections/ # Hero, About, Experience, Projects, Skills, Contact
│ └── ui/ # Reusable components
├── data/ # Portfolio content
├── types/ # TypeScript definitions
└── assets/ # Styles & static files

�‍💻 About Me

Software Engineer | Mobile Developer | Full-Stack Enthusiast

🎓 Informatika Student at Universitas Jenderal Achmad Yani Yogyakarta 💼 Full-Stack Software Engineer Intern at Refactory 🏆 Bangkit Academy 2024 Graduate (Mobile Development)

🛠️ Core Skills

• Mobile: Flutter, Dart, Kotlin, Android
• Web: React, Vue.js, TypeScript, JavaScript
• Backend: Supabase, REST APIs
• Tools: Git, GitHub Actions, Linux

📞 Connect

• 📧 Email: abuamar.albadawi@gmail.com
• 🌐 GitHub: @abuamar142
• 📍 Location: Bantul, Indonesia

---

Built with ❤️ using Vue.js & TypeScript

⭐ Star this repo if you like it!

```