https://github.com/azharuddinmalik/azharuddinmalik.github.io
A modern, responsive portfolio website showcasing my skills, projects, and experience as a Frontend Developer. Built with clean HTML5, CSS3, and JavaScript with a focus on user experience and accessibility.
https://github.com/azharuddinmalik/azharuddinmalik.github.io
css3 gemini html5 javascript portfolio-website
Last synced: 5 months ago
JSON representation
A modern, responsive portfolio website showcasing my skills, projects, and experience as a Frontend Developer. Built with clean HTML5, CSS3, and JavaScript with a focus on user experience and accessibility.
- Host: GitHub
- URL: https://github.com/azharuddinmalik/azharuddinmalik.github.io
- Owner: AzharuddinMalik
- Created: 2025-05-21T23:08:42.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-26T22:36:47.000Z (11 months ago)
- Last Synced: 2025-07-27T01:26:00.605Z (11 months ago)
- Topics: css3, gemini, html5, javascript, portfolio-website
- Language: CSS
- Homepage: https://azharuddinmalik.github.io/
- Size: 4.71 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Azharuddin Malik - Portfolio Website
A modern, responsive portfolio website showcasing my skills, projects, and experience as a Frontend Developer. Built with clean HTML5, CSS3, and JavaScript with a focus on user experience and accessibility.
⭐ **If you found this portfolio helpful, please consider giving it a star!**
## 🌟 Features
### ✨ Modern Design
- **Responsive Layout**: Optimized for all devices (desktop, tablet, mobile)
- **Dark/Light Theme Toggle**: User-preferred theme switching
- **Smooth Animations**: CSS transitions and scroll effects
- **Clean Typography**: Professional and readable font hierarchy
### 🧭 Navigation
- **Sticky Header**: Always accessible navigation bar
- **Mobile Menu**: Hamburger menu for mobile devices
- **Smooth Scrolling**: Seamless section transitions
- **Active Link Highlighting**: Visual feedback for current section
### 📱 Sections
#### 🏠 Home
- Hero section with animated blob background
- Professional introduction
- Social media links (LinkedIn, GitHub, Email)
- Call-to-action buttons
#### 👤 About
- Personal introduction and background
- Downloadable CV/Resume
- Key statistics (projects, research papers)
- Professional photo
#### 🛠️ Skills
- **Interactive Accordion**: Expandable skill categories
- **Progress Bars**: Visual skill level indicators
- **Three Categories**:
- Frontend Development (HTML, CSS, JavaScript, Tailwind, Angular)
- Backend & Databases (Java, Spring Boot, Node.js, SQL, MongoDB)
- Functional Skills (Data Analysis, Visualization, ETL, Modeling)
#### 🎓 Qualifications
- **Tabbed Interface**: Switch between Education and Certifications
- **Timeline Design**: Chronological display of achievements
- **Progress Indicators**: Visual representation of grades/scores
- **Detailed Information**: Courses, achievements, and descriptions
#### 💼 Portfolio
- **Project Carousel**: Swiper.js powered slider
- **Featured Projects**:
- Urban Planning App (Mapping tool with Leaflet.js & React)
- LiveOCR (Flask-based OCR application)
- Short.lyt (URL shortening service in Java)
- Malik Art Decor (Business website)
- **Live Demo Links**: Direct access to deployed projects
#### 📧 Contact
- **Contact Form**: Formspree integration for email handling
- **Contact Cards**: Location, email, and LinkedIn information
- **Form Validation**: Required field validation
- **Responsive Grid**: Optimal layout across devices
#### 🦶 Footer
- **Four-Column Layout**: Branding, links, social media, CTA
- **Social Links**: Multiple ways to connect
- **Back to Top**: Quick navigation to header
## 🚀 Technologies Used
### Frontend
- **HTML5**: Semantic markup and accessibility
- **CSS3**: Modern styling with custom properties
- **JavaScript**: Interactive functionality and DOM manipulation
### Libraries & Frameworks
- **Swiper.js**: Touch-enabled carousel/slider
- **Unicons**: Consistent icon system
- **Formspree**: Contact form backend service
### Tools & Services
- **GitHub**: Version control and code hosting
- **Formspree**: Form submission handling
- **External Hosting**: Various platforms for project deployment
## 📁 Project Structure
```
portfolio/
├── index.html # Main HTML file
├── assets/
│ ├── css/
│ │ ├── styles.css # Main stylesheet
│ │ └── swiper-bundle.min.css
│ ├── js/
│ │ ├── main.js # Main JavaScript functionality
│ │ └── swiper-bundle.min.js
│ ├── img/
│ │ ├── Profile.png # Profile images
│ │ ├── about.jpg
│ │ ├── portfolio1.jpg # Project screenshots
│ │ ├── portfolio2.jpg
│ │ ├── portfolio3.jpg
│ │ └── ExteriorTwinTowers1.webp
│ └── pdf/
│ └── Resume_Azharuddin_Final.pdf
└── README.md
```
## 🎯 Key Features Implementation
### Theme Switching
- CSS custom properties for color management
- JavaScript toggle functionality
- LocalStorage for user preference persistence
### Responsive Design
- Mobile-first approach
- Flexible grid systems
- Optimized images and media queries
### Performance Optimization
- Minified CSS and JavaScript libraries
- Optimized images (WebP format support)
- Efficient DOM manipulation
### Accessibility
- Semantic HTML structure
- ARIA labels and roles
- Keyboard navigation support
- Screen reader friendly
## 🛠️ Setup & Installation
1. **Clone the Repository**
```bash
git clone https://github.com/AzharuddinMalik/portfolio.git
cd portfolio
```
2. **Open in Browser**
- Simply open `index.html` in your preferred web browser
- Or use a local server for development:
```bash
# Using Python
python -m http.server 8000
# Using Node.js
npx serve .
```
3. **Customization**
- Update personal information in `index.html`
- Replace images in `assets/img/`
- Modify styles in `assets/css/styles.css`
- Update resume file in `assets/pdf/`
## 📧 Contact Form Setup
The contact form uses Formspree for backend handling:
1. Create a Formspree account at [formspree.io](https://formspree.io)
2. Replace the form action URL in the HTML:
```html
```
## 🌐 Live Demo
Visit the live portfolio: [Your Portfolio URL]
## 📱 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
## 🤝 Contributing
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](LICENSE) file for details.
## 👤 Author
**Azharuddin Malik**
- 🎓 Computer Science Student at Chandigarh University
- 💼 Frontend Developer
- 📧 Email: therockstar6237@gmail.com
- 💼 LinkedIn: [azharuddin-malik](https://linkedin.com/in/azharuddin-malik)
- 🐙 GitHub: [AzharuddinMalik](https://github.com/AzharuddinMalik)
## 🙏 Acknowledgments
- **Unicons** for the beautiful icon library
- **Swiper.js** for the smooth carousel functionality
- **Formspree** for contact form backend services
- **Inspiration** from modern portfolio designs and best practices
---