Skip to content

Commit 9f2f0dc

Browse files
msa-iqbalmsa-iqbal
committed
new username.github.io
0 parents  commit 9f2f0dc

38 files changed

Lines changed: 6121 additions & 0 deletions

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 Muhammad S.A. Iqbal
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Muhammad S.A. Iqbal - Personal Portfolio Website
2+
3+
A modern, responsive personal portfolio website showcasing my skills, projects, and professional experience.
4+
5+
## 🌟 Features
6+
7+
- **Responsive Design**: Looks great on all devices, from mobile to desktop
8+
- **Dark/Light Mode**: Toggle between dark and light themes
9+
- **Interactive UI**: Smooth animations and transitions for a better user experience
10+
- **Particle Background**: Dynamic animated background with interactive particles
11+
- **Portfolio Showcase**: Filterable portfolio items to showcase different types of work
12+
- **Resume Page**: Detailed professional experience, skills, and education
13+
- **Contact Information**: Easy ways to get in touch
14+
- **About Me Section**: Personal information and interests
15+
16+
## 🛠️ Technologies Used
17+
18+
- HTML5
19+
- CSS3 (with custom properties and animations)
20+
- JavaScript (ES6+)
21+
- Font Awesome for icons
22+
- Google Fonts
23+
- Canvas API for background animations
24+
25+
## 📱 Pages
26+
27+
1. **Home**: Introduction and social media links
28+
2. **About**: Personal information, interests, and toolkit
29+
3. **Projects**: Showcase of projects with filtering capability
30+
4. **Resume**: Professional experience, education, skills, and certificates
31+
5. **Contact**: Contact information
32+
6. **404**: Custom error page
33+
7. **Updating**: Showcase of "Work in Progress"
34+
35+
## 📝 License
36+
37+
This project is licensed under the MIT License - see the LICENSE file for details.
38+
39+
## 🙏 Acknowledgments
40+
41+
- Font Awesome for the icons
42+
- Google Fonts for the typography
43+
- Inspiration from various portfolio websites across the web
44+
45+
## 📧 Contact
46+
47+
Feel free to reach out if you have any questions or suggestions:
48+
49+
- Email: <[email protected]>
50+
- Website: [www.yourwebsite.com](https://www.yourwebsite.com)
51+
- LinkedIn: [Muhammad S.A. Iqbal](https://www.linkedin.com/in/yourname)
52+
53+
---
54+
55+
Made with ❤️ by Muhammad S.A. Iqbal

‎assets/css/404.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
.error-container {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
text-align: center;
7+
min-height: 70vh;
8+
padding: var(--space-xl);
9+
}
10+
11+
.error-code {
12+
font-size: 10rem;
13+
font-weight: 800;
14+
line-height: 1;
15+
margin-bottom: var(--space-lg);
16+
background: linear-gradient(to right, var(--gradient-1), var(--gradient-6));
17+
-webkit-background-clip: text;
18+
background-clip: text;
19+
color: transparent;
20+
animation: textGradient 5s linear infinite;
21+
background-size: 400% 400%;
22+
}
23+
24+
@keyframes textGradient {
25+
0% {
26+
background-position: 0% 50%;
27+
}
28+
50% {
29+
background-position: 100% 50%;
30+
}
31+
100% {
32+
background-position: 0% 50%;
33+
}
34+
}
35+
36+
.error-title {
37+
font-size: var(--text-3xl);
38+
margin-bottom: var(--space-md);
39+
}
40+
41+
.error-message {
42+
font-size: var(--text-lg);
43+
color: var(--dark-text-secondary);
44+
max-width: 600px;
45+
margin-bottom: var(--space-2xl);
46+
}
47+
48+
.error-illustration {
49+
position: relative;
50+
width: 200px;
51+
height: 200px;
52+
margin-bottom: var(--space-sm);
53+
}
54+
55+
.error-illustration i {
56+
font-size: 8rem;
57+
color: var(--accent-primary);
58+
animation: float 3s ease-in-out infinite;
59+
}
60+
61+
.error-btn {
62+
display: inline-flex;
63+
align-items: center;
64+
gap: var(--space-sm);
65+
padding: var(--space-md) var(--space-xl);
66+
background: linear-gradient(to right, var(--gradient-1), var(--gradient-3));
67+
color: white;
68+
border-radius: var(--radius-md);
69+
font-weight: 600;
70+
transition: all var(--transition-normal);
71+
}
72+
73+
.error-btn:hover {
74+
transform: translateY(-5px);
75+
box-shadow: var(--shadow-lg);
76+
background: linear-gradient(to right, var(--gradient-3), var(--gradient-1));
77+
}
78+
79+
.particles {
80+
position: absolute;
81+
width: 100%;
82+
height: 100%;
83+
top: 0;
84+
left: 0;
85+
overflow: hidden;
86+
z-index: -1;
87+
}
88+
89+
.particle {
90+
position: absolute;
91+
border-radius: 50%;
92+
opacity: 0.6;
93+
animation-name: float, fadeIn;
94+
animation-timing-function: ease-in-out;
95+
animation-iteration-count: infinite;
96+
animation-fill-mode: both;
97+
}

0 commit comments

Comments
 (0)