Azhar Azziz - Portfolio Website

Modern, responsive portfolio website showcasing Laravel development expertise and digital innovation projects.

🌟 Overview

This is my personal portfolio website, built as a modern, responsive showcase of my professional work as a Laravel PHP developer. The site features a clean, elegant design with smooth animations and interactive elements, highlighting my experience in web application development, particularly within the Laravel ecosystem.

Live Website: azharazziz.github.io

✨ Features

🎨 Design & User Experience

• Modern Minimalist Design - Clean, professional aesthetic with teal accent colors
• Fully Responsive - Optimized for desktop, tablet, and mobile devices
• Smooth Animations - CSS animations and transitions for enhanced user experience
• Dark Theme Elements - Sophisticated dark sections with gradient backgrounds
• Interactive Components - Hover effects, smooth scrolling, and dynamic content

🔧 Technical Features

• Vanilla JavaScript - No framework dependencies for optimal performance
• CSS Grid & Flexbox - Modern layout techniques for responsive design
• CSS Custom Properties - Centralized theming and easy customization
• Font Awesome Integration - Professional iconography throughout the site
• Optimized Performance - Fast loading times and smooth interactions

📱 Responsive Design

• Mobile-First Approach - Designed for optimal mobile experience first
• Adaptive Navigation - Collapsible mobile menu with animated hamburger icon
• Flexible Grid System - Content adapts seamlessly across all screen sizes
• Touch-Friendly - All interactive elements optimized for touch devices

🏗️ Project Structure

azharazziz.github.io/
├── index.html              # Main HTML file with complete website structure
├── styles.css              # Comprehensive stylesheet with modern CSS
├── script.js               # JavaScript for interactivity and animations
├── placeholder-profile.svg # Profile image placeholder
└── README.md              # Project documentation

🎯 Sections

1. Hero Section

• Professional introduction with animated background elements
• Call-to-action buttons for contact and portfolio viewing
• Floating tech icons with Laravel, PHP, and database technologies

2. About Section

• Personal and professional background
• Core values and development philosophy
• Professional statistics and achievements
• Skills integration with real-world experience

3. Skills Section

• Laravel Ecosystem - Framework expertise, Livewire, PHP modern practices
• Database Management - MySQL, SQLite, optimization techniques
• Frontend Technologies - Tailwind CSS, Alpine.js, Vite integration
• Professional Tools - Git, GitHub, API development, package management

4. Projects Portfolio

• Featured Projects with live demos and source code links
• Project Categories - Laravel, React, Government, Healthcare, Open Source, FinTech
• Interactive Filtering - Dynamic project filtering by technology and category
• Detailed Project Cards - Technology stack, descriptions, and access links

5. Contact Section

• Professional contact information
• Social media and professional network links
• Contact form integration ready

🚀 Featured Projects

1. Lara Splade Quran (Featured)

• Modern Al-Qur'an digital application
• Tech Stack: Laravel Splade, Vue.js, MySQL, Tailwind CSS
• Live Demo: quran.azharazziz.my.id

2. Balai Labkesmas Magelang Website

• Official government website with integrated services
• Tech Stack: WordPress, PHP, MySQL, Custom Theme
• Live Site: labkesmasmagelang.go.id

3. Laravel Livewire Starterkit

• Modern Laravel starter template with flexible authentication
• Tech Stack: Laravel 11, Livewire 3, MySQL, Bootstrap
• Repository: GitHub

4. NIKAHFIX - Netflix Style Wedding

• Modern wedding invitation website with Netflix-style interface
• Tech Stack: React 18, Vite, TailwindCSS, Supabase
• Live Demo: azhar-fathin.vercel.app

5. Dynamic QRIS Generator

• Innovative solution for converting static QRIS to dynamic
• Tech Stack: Google Apps Script, JavaScript, QR Code API
• Repository: GitHub

6. WhatsApp Bulk Sender

• Modern bulk WhatsApp messaging application using ZAPIN API
• Tech Stack: Node.js, Express.js, JavaScript, ZAPIN API
• Live Demo: whatsapp-automate-sender.vercel.app
• Repository: GitHub

🛠️ Technologies Used

Frontend

• HTML5 - Semantic markup and modern structure
• CSS3 - Custom properties, Grid, Flexbox, animations
• JavaScript (ES6+) - Modern JavaScript features and DOM manipulation
• Font Awesome - Professional icon library

Styling & Design

• CSS Custom Properties - Centralized theming system
• CSS Grid & Flexbox - Modern layout techniques
• Responsive Design - Mobile-first approach
• CSS Animations - Smooth transitions and hover effects

Development Tools

• Git - Version control
• GitHub Pages - Hosting and deployment
• VS Code - Development environment

🚦 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Text editor (VS Code recommended)
• Basic knowledge of HTML, CSS, and JavaScript

Local Development

1. Clone the repository

   git clone https://github.com/azharazziz/azharazziz.github.io.git
   cd azharazziz.github.io

2. Open in browser

   # Simply open index.html in your preferred browser
   # Or use a local server for better development experience

3. Using Live Server (Recommended)

   # If you have Live Server extension in VS Code
   # Right-click on index.html and select "Open with Live Server"

Deployment

The site is automatically deployed via GitHub Pages. Any changes pushed to the master branch will be reflected on the live site.

🎨 Customization

Color Scheme

The website uses CSS custom properties for easy theming. Main colors can be modified in the :root section of styles.css:

:root {
    --primary-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    --secondary-gradient: linear-gradient(135deg, #14b8a6 0%, #10b981 100%);
    --text-primary: #1f2937;
    --text-accent: #0d9488;
    /* ... other variables */
}

Content Updates

• Personal Information: Update content in index.html
• Projects: Modify the projects section with your own work
• Skills: Update the skills section to reflect your expertise
• Social Links: Update contact information and social media links

Adding New Projects

To add a new project to the portfolio:

1. Copy an existing project card structure in index.html
2. Update the content, links, and technology tags
3. Add appropriate data-category attributes for filtering
4. Update the project filtering JavaScript if needed

📱 Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

🤝 Contributing

While this is a personal portfolio, suggestions and improvements are welcome:

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

📄 License

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

📞 Contact

Azhar Azziz

• Website: azharazziz.github.io
• GitHub: @azharazziz
• Email: Contact through website

🙏 Acknowledgments

• Font Awesome - For the beautiful icons
• Inter Font - For the clean typography
• Tailwind CSS - For design inspiration and utility classes
• Laravel Community - For continuous learning and inspiration

---

⭐ If you found this portfolio inspiring, please consider giving it a star!

Built with ❤️ by Azhar Azziz