├── WIN_20241018_15_23_48_Pro.jpg ├── bbc22d58-fb50-412d-a67b-007e955a2d1f_removalai_preview.png ├── main.js ├── index.html └── style.css /WIN_20241018_15_23_48_Pro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/My-portfolio-1/HEAD/WIN_20241018_15_23_48_Pro.jpg -------------------------------------------------------------------------------- /bbc22d58-fb50-412d-a67b-007e955a2d1f_removalai_preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/My-portfolio-1/HEAD/bbc22d58-fb50-412d-a67b-007e955a2d1f_removalai_preview.png -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | //Toggling Menu 2 | const showMenu = (toggleId, navId) => { 3 | const toggle = document.getElementById(toggleId); 4 | const nav = document.getElementById(navId); 5 | 6 | if(toggle && nav) { 7 | toggle.addEventListener('click', () => { 8 | nav.classList.toggle('show'); 9 | }) 10 | } 11 | } 12 | 13 | showMenu('nav-toggle', 'nav-menu'); 14 | 15 | //Toggling Active Link 16 | const navLink = document.querySelectorAll('.nav-link'); 17 | 18 | function linkAction() { 19 | navLink.forEach(n => n.classList.remove('active')); 20 | this.classList.add('active'); 21 | 22 | const navMenu = document.getElementById('nav-menu'); 23 | navMenu.classList.remove('show'); 24 | } 25 | 26 | navLink.forEach(n => n.addEventListener('click', linkAction)); 27 | 28 | // Scroll Reveal 29 | 30 | const sr = ScrollReveal({ 31 | origin: 'top', 32 | distance: '80px', 33 | duration: 2000, 34 | reset: true 35 | }) 36 | 37 | sr.reveal('.home-title', {} ) 38 | sr.reveal('.button', {delay: 200} ) 39 | sr.reveal('.home-img', {delay: 400} ) 40 | sr.reveal('.home-social', {delay: 400,} ) 41 | 42 | sr.reveal('.about-img', {} ) 43 | sr.reveal('.about-subtitle', {delay: 200} ) 44 | sr.reveal('.about-text', {delay: 400} ) 45 | 46 | sr.reveal('.skills-subtitle', {delay: 100} ) 47 | sr.reveal('.skills-text', {delay: 150} ) 48 | sr.reveal('.skills-data', {interval: 200} ) 49 | sr.reveal('.skills-img', {delay: 400} ) 50 | 51 | sr.reveal('.work-img', {interval: 200} ) 52 | 53 | sr.reveal('.contact-input', {interval: 200} ) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Personal Portfolio Website 7 | 8 | 9 | 10 | 11 |
12 | 32 |
33 | 34 |
35 |
36 |
37 |

Hi,
I'm Muhammad Siddiq
Web Designer

38 | Contact 39 |
40 | 41 |
42 | 43 | 44 | 45 |
46 | 47 |
48 | image 49 |
50 |
51 | 52 |
53 |

About

54 | 55 |
56 |
57 | image 58 |
59 | 60 |
61 |

I'm Muhammad Siddiq

62 |

As a passionate web designer, I thrive on creating visually appealing and user-friendly websites. My journey in web design began with a fascination for how design can enhance user experience

63 |
64 |
65 |
66 | 67 |
68 |

Skills

69 | 70 |
71 |
72 |

Professional Skills

73 |

I love to think outside the box and bring unique ideas to life through design, I have proficiency in HTML, CSS, and JavaScript, that ensure that my designs are not only beautiful but also functional. I prioritize the needs and preferences of users, conducting research to understand their behaviors and preferences.

74 | 75 |
76 |
77 | 78 | HTML5 79 |
80 | 81 |
82 | 95% 83 |
84 | 85 |
86 |
87 | 88 |
89 |
90 | 91 | CSS3 92 |
93 | 94 |
95 | 85% 96 |
97 | 98 |
99 |
100 | 101 |
102 |
103 | 104 | JAVASCRIPT 105 |
106 | 107 |
108 | 65% 109 |
110 | 111 |
112 |
113 | 114 |
115 |
116 | 117 | UX/UI 118 |
119 | 120 |
121 | 85% 122 |
123 | 124 |
125 |
126 |
127 | 128 |
129 | image 130 |
131 |
132 |
133 | 134 |
135 |

Work

136 | 137 |
138 |
139 | image 140 |
141 | 142 |
143 | image 144 |
145 | 146 |
147 | image 148 |
149 | 150 |
151 | image 152 |
153 | 154 |
155 | image 156 |
157 | 158 |
159 | image 160 |
161 |
162 |
163 | 164 |
165 |

Contact

166 | 167 |
168 |
169 | 170 | 171 | 172 | 173 | 174 |
175 |
176 |
177 |
178 | 179 | 190 | 191 | 192 | 193 | 194 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | :root { 4 | --header-height: 3rem; 5 | --font-semi: 600; 6 | 7 | --first-color: #4070F4; 8 | --second-color: #0E2431; 9 | 10 | --body-font: 'Poppins', sans-serif; 11 | --big-font-size: 2rem; 12 | --h2-font-size: 1.25rem; 13 | --normal-font-size: .938rem; 14 | 15 | --mb1: .5rem; 16 | --mb2: 1rem; 17 | --mb3: 1.5rem; 18 | --mb4: 2rem; 19 | --mb5: 2.5rem; 20 | --mb6: 3rem; 21 | 22 | --z-back: -10; 23 | --z-normal: 1; 24 | --z-tooltip: 10; 25 | --z-fixed: 100; 26 | } 27 | 28 | @media screen and (min-width: 768px) { 29 | :root { 30 | --big-font-size: 3.5rem; 31 | --h2-font-size: 2rem; 32 | --normal-font-size: 1rem; 33 | } 34 | } 35 | 36 | *, ::before, ::after { box-sizing: border-box; } 37 | html { scroll-behavior: smooth; } 38 | 39 | body { 40 | margin: var(--header-height) 0 0 0; 41 | font-family: var(--body-font); 42 | font-size: var(--normal-font-size); 43 | color: var(--second-color); 44 | } 45 | 46 | h1, h2, p { margin: 0; } 47 | 48 | ul { 49 | margin: 0; 50 | padding: 0; 51 | list-style: none; 52 | } 53 | 54 | a { text-decoration: none; } 55 | 56 | img { 57 | max-width: 100%; 58 | height: auto; 59 | display: block; 60 | } 61 | 62 | .section-title { 63 | position: relative; 64 | font-size: var(--h2-font-size); 65 | color: var(--first-color); 66 | margin-top: var(--mb2); 67 | margin-bottom: var(--mb4); 68 | text-align: center; 69 | } 70 | 71 | .section-title::after { 72 | position: absolute; 73 | content: ''; 74 | width: 64px; 75 | height: 0.18rem; 76 | left: 0; 77 | right: 0; 78 | margin: auto; 79 | top: 2rem; 80 | background-color: var(--first-color); 81 | } 82 | 83 | .section { 84 | padding-top: 3rem; 85 | padding-bottom: 2rem; 86 | } 87 | 88 | .bd-grid { 89 | max-width: 1024px; 90 | display: grid; 91 | grid-template-columns: 100%; 92 | grid-column-gap: 2rem; 93 | width: calc(100% - 2rem); 94 | margin-left: var(--mb2); 95 | margin-right: var(--mb2); 96 | } 97 | 98 | .l-header { 99 | width: 100%; 100 | position: fixed; 101 | top: 0; 102 | left: 0; 103 | z-index: var(--z-fixed); 104 | background-color: #ffffff; 105 | box-shadow: 0 1px 4px rgba(146, 161, 176, .15); 106 | } 107 | 108 | .nav { 109 | height: var(--header-height); 110 | display: flex; 111 | justify-content: space-between; 112 | align-items: center; 113 | font-weight: var(--font-semi); 114 | } 115 | 116 | .nav-item { margin-bottom: var(--mb4); } 117 | .nav-link { position: relative; color: #ffffff; } 118 | .nav-link:hover { position: relative; } 119 | .nav-link:hover::after { 120 | position: absolute; 121 | content: ''; 122 | width: 100%; 123 | height: 0.18rem; 124 | left: 0; 125 | top: 2rem; 126 | background-color: var(--first-color); 127 | } 128 | 129 | .nav-logo { color: var(--second-color); } 130 | .nav-toggle { 131 | color: var(--second-color); 132 | font-size: 1.5rem; 133 | cursor: pointer; 134 | } 135 | 136 | .active::after { 137 | position: absolute; 138 | content: ''; 139 | width: 100%; 140 | height: 0.18rem; 141 | left: 0; 142 | top: 2rem; 143 | background-color: var(--first-color); 144 | } 145 | 146 | .home { height: calc(100vh - 3rem); row-gap: 1rem; } 147 | .home-data { align-self: center; } 148 | .home-title { font-size: var(--big-font-size); margin-bottom: var(--mb5); } 149 | .home-title-color { color: var(--first-color); } 150 | .home-social { display: flex; flex-direction: column; } 151 | .home-social-icon { 152 | width: max-content; 153 | margin-bottom: var(--mb2); 154 | font-size: 1.5rem; 155 | color: var(--second-color); 156 | transition: .3s; 157 | } 158 | 159 | .home-social-icon:hover { color: var(--first-color); } 160 | 161 | .home-img { 162 | position: absolute; 163 | right: 0; 164 | bottom: 0; 165 | width: 295px; 166 | } 167 | 168 | .home-img img { 169 | width: 495px; 170 | height: 295px; 171 | border-radius: 50%; 172 | } 173 | 174 | .button { 175 | display: inline-block; 176 | background-color: var(--first-color); 177 | color: #ffffff; 178 | padding: 0.75rem 2.5rem; 179 | font-weight: var(--font-semi); 180 | border-radius: .5rem; 181 | } 182 | 183 | .button:hover { box-shadow: 0 10px 36px rgba(0, 0, 0, .15); } 184 | 185 | /*ABOUT*/ 186 | 187 | .about-container { row-gap: 2rem; text-align: center; } 188 | .about-subtitle { margin-bottom: var(--mb2); } 189 | .about-img { justify-self: center; } 190 | .about-img img { width: 200px; border-radius: .5rem; } 191 | 192 | /*SKILLS*/ 193 | 194 | .skills-container { row-gap: 2rem; text-align: center; } 195 | .skills-subtitle { margin-bottom: var(--mb2); } 196 | .skills-text { margin-bottom: var(--mb4); } 197 | .skills-data { 198 | display: flex; 199 | justify-content: space-between; 200 | align-items: center; 201 | position: relative; 202 | font-weight: var(--font-semi); 203 | padding: 0.5rem 1rem; 204 | margin-bottom: var(--mb4); 205 | border-radius: .5rem; 206 | box-shadow: 0 4px 25px rgba(14, 36, 49, .15); 207 | } 208 | 209 | .skills-icon { 210 | font-size: 2rem; 211 | margin-right: var(--mb2); 212 | color: var(--first-color); 213 | } 214 | 215 | .skills-names { 216 | display: flex; 217 | align-items: center; 218 | } 219 | 220 | .skills-bar { 221 | position: absolute; 222 | left: 0; 223 | bottom: 0; 224 | background-color: var(--first-color); 225 | height: 0.25rem; 226 | border-radius: .5rem; 227 | z-index: var(--z-back); 228 | } 229 | 230 | .skills-html { width: 95%; } 231 | .skills-css { width: 85%; } 232 | .skills-js { width: 65%; } 233 | .skills-ux { width: 85%; } 234 | .skills-img { border-radius: .5rem; } 235 | 236 | /*WORK*/ 237 | 238 | .work { text-align: center; } 239 | .work-container { row-gap: 2rem; } 240 | .work-img { 241 | box-shadow: 0 4px 25px rgba(14, 36, 49, .15); 242 | border-radius: .5rem; 243 | overflow: hidden; 244 | } 245 | .work-img img { transition: 1s; cursor: pointer; } 246 | .work-img img:hover { transform: scale(1.1); } 247 | 248 | /*CONTACT*/ 249 | .contact-input { 250 | width: 100%; 251 | font-size: var(--normal-font-size); 252 | font-weight: var(--font-semi); 253 | padding: 1rem; 254 | border-radius: .5rem; 255 | border: 1px solid var(--second-color); 256 | outline: none; 257 | margin-bottom: var(--mb4); 258 | } 259 | 260 | .contact-button { 261 | display: block; 262 | border: none; 263 | outline: none; 264 | font-size: var(--normal-font-size); 265 | cursor: pointer; 266 | margin-left: auto; 267 | } 268 | 269 | /*FOOTER*/ 270 | 271 | .footer { 272 | background-color: var(--second-color); 273 | color: #ffffff; 274 | text-align: center; 275 | font-weight: var(--font-semi); 276 | padding: 2rem 0; 277 | } 278 | 279 | .footer-title { 280 | font-size: 2rem; 281 | margin-bottom: var(--mb4); 282 | } 283 | 284 | .footer-social { margin-bottom: var(--mb4); } 285 | 286 | .footer-icon { 287 | font-size: 1.5rem; 288 | color: #ffffff; 289 | margin: 0 var(--mb2); 290 | } 291 | 292 | /*MEDIA QUERIES*/ 293 | 294 | @media screen and (min-width: 769px) { 295 | body { margin: 0; } 296 | .section { padding-top: 4rem; padding-bottom: 3rem; } 297 | .section-title { margin-bottom: var(--mb6); } 298 | .section-title::after { width: 80px; top: 3rem; } 299 | 300 | .nav { height: calc(var(--header-height) + 1rem); } 301 | .nav-list { display: flex; padding-top: 0; } 302 | .nav-item { margin-left: var(--mb6); margin-bottom: 0; } 303 | .nav-toggle { display: none; } 304 | .nav-link { color: var(--second-color); } 305 | 306 | .home { height: 100vh; } 307 | .home-data { align-self: flex-end; } 308 | 309 | .home-social { 310 | padding-top: 0; 311 | padding-bottom: 2.5rem; 312 | flex-direction: row; 313 | align-self: flex-end; 314 | } 315 | 316 | .home-social-icon { margin-bottom: 0; margin-right: var(--mb4); } 317 | .home-img { width: 457px; height: 475px; bottom: 15%; } 318 | 319 | .about-container, .skills-container { 320 | grid-template-columns: repeat(2, 1fr); 321 | align-items: center; 322 | text-align: initial; 323 | } 324 | 325 | .about-img img { width: 300px; } 326 | 327 | .work-container { 328 | grid-template-columns: repeat(3, 1fr); 329 | grid-template-rows: repeat(2, 1fr); 330 | column-gap: 2rem; 331 | } 332 | 333 | .contact-form { width: 460px; } 334 | .contact-container { justify-items: center; } 335 | } 336 | 337 | @media screen and (min-width: 1024px) { 338 | .bd-grid { margin-left: auto; margin-right: auto; } 339 | .home-img { right: 10%; } 340 | } 341 | 342 | @media screen and (max-width: 768px) { 343 | .nav-menu { 344 | position: fixed; 345 | top: var(--header-height); 346 | right: -100%; 347 | width: 80%; 348 | height: 100%; 349 | padding: 2rem; 350 | background-color: var(--second-color); 351 | transition: .5s; 352 | } 353 | 354 | .show { right: 0; } 355 | } 356 | 357 | --------------------------------------------------------------------------------