├── README.md
├── OSAAS.png
├── banar.jpg
├── 8597533.png
├── source-code.png
├── web-design.png
├── cloud-storage.png
├── shopping-cart.png
├── combo-chart--v1.png
├── artificial-intelligence.png
├── vecteezy_icon-free-logo-javascript_53066817.png
├── 495563656_122107947614855440_1152109947886773901_n.jpg
├── 499036506_122094199802890978_6597843495876626008_n.jpg
├── 508721776_122119239332855440_3511401177764521189_n.jpg
├── vip-icon-for-graphic-design-logo-website-social-media-mobile-app-ui-png.webp
├── hacker-logo-or-hacker-in-black-hoodie-cyber-crime-with-laptop-free-png (1).webp
├── png-transparent-brainstorming-creativity-brain-orange-people-hand-drawn-thumbnail.png
├── png-transparent-risk-assessment-risk-management-plan-others-saving-text-plan-thumbnail.png
├── png-transparent-computer-icons-big-data-database-data-base-angle-rectangle-black-thumbnail.png
├── png-transparent-lateralization-of-brain-function-human-brain-brain-text-people-logo-thumbnail.png
├── png-transparent-computer-icons-data-security-data-migration-cloud-secure-text-logo-data-thumbnail.png
├── project-task-management-and-effective-time-planning-tools-project-development-icon-3d-vector-illustration-png.webp
├── png-transparent-risk-management-risk-register-risk-assessment-management-philosophy-angle-company-text-thumbnail.png
├── png-transparent-human-brain-psychology-mind-psychologist-brain-relaxing-s-art-scalable-vector-graphics-reality-thumbnail.png
├── png-transparent-ai-brain-configuration-ai-brain-setting-ai-brain-ai-mind-artificial-intelligence-brain-artificial-brain-3d-icon-thumbnail.png
├── png-transparent-cloud-computing-security-computer-security-cloud-storage-information-technology-cloud-computing-computer-network-cloud-computer-thumbnail.png
├── LICENSE
├── .github
    └── workflows
    │   └── static.yml
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # my-portfolio
2 | visit my portfolio website 
3 | 


--------------------------------------------------------------------------------
/OSAAS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/OSAAS.png


--------------------------------------------------------------------------------
/banar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/banar.jpg


--------------------------------------------------------------------------------
/8597533.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/8597533.png


--------------------------------------------------------------------------------
/source-code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/source-code.png


--------------------------------------------------------------------------------
/web-design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/web-design.png


--------------------------------------------------------------------------------
/cloud-storage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/cloud-storage.png


--------------------------------------------------------------------------------
/shopping-cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/shopping-cart.png


--------------------------------------------------------------------------------
/combo-chart--v1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/combo-chart--v1.png


--------------------------------------------------------------------------------
/artificial-intelligence.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/artificial-intelligence.png


--------------------------------------------------------------------------------
/vecteezy_icon-free-logo-javascript_53066817.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/vecteezy_icon-free-logo-javascript_53066817.png


--------------------------------------------------------------------------------
/495563656_122107947614855440_1152109947886773901_n.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/495563656_122107947614855440_1152109947886773901_n.jpg


--------------------------------------------------------------------------------
/499036506_122094199802890978_6597843495876626008_n.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/499036506_122094199802890978_6597843495876626008_n.jpg


--------------------------------------------------------------------------------
/508721776_122119239332855440_3511401177764521189_n.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/508721776_122119239332855440_3511401177764521189_n.jpg


--------------------------------------------------------------------------------
/vip-icon-for-graphic-design-logo-website-social-media-mobile-app-ui-png.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/vip-icon-for-graphic-design-logo-website-social-media-mobile-app-ui-png.webp


--------------------------------------------------------------------------------
/hacker-logo-or-hacker-in-black-hoodie-cyber-crime-with-laptop-free-png (1).webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/hacker-logo-or-hacker-in-black-hoodie-cyber-crime-with-laptop-free-png (1).webp


--------------------------------------------------------------------------------
/png-transparent-brainstorming-creativity-brain-orange-people-hand-drawn-thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/png-transparent-brainstorming-creativity-brain-orange-people-hand-drawn-thumbnail.png


--------------------------------------------------------------------------------
/png-transparent-risk-assessment-risk-management-plan-others-saving-text-plan-thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/png-transparent-risk-assessment-risk-management-plan-others-saving-text-plan-thumbnail.png


--------------------------------------------------------------------------------
/png-transparent-computer-icons-big-data-database-data-base-angle-rectangle-black-thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/png-transparent-computer-icons-big-data-database-data-base-angle-rectangle-black-thumbnail.png


--------------------------------------------------------------------------------
/png-transparent-lateralization-of-brain-function-human-brain-brain-text-people-logo-thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/png-transparent-lateralization-of-brain-function-human-brain-brain-text-people-logo-thumbnail.png


--------------------------------------------------------------------------------
/png-transparent-computer-icons-data-security-data-migration-cloud-secure-text-logo-data-thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/png-transparent-computer-icons-data-security-data-migration-cloud-secure-text-logo-data-thumbnail.png


--------------------------------------------------------------------------------
/project-task-management-and-effective-time-planning-tools-project-development-icon-3d-vector-illustration-png.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/project-task-management-and-effective-time-planning-tools-project-development-icon-3d-vector-illustration-png.webp


--------------------------------------------------------------------------------
/png-transparent-risk-management-risk-register-risk-assessment-management-philosophy-angle-company-text-thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/png-transparent-risk-management-risk-register-risk-assessment-management-philosophy-angle-company-text-thumbnail.png


--------------------------------------------------------------------------------
/png-transparent-human-brain-psychology-mind-psychologist-brain-relaxing-s-art-scalable-vector-graphics-reality-thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/png-transparent-human-brain-psychology-mind-psychologist-brain-relaxing-s-art-scalable-vector-graphics-reality-thumbnail.png


--------------------------------------------------------------------------------
/png-transparent-ai-brain-configuration-ai-brain-setting-ai-brain-ai-mind-artificial-intelligence-brain-artificial-brain-3d-icon-thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/png-transparent-ai-brain-configuration-ai-brain-setting-ai-brain-ai-mind-artificial-intelligence-brain-artificial-brain-3d-icon-thumbnail.png


--------------------------------------------------------------------------------
/png-transparent-cloud-computing-security-computer-security-cloud-storage-information-technology-cloud-computing-computer-network-cloud-computer-thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jahidads/my-portfolio/HEAD/png-transparent-cloud-computing-security-computer-security-cloud-storage-information-technology-cloud-computing-computer-network-cloud-computer-thumbnail.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Jahid Hasan
 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.
22 | 


--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["main"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 |   group: "pages"
22 |   cancel-in-progress: false
23 | 
24 | jobs:
25 |   # Single deploy job since we're just deploying
26 |   deploy:
27 |     environment:
28 |       name: github-pages
29 |       url: ${{ steps.deployment.outputs.page_url }}
30 |     runs-on: ubuntu-latest
31 |     steps:
32 |       - name: Checkout
33 |         uses: actions/checkout@v4
34 |       - name: Setup Pages
35 |         uses: actions/configure-pages@v5
36 |       - name: Upload artifact
37 |         uses: actions/upload-pages-artifact@v3
38 |         with:
39 |           # Upload entire repository
40 |           path: '.'
41 |       - name: Deploy to GitHub Pages
42 |         id: deployment
43 |         uses: actions/deploy-pages@v4
44 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | <head>
   4 |   <meta charset="UTF-8">
   5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6 |   <title>Portfolio</title>
   7 |   <link rel="icon" type="image/png" href="495563656_122107947614855440_1152109947886773901_n.jpg">
   8 | <style>
   9 |     /* General Reset */
  10 |     * {
  11 |         margin: 0;
  12 |         padding: 0;
  13 |         box-sizing: border-box;
  14 |     }
  15 | 
  16 |     body {
  17 |         font-family: Arial, sans-serif;
  18 |         line-height: 1.6;
  19 |         margin: 0;
  20 |         padding: 0;
  21 |     }
  22 | 
  23 |     .container {
  24 |         width: 100%;
  25 |         max-width: 1200px;
  26 |         margin: 0 auto;
  27 |         padding: 15px;
  28 |     }
  29 | 
  30 |     img {
  31 |         max-width: 100%;
  32 |         height: auto;
  33 |     }
  34 | 
  35 |     /* Navigation Menu - New Style */
  36 |     nav {
  37 |       background: #ffffff;
  38 |       border-radius: 0 0 18px 18px;
  39 |       box-shadow: 0 6px 24px rgba(71, 27, 27, 0.1);
  40 |       padding: 0.7em 0;
  41 |       text-align: center;
  42 |       position: sticky;
  43 |       top: 0;
  44 |       z-index: 1000;
  45 |       transition: top 0.3s;
  46 |       border-bottom: 3px solid #000000;
  47 |     }
  48 |     nav ul {
  49 |         display: flex;
  50 |         justify-content: center;
  51 |         align-items: center;
  52 |         gap: 28px;
  53 |         list-style: none;
  54 |         margin: 0;
  55 |         padding: 0;
  56 |     }
  57 |     nav li {
  58 |         display: flex;
  59 |         align-items: center;
  60 |         border-radius: 12px;
  61 |         transition: background 0.3s, box-shadow 0.3s;
  62 |         box-shadow: 0 2px 8px rgba(0,123,255,0.07);
  63 |     }
  64 |     nav a {
  65 |         color: #222;
  66 |         text-decoration: none;
  67 |         font-size: 1.15em;
  68 |         padding: 10px 18px;
  69 |         border-radius: 8px;
  70 |         display: flex;
  71 |         align-items: center;
  72 |         gap: 8px;
  73 |         font-weight: 500;
  74 |         transition: background 0.3s, color 0.3s, box-shadow 0.3s;
  75 |         background: rgba(255,255,255,0.7);
  76 |         box-shadow: 1px 2px 8px rgb(92, 71, 71);
  77 |     }
  78 |     nav a:hover, nav a:focus {
  79 |         background: #007BFF;
  80 |         color: #fff;
  81 |         box-shadow: 0 4px 16px rgba(0,123,255,0.15);
  82 |         outline: none;
  83 |     }
  84 |     nav a svg {
  85 |         vertical-align: middle;
  86 |         margin-right: 0;
  87 |         color: #000000;
  88 |         transition: transform 0.3s, color 0.3s;
  89 |         filter: drop-shadow(0 2px 4px rgb(2, 2, 2));
  90 |     }
  91 |     nav a:hover svg, nav a:focus svg {
  92 |         color: #ffffff;
  93 |         transform: scale(1.2) rotate(-8deg);
  94 |         filter: drop-shadow(0 4px 8px rgba(0,123,255,0.15));
  95 |     }
  96 |     @media (max-width: 768px) {
  97 |         nav ul {
  98 |             flex-direction: row;
  99 |             gap: 12px;
 100 |         }
 101 |         nav a {
 102 |             font-size: 1em;
 103 |             padding: 8px 10px;
 104 |         }
 105 |     }
 106 |     @media (max-width: 480px) {
 107 |         nav ul {
 108 |             flex-direction: row; /* Changed from column to row */
 109 |             gap: 8px;
 110 |         }
 111 |         nav a {
 112 |             font-size: 0.95em;
 113 |             padding: 8px 8px;
 114 |         }
 115 |     }
 116 | 
 117 |     /* Responsive Layout */
 118 |     .row {
 119 |         display: flex;
 120 |         flex-wrap: wrap;
 121 |         margin: -10px;
 122 |     }
 123 | 
 124 |     .col {
 125 |         flex: 1;
 126 |         padding: 10px;
 127 |         min-width: 300px;
 128 |     }
 129 | 
 130 |     /* General Styles */
 131 |     body {
 132 |         margin: 0;
 133 |         padding: 0;
 134 |         font-family: Arial, sans-serif;
 135 |         box-sizing: border-box;
 136 |     }
 137 | 
 138 |     .container {
 139 |         width: 100%;
 140 |         max-width: 1200px;
 141 |         margin: 0 auto;
 142 |         padding: 0 15px;
 143 |     }
 144 | 
 145 |     img {
 146 |         max-width: 100%;
 147 |         height: auto;
 148 |     }
 149 | 
 150 |     /* Responsive Typography */
 151 |     h1, h2, h3 {
 152 |         text-align: center;
 153 |         margin: 10px 0;
 154 |     }
 155 | 
 156 |     p {
 157 |         line-height: 1.6;
 158 |         margin: 10px 0;
 159 |     }
 160 | 
 161 |     /* Responsive Cards */
 162 |     .card {
 163 |         border-radius: 10px;
 164 |         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 165 |         transition: transform 0.3s ease, box-shadow 0.3s ease;
 166 |     }
 167 | 
 168 |     .card:hover {
 169 |         transform: translateY(-5px);
 170 |         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 171 |     }
 172 | 
 173 |     /* Base Styles */
 174 |     body {
 175 |         font-family: 'Roboto', sans-serif;
 176 |         background: linear-gradient(to right, #ece9e6, #ffffff);
 177 |         color: #333;
 178 |         line-height: 1.8;
 179 |         margin: 0;
 180 |         scroll-behavior: smooth;
 181 |     }
 182 |     section {
 183 |         padding: 2em;
 184 |         background: #fff;
 185 |         margin-bottom: 20px;
 186 |         border-radius: 10px;
 187 |         box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
 188 |         transition: transform 0.3s ease;
 189 |     }
 190 |     section:hover {
 191 |         transform: translateY(-10px);
 192 |         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 193 |     }
 194 |     section h1 {
 195 |         font-size: 2em;
 196 |         color: #222;
 197 |         border-bottom: 3px solid #ddd;
 198 |         padding-bottom: 0.5em;
 199 |     }
 200 |     section ul {
 201 |         padding-left: 20px;
 202 |     }
 203 |     section ul li {
 204 |         margin-bottom: 10px;
 205 |     }
 206 |     h1 {
 207 |         color: #333;
 208 |         font-weight: bold;
 209 |         margin-top: 0;
 210 |     }
 211 |     .container {
 212 |         max-width: 800px;
 213 |         margin: 0 auto;
 214 |         padding: 2em;
 215 |         background: #fafafa;
 216 |         border-radius: 10px;
 217 |         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 218 |         animation: fadeIn 1s ease-in-out;
 219 |     }
 220 |     @keyframes fadeIn {
 221 |         from {
 222 |             opacity: 0;
 223 |             transform: translateY(20px);
 224 |         }
 225 |         to {
 226 |             opacity: 1;
 227 |             transform: translateY(0);
 228 |         }
 229 |     }
 230 |     .image {
 231 |         width: 100%;
 232 |         height: 300px;
 233 |         background-size: cover;
 234 |         background-position: center;
 235 |         margin-bottom: 20px;
 236 |         border-radius: 10px;
 237 |         overflow: hidden;
 238 |         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 239 |     }
 240 |     @media (max-width: 768px) {
 241 |         .image {
 242 |             height: 200px;
 243 |         }
 244 |     }
 245 | 
 246 |     @media (max-width: 480px) {
 247 |         .image {
 248 |             height: 150px;
 249 |         }
 250 |     }
 251 |     .image:hover {
 252 |         filter: brightness(0.9);
 253 |         transform: scale(1.05);
 254 |         transition: transform 0.3s ease, filter 0.3s ease;
 255 |         box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
 256 |     }
 257 |     footer {
 258 |         background: #222;
 259 |         color: #fff;
 260 |         text-align: center;
 261 |         padding: 0.1em 0; /* Increased padding for larger size */
 262 |         position: fixed;
 263 |         bottom: 0;
 264 |         width: 100%;
 265 |         box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
 266 |         font-size: 1.1em; /* Slightly larger font size */
 267 |         font-family: 'Arial', sans-serif;
 268 |         letter-spacing: 0.5px;
 269 |     }
 270 |     footer p {
 271 |         font-size: 1em;
 272 |         margin: 0.5em 0;
 273 |     }
 274 |     footer a {
 275 |         color: #ffcc00;
 276 |         text-decoration: none;
 277 |         font-weight: bold;
 278 |         transition: color 0.3s ease;
 279 |     }
 280 |     footer a:hover {
 281 |         color: #fff;
 282 |         text-decoration: underline;
 283 |     }
 284 |     .button {
 285 |         display: inline-block;
 286 |         padding: 12px 25px;
 287 |         font-size: 16px;
 288 |         color: #fff;
 289 |         background: linear-gradient(to right, #007BFF, #0056b3);
 290 |         border: none;
 291 |         border-radius: 25px;
 292 |         text-decoration: none;
 293 |         cursor: pointer;
 294 |         transition: transform 0.2s, background 0.3s;
 295 |         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 296 |         font-family: 'Verdana', sans-serif;
 297 |         letter-spacing: 1px;
 298 |     }
 299 |     .button:hover {
 300 |         background: linear-gradient(to right, #0056b3, #003f7f);
 301 |         transform: scale(1.1);
 302 |         box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
 303 |     }
 304 |     .button:active {
 305 |         transform: scale(0.95);
 306 |         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 307 |     }
 308 |     .card {
 309 |         border: 1px solid #ddd;
 310 |         border-radius: 15px;
 311 |         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 312 |         padding: 25px;
 313 |         margin: 20px 0;
 314 |         background: linear-gradient(to bottom, #ffffff, #f0f0f0);
 315 |         transition: transform 0.2s, box-shadow 0.3s;
 316 |         flex: 1 1 calc(33.333% - 40px); /* Adjust for spacing */
 317 |         max-width: 300px;
 318 |         margin: 10px;
 319 |     }
 320 |     .card:hover {
 321 |         transform: translateY(-10px);
 322 |         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 323 |     }
 324 |     .card h2 {
 325 |         font-size: 1.5em;
 326 |         color: #007BFF;
 327 |         margin-bottom: 0.5em;
 328 |         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
 329 |     }
 330 |     .card p {
 331 |         font-size: 1em;
 332 |         color: #555;
 333 |         line-height: 1.6;
 334 |     }
 335 |     .card ul li {
 336 |         font-size: 0.9em;
 337 |         color: #333;
 338 |     }
 339 |     .section {
 340 |         margin-bottom: 20px;
 341 |     }
 342 |     .highlight {
 343 |         background: #ffcc00;
 344 |         color: #222;
 345 |         padding: 0.5em;
 346 |         border-radius: 5px;
 347 |         font-weight: bold;
 348 |         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 349 |     }
 350 |     iframe {
 351 |         width: 100%;
 352 |         height: auto;
 353 |         max-width: 560px;
 354 |         aspect-ratio: 16 / 9;
 355 |         border: none;
 356 |     }
 357 |     iframe:hover {
 358 |         transform: scale(1.05);
 359 |         transition: transform 0.3s ease;
 360 |         box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
 361 |     }
 362 |     header {
 363 |         background: linear-gradient(to right, #007BFF, #0056b3);
 364 |         color: #fff;
 365 |         padding: 1em 0;
 366 |         text-align: center;
 367 |         font-size: 1.5em;
 368 |         font-weight: bold;
 369 |         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 370 |         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 371 |     }
 372 |     .section h2 {
 373 |         text-transform: uppercase;
 374 |         letter-spacing: 1px;
 375 |         color: #0056b3;
 376 |     }
 377 |     .portfolio {
 378 |         display: flex;
 379 |         flex-wrap: wrap;
 380 |         justify-content: center;
 381 |         gap: 20px;
 382 |     }
 383 |     @media (max-width: 768px) {
 384 |         body {
 385 |             display: flex;
 386 |             flex-direction: column;
 387 |             align-items: center;
 388 |             justify-content: center;
 389 |         }
 390 |         .portfolio {
 391 |             flex-direction: column;
 392 |             align-items: center;
 393 |         }
 394 |         section {
 395 |             text-align: center;
 396 |         }
 397 |         .card {
 398 |             flex: 1 1 calc(50% - 20px);
 399 |         }
 400 |     }
 401 |     @media (max-width: 480px) {
 402 |         body {
 403 |             padding: 0 10px;
 404 |         }
 405 |         .container {
 406 |             padding: 1em;
 407 |         }
 408 |         section {
 409 |             padding: 1em;
 410 |             margin-bottom: 15px;
 411 |         }
 412 |         section h1 {
 413 |             font-size: 1.5em;
 414 |         }
 415 |         .portfolio {
 416 |             flex-direction: column;
 417 |             align-items: center;
 418 |         }
 419 |         .card {
 420 |             flex: 1 1 100%;
 421 |         }
 422 |         footer {
 423 |             font-size: 0.9em;
 424 |             padding: 0.5em 0;
 425 |         }
 426 |         iframe {
 427 |             width: 100%;
 428 |             height: auto;
 429 |         }
 430 |     }
 431 |     @media (min-width: 1024px) {
 432 |         .container {
 433 |             max-width: 1200px;
 434 |         }
 435 |         .portfolio {
 436 |             justify-content: space-around;
 437 |         }
 438 |         .card {
 439 |             width: 30%;
 440 |             margin: 15px;
 441 |         }
 442 |     }
 443 |     .contact {
 444 |         text-align: center;
 445 |         margin: 2em 0;
 446 |     }
 447 |     .contact h2 {
 448 |         font-size: 1.8em;
 449 |         color: #007BFF;
 450 |         margin-bottom: 1em;
 451 |     }
 452 |     .social-links {
 453 |         display: flex;
 454 |         justify-content: center;
 455 |         gap: 15px;
 456 |         margin-bottom: 1em;
 457 |     }
 458 |     .social-links a {
 459 |         display: inline-block;
 460 |         width: 48px;
 461 |         height: 48px;
 462 |         line-height: 48px;
 463 |         border-radius: 50%;
 464 |         background: #f0f0f0;
 465 |         transition: transform 0.3s;
 466 |     }
 467 |     .social-links a:hover {
 468 |         transform: scale(1.1);
 469 |         background: #e0e0e0;
 470 |     }
 471 |     #commentForm {
 472 |         display: flex;
 473 |         flex-direction: column;
 474 |         gap: 10px;
 475 |         margin-top: 1em;
 476 |     }
 477 |     #commentForm input {
 478 |         padding: 10px;
 479 |         font-size: 1em;
 480 |         border: 1px solid #ddd;
 481 |         border-radius: 5px;
 482 |         transition: border-color 0.3s;
 483 |     }
 484 |     #commentForm input:focus {
 485 |         border-color: #007BFF;
 486 |         outline: none;
 487 |     }
 488 |     #commentForm button {
 489 |         padding: 10px;
 490 |         font-size: 1em;
 491 |         color: #fff;
 492 |         background: #007BFF;
 493 |         border: none;
 494 |         border-radius: 5px;
 495 |         cursor: pointer;
 496 |         transition: background 0.3s;
 497 |     }
 498 |     #commentForm button:hover {
 499 |         background: #0056b3;
 500 |     }
 501 |     #thankYouMessage {
 502 |         margin-top: 1em;
 503 |         font-size: 1em;
 504 |         color: lightgreen;
 505 |     }
 506 | 
 507 |     /* Enhancing Animations and Transitions */
 508 |     .card {
 509 |         transition: transform 0.3s ease, box-shadow 0.3s ease;
 510 |     }
 511 | 
 512 |     .card:hover {
 513 |         transform: translateY(-10px);
 514 |         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 515 |     }
 516 | 
 517 |     button {
 518 |         transition: background-color 0.3s ease, transform 0.2s ease;
 519 |     }
 520 | 
 521 |     button:hover {
 522 |         background-color: #555;
 523 |         transform: scale(1.05);
 524 |     }
 525 | 
 526 |     /* Adding Interactivity */
 527 |     .interactive {
 528 |         cursor: pointer;
 529 |     }
 530 | 
 531 |     .interactive:focus {
 532 |         outline: 2px solid #ffcc00;
 533 |         outline-offset: 2px;
 534 |     }
 535 | 
 536 |     /* Accessibility Improvements */
 537 |     a {
 538 |         color: #007BFF;
 539 |         text-decoration: none;
 540 |     }
 541 | 
 542 |     a:focus {
 543 |         outline: 2px solid #ffcc00;
 544 |         outline-offset: 2px;
 545 |     }
 546 | 
 547 |     /* SEO Improvements */
 548 |     img[alt] {
 549 |         border: 0;
 550 |     }
 551 | </style>
 552 | </head>
 553 | <body>
 554 |   <div id="fb-root"></div>
 555 |   <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v22.0"></script>
 556 |   <nav role="navigation" aria-label="Main Navigation">
 557 |     <ul>
 558 |       <li>
 559 |         <a href="#home">
 560 |           <!-- Home Icon SVG -->
 561 |           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24" style="vertical-align: middle; color: #000000;">
 562 |             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
 563 |           </svg>
 564 |         </a>
 565 |       </li>
 566 |       <li>
 567 |         <a href="#projects">
 568 |           <!-- Projects Icon SVG -->
 569 |           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24" style="vertical-align: middle; color: #000000;">
 570 |             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-3-3v6m-7 4h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
 571 |           </svg>
 572 |         </a>
 573 |       </li>
 574 |       <li>
 575 |         <a href="#about">
 576 |           <!-- About Icon SVG -->
 577 |           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24" style="vertical-align: middle; color: #000000;">
 578 |             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
 579 |           </svg>
 580 |         </a>
 581 |       </li>
 582 |       <li>
 583 |         <a href="#contact">
 584 |           <!-- Contact Icon SVG -->
 585 |           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24" style="vertical-align: middle; color: #000000;">
 586 |             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
 587 |           </svg>
 588 |         </a>
 589 |       </li>
 590 |       <li>
 591 |         <a href="#expertise">
 592 |           <!-- Expertise Icon SVG -->
 593 |           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24" style="vertical-align: middle; color: #000000;">
 594 |             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
 595 |           </svg>
 596 |         </a>
 597 |       </li>
 598 |       <li>
 599 |         <a href="#comment">
 600 |           <!-- Comment Icon SVG -->
 601 |           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24" style="vertical-align: middle; color: #000000;">
 602 |             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
 603 |           </svg>
 604 |         </a>
 605 |       </li>
 606 |     </ul>
 607 |   </nav>
 608 |   <div class="container">
 609 |     <header class="header-4d-animate">
 610 |       <span class="text-4d">My Portfolio</span>
 611 |     </header>
 612 |     <style>
 613 |       .header-4d-animate {
 614 |       position: relative;
 615 |       overflow: visible;
 616 |       }
 617 |       .text-4d {
 618 |       display: inline-block;
 619 |       font-size: 2.7em;
 620 |       font-weight: bold;
 621 |       letter-spacing: 2px;
 622 |       color: #fff;
 623 |       background: linear-gradient(90deg, #007BFF 0%, #a38c30 40%, #801855 80%, #007BFF 100%);
 624 |       background-clip: text;
 625 |       -webkit-background-clip: text;
 626 |       -webkit-text-fill-color: transparent;
 627 |       text-shadow:
 628 |         1px 1px 0 #222,
 629 |         2px 2px 2px #0cb335,
 630 |         4px 4px 8px #801855,
 631 |         0 8px 24px rgba(0,0,0,0.15);
 632 |       filter: drop-shadow(0 2px 10px #007BFF);
 633 |       animation: text4dMove 2.5s cubic-bezier(0.23,1,0.32,1) infinite alternate;
 634 |       transition: text-shadow 0.3s, filter 0.3s;
 635 |       }
 636 |       @keyframes text4dMove {
 637 |       0% {
 638 |         text-shadow:
 639 |         1px 1px 0 #222,
 640 |         2px 2px 2px #235e32,
 641 |         4px 4px 8px #5a1e41,
 642 |         0 8px 24px rgba(82, 48, 48, 0.15);
 643 |         filter: drop-shadow(0 2px 10px #007BFF);
 644 |         transform: scale(1) rotate(-2deg);
 645 |       }
 646 |       50% {
 647 |         text-shadow:
 648 |         2px 2px 0 #222,
 649 |         4px 4px 8px #5a4e1ebe,
 650 |         8px 8px 16px #5f1540ad,
 651 |         0 12px 32px rgba(0,123,255,0.18);
 652 |         filter: drop-shadow(0 4px 16px #6588ca);
 653 |         transform: scale(1.07) rotate(3deg);
 654 |       }
 655 |       100% {
 656 |         text-shadow:
 657 |         1px 1px 0 #222,
 658 |         2px 2px 2px #0cb335,
 659 |         4px 4px 8px #801855,
 660 |         0 8px 24px rgba(0,0,0,0.15);
 661 |         filter: drop-shadow(0 2px 10px #007BFF);
 662 |         transform: scale(1) rotate(-2deg);
 663 |       }
 664 |       }
 665 |       @media (max-width: 600px) {
 666 |       .text-4d {
 667 |         font-size: 1.5em;
 668 |       }
 669 |       }
 670 |     </style>
 671 |     <section id="home" aria-labelledby="home-heading" style="position: relative; background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-radius: 18px; margin-bottom: 32px; padding: 2.5em 2em 2em 2em; text-align: center;">
 672 |       <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 1.5em;">
 673 |         <img src="495563656_122107947614855440_1152109947886773901_n.jpg"
 674 |           alt="Profile"
 675 |           class="profile-animate"
 676 |           style="width: 120px; height: 120px; border-radius: 100%; box-shadow: 0 4px 16px rgba(0,123,255,0.15); border: 4px solid #ffffff; object-fit: cover;">
 677 |       </div>
 678 |       <style>
 679 |         .profile-animate {
 680 |           opacity: 0;
 681 |           transform: scale(0.8) rotate(-10deg);
 682 |           animation: profileFadeIn 1.2s 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
 683 |         }
 684 |         @keyframes profileFadeIn {
 685 |           0% {
 686 |         opacity: 0;
 687 |         transform: scale(0.8) rotate(-10deg);
 688 |           }
 689 |           60% {
 690 |         opacity: 1;
 691 |         transform: scale(1.05) rotate(3deg);
 692 |           }
 693 |           80% {
 694 |         transform: scale(0.97) rotate(-2deg);
 695 |           }
 696 |           100% {
 697 |         opacity: 1;
 698 |         transform: scale(1) rotate(0deg);
 699 |           }
 700 |         }
 701 |       </style>
 702 |       <h1 id="home-heading" class="fade-in-title" style="font-size: 2.5em; color: #007BFF; margin-bottom: 0.3em; letter-spacing: 1px; text-shadow: 1px 2px 8px #b3c6e7;">Welcome</h1>
 703 |       <p class="slide-in-text" style="font-size: 1.3em; color: #000000; margin-bottom: 1.5em; font-weight: 500;">
 704 |         Welcome to my portfolio! <span style="color: #801855; font-weight: bold;">I'm JAHID HASAN,</span> a Web Developer, passionate about <span style="color: #007BFF; font-weight: bold;">Web Design</span>
 705 |         <br>
 706 |         I create modern, responsive, and user-friendly websites using <span style="color:#e44d26; font-weight:bold;">HTML</span>, <span style="color:#264de4; font-weight:bold;">CSS</span>, <span style="color:#6d5f04; font-weight:bold;">JavaScript</span>, and <span style="color:#3572A5; font-weight:bold;">Python</span>.
 707 |         <br>
 708 |         My expertise includes <span style="color:#413817; font-weight:bold;">UI/UX design</span>, <span style="color:#801855; font-weight:bold;">cybersecurity</span>, and <span style="color:#007BFF; font-weight:bold;">AI integration</span>. I enjoy solving problems, learning new technologies, and helping businesses grow online.
 709 |       </p>
 710 |       <div class="color-animate-bar"></div>
 711 |       <style>
 712 |         .fade-in-title {
 713 |           opacity: 0;
 714 |           animation: fadeInTitle 1.2s ease-out forwards;
 715 |         }
 716 |         @keyframes fadeInTitle {
 717 |           from { opacity: 0; transform: translateY(-30px);}
 718 |           to { opacity: 1; transform: translateY(0);}
 719 |         }
 720 |         .slide-in-text {
 721 |           opacity: 0;
 722 |           animation: slideInText 1.2s 0.5s ease-out forwards;
 723 |         }
 724 |         @keyframes slideInText {
 725 |           from { opacity: 0; transform: translateX(-40px);}
 726 |           to { opacity: 1; transform: translateX(0);}
 727 |         }
 728 |         .color-animate-bar {
 729 |           width: 100%;
 730 |           height: 8px;
 731 |           border-radius: 6px;
 732 |           margin: 1.2em auto 1.5em auto;
 733 |           background: linear-gradient(270deg, #007BFF, #ffcc00, #0cb335, #801855, #007BFF);
 734 |           background-size: 800% 800%;
 735 |           animation: colorBarMove 4s ease-in-out infinite;
 736 |           box-shadow: 0 2px 12px rgba(0,123,255,0.12);
 737 |         }
 738 |         @keyframes colorBarMove {
 739 |           0% { background-position: 0% 50%; }
 740 |           50% { background-position: 100% 50%; }
 741 |           100% { background-position: 0% 50%; }
 742 |         }
 743 |       </style>
 744 | 
 745 |       <a href="#contact" class="button color-animate-btn" style="margin-top: 1em;">Contact Me</a>
 746 |       <style>
 747 |         .color-animate-btn {
 748 |           background: linear-gradient(270deg, #007BFF, #ffcc00, #0cb335, #801855, #007BFF);
 749 |           background-size: 800% 800%;
 750 |           animation: colorBtnMove 4s ease-in-out infinite;
 751 |           border: none;
 752 |         }
 753 |         @keyframes colorBtnMove {
 754 |           0% { background-position: 0% 50%; }
 755 |           50% { background-position: 100% 50%; }
 756 |           100% { background-position: 0% 50%; }
 757 |         }
 758 |       </style>
 759 |     </section>
 760 |     <section id="projects" aria-labelledby="projects-heading">
 761 |       <h1 id="projects-heading">Projects</h1>
 762 |       <div class="image" style="background-image: url('499036506_122094199802890978_6597843495876626008_n.jpg');"></div>
 763 |       <div class="portfolio">
 764 |         <div class="card interactive" tabindex="0">
 765 |           <div class="project-img-wrap">
 766 |             <img src="508721776_122119239332855440_3511401177764521189_n.jpg" alt="Project 1" class="project-img">
 767 |             <h2>Project 1</h2>
 768 |             <p>Website Design</p>
 769 |           </div>
 770 |         </div>
 771 |         <div class="card interactive" tabindex="0">
 772 |           <div class="project-img-wrap">
 773 |             <img src="hacker-logo-or-hacker-in-black-hoodie-cyber-crime-with-laptop-free-png (1).webp" alt="Project 2" class="project-img">
 774 |             <h2>Project 2</h2>
 775 |             <p>Cyber-Security</p>
 776 |           </div>
 777 |         </div>
 778 |         <div class="card interactive" tabindex="0">
 779 |           <div class="project-img-wrap">
 780 |             <img src="project-task-management-and-effective-time-planning-tools-project-development-icon-3d-vector-illustration-png.webp" alt="Project 3" class="project-img">
 781 |             <h2>Project 3</h2>
 782 |             <p>Business Portfolio</p>
 783 |           </div>
 784 |         </div>
 785 |         <div class="card interactive" tabindex="0">
 786 |           <div class="project-img-wrap">
 787 |             <img src="495563656_122107947614855440_1152109947886773901_n.jpg" alt="Project 4" class="project-img">
 788 |             <h2>Project 4</h2>
 789 |             <p>Developer-portfolio</p>
 790 |           </div>
 791 |         </div>
 792 |         <div class="card interactive" tabindex="0">
 793 |           <div class="project-img-wrap">
 794 |             <img src="vip-icon-for-graphic-design-logo-website-social-media-mobile-app-ui-png.webp" alt="Project 5" class="project-img">
 795 |             <h2>Project 5</h2>
 796 |             <p>my-traditional-website</p>
 797 |           </div>
 798 |         </div>
 799 |         <div class="card interactive" tabindex="0">
 800 |           <div class="project-img-wrap">
 801 |             <img src="495563656_122107947614855440_1152109947886773901_n.jpg" alt="Project 6" class="project-img">
 802 |             <h2>Project 6</h2>
 803 |             <p>Resume portfolio</p>
 804 |           </div>
 805 |         </div>
 806 |         <div class="card interactive" tabindex="0">
 807 |           <div class="project-img-wrap">
 808 |             <img src="vecteezy_icon-free-logo-javascript_53066817.png" alt="Project 7" class="project-img">
 809 |             <h2>Project 7</h2>
 810 |             <p>Web Developer</p>
 811 |           </div>
 812 |         </div>
 813 |         <div class="card interactive" tabindex="0">
 814 |           <div class="project-img-wrap">
 815 |             <img src="8597533.png" alt="Project 8" class="project-img">
 816 |             <h2>Project 8</h2>
 817 |             <p>Cybershield</p>
 818 |            </div>
 819 |           </div>
 820 |         <div class="card interactive" tabindex="0">
 821 |           <div class="project-img-wrap">
 822 |             <img src="OSAAS.png" alt="Project 9" class="project-img">
 823 |             <h2>Project 9</h2>
 824 |             <p>Teampro</p>    
 825 |         </div>
 826 |       </div>
 827 |       </div>
 828 |       <style>
 829 |         .project-img-wrap {
 830 |           display: flex;
 831 |           flex-direction: column;
 832 |           align-items: center;
 833 |           justify-content: center;
 834 |           height: 100%;
 835 |           width: 100%;
 836 |           text-align: center;
 837 |         }
 838 |         .project-img {
 839 |           width: 100%;
 840 |           max-width: 120px;
 841 |           height: auto;
 842 |           border-radius: 10px;
 843 |           margin-bottom: 10px;
 844 |           display: block;
 845 |           object-fit: cover;
 846 |         }
 847 |         @media (max-width: 768px) {
 848 |           .project-img {
 849 |             max-width: 90px;
 850 |           }
 851 |         }
 852 |         @media (max-width: 480px) {
 853 |           .project-img {
 854 |             max-width: 70px;
 855 |           }
 856 |           .portfolio {
 857 |             flex-direction: column;
 858 |             align-items: center;
 859 |           }
 860 |           .card {
 861 |             width: 100%;
 862 |             max-width: 100%;
 863 |           }
 864 |         }
 865 |       </style>
 866 |     </section>
 867 |     <section id="about">
 868 |       <h1 style="color:#007BFF; text-align:center; margin-bottom:0.7em; letter-spacing:1px; text-shadow:1px 2px 8px #b3c6e7;">About</h1>
 869 |       <p style="font-size:1.2em; color:#000000; text-align:center; margin-bottom:0.5em; font-weight:500;">
 870 |         I'm <span style="color:#ffcc00; font-weight:bold;">Jahid</span>, a <span style="color:#007BFF; font-weight:bold;">20-year-old Web Developer</span> with <span class="highlight" style="background:#e7ebf3; color:#007BFF; padding:0.2em 0.5em; border-radius:5px;">1 year</span> of experience.
 871 |       </p>
 872 |       <p style="font-size:1.1em; color:#000000; text-align:center; margin-bottom:1.2em;">
 873 |         My skills include 
 874 |         <span style="color:#e44d26; font-weight:bold;">HTML</span>, 
 875 |         <span style="color:#264de4; font-weight:bold;">CSS</span>, 
 876 |         <span style="color:#f0db4f; font-weight:bold;">JavaScript</span>, and 
 877 |         <span style="color:#3572A5; font-weight:bold;">Python</span>.
 878 |       </p>
 879 |       <div style="display:flex; justify-content:center; gap:18px; margin-bottom:1.2em;">
 880 |         <img src="https://img.icons8.com/color/48/000000/html-5--v1.png" alt="HTML" title="HTML" style="width:38px; height:38px;">
 881 |         <img src="https://img.icons8.com/color/48/000000/css3.png" alt="CSS" title="CSS" style="width:38px; height:38px;">
 882 |         <img src="https://img.icons8.com/color/48/000000/javascript--v1.png" alt="JavaScript" title="JavaScript" style="width:38px; height:38px;">
 883 |         <img src="https://img.icons8.com/color/48/000000/python--v1.png" alt="Python" title="Python" style="width:38px; height:38px;">
 884 |       </div>
 885 |       <p style="font-size:1em; color:#000000; text-align:center;">
 886 |         I love building <span style="color:#007BFF; font-weight:bold;">modern</span> and <span style="color:#ffcc00; font-weight:bold;">responsive</span> websites that make an impact.
 887 |       </p>
 888 |       <div class="image" style="background-image: url('banar.jpg');"></div>
 889 |     </section>
 890 |     <section id="contact" aria-labelledby="contact-heading" class="content">
 891 |       <div class="contact" style="background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%); border-radius: 16px; box-shadow: 0 6px 24px rgba(0,123,255,0.10); padding: 2em 1.5em; margin-bottom: 2em;">
 892 |         <h2 id="contact-heading" style="font-size:2em; color:#007BFF; margin-bottom:1em; letter-spacing:1px; text-shadow:1px 2px 8px #b3c6e7;">Contact Me</h2>
 893 |         <div class="social-links" style="gap: 30px; margin-bottom: 2em; flex-wrap: wrap;">
 894 |             <a href="https://instagram.com/jahidhasan2.0ff" target="_blank"
 895 |              style="box-shadow: 0 4px 16px rgba(225,48,108,0.18); border: 2.5px solid #e1306c; background: linear-gradient(135deg, #e0c0ce 0%, #fbeff5 100%); transition: box-shadow 0.3s, border 0.3s, transform 0.3s; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px;">
 896 |             <img src="https://img.icons8.com/fluency/48/000000/instagram-new.png" alt="Instagram"
 897 |                style="border-radius: 50%; transition: transform 0.3s, box-shadow 0.3s; width: 38px; height: 38px; box-shadow: 0 2px 8px rgba(225,48,108,0.10);">
 898 |             </a>
 899 |             <a href="https://twitter.com/jahidhasan_tw" target="_blank"
 900 |              style="box-shadow: 0 4px 16px rgba(29,155,209,0.18); border: 2.5px solid #1da1f2; background: linear-gradient(135deg, #e8f7fe 0%, #f3fafd 100%); transition: box-shadow 0.3s, border 0.3s, transform 0.3s; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px;">
 901 |             <img src="https://img.icons8.com/color/48/000000/twitter--v1.png" alt="Twitter"
 902 |                style="border-radius: 50%; transition: transform 0.3s, box-shadow 0.3s; width: 38px; height: 38px; box-shadow: 0 2px 8px rgba(29,155,209,0.10);">
 903 |             </a>
 904 |             <a href="https://www.facebook.com/profile.php?id=61575663205505" target="_blank"
 905 |              style="box-shadow: 0 4px 16px rgba(24,119,242,0.18); border: 2.5px solid #1877f2; background: linear-gradient(135deg, #e8f0fe 0%, #f3f9fd 100%); transition: box-shadow 0.3s, border 0.3s, transform 0.3s; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px;">
 906 |             <img src="https://img.icons8.com/fluency/48/000000/facebook-new.png" alt="Facebook"
 907 |                style="border-radius: 50%; transition: transform 0.3s, box-shadow 0.3s; width: 38px; height: 38px; box-shadow: 0 2px 8px rgba(24,119,242,0.10);">
 908 |             </a>
 909 |         </div>
 910 |             <div style="display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 2em;">
 911 |               <a href="https://www.linkedin.com/in/jahidads/" target="_blank"
 912 |                  style="box-shadow: 0 4px 16px rgba(10,102,194,0.18); border: 2.5px solid #0a66c2; background: linear-gradient(135deg, #e8f0fe 0%, #f3f9fd 100%); transition: box-shadow 0.3s, border 0.3s, transform 0.3s; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px;">
 913 |                 <img src="https://img.icons8.com/?size=48&id=qNUNvR9aEWql&format=png"
 914 |                      alt="LinkedIn"
 915 |                      style="border-radius: 50%; transition: transform 0.3s, box-shadow 0.3s; width: 38px; height: 38px; box-shadow: 0 2px 8px rgba(10,102,194,0.10);">
 916 |               </a>
 917 |             </div>
 918 |         </div>
 919 |       </div>
 920 |       <style>
 921 |         @media (max-width: 600px) {
 922 |           #contact .contact {
 923 |             padding: 1em 0.5em;
 924 |           }
 925 |           #contact h2 {
 926 |             font-size: 1.3em !important;
 927 |           }
 928 |           #contact .social-links {
 929 |             gap: 15px !important;
 930 |           }
 931 |           #contact .social-links a img {
 932 |             width: 36px !important;
 933 |             height: 36px !important;
 934 |           }
 935 |           #contact .contact > div[style*="font-size:1.1em"] {
 936 |             font-size: 1em !important;
 937 |           }
 938 |           #contact .social-links {
 939 |             flex-direction: row !important;
 940 |             justify-content: center !important;
 941 |             flex-wrap: wrap !important;
 942 |           }
 943 |         }
 944 |         @media (max-width: 400px) {
 945 |           #contact .social-links {
 946 |             gap: 8px !important;
 947 |           }
 948 |           #contact .social-links a img {
 949 |             width: 28px !important;
 950 |             height: 28px !important;
 951 |           }
 952 |           #contact .contact {
 953 |             padding: 0.5em 0.2em;
 954 |           }
 955 |         }
 956 |       </style>
 957 |     </section>
 958 |     </section>
 959 |     <section id="expertise" style="margin-top: 1.2em;">
 960 |       <h1 style="text-align:center; color:#007BFF; margin-bottom:1em;">Expertise</h1>
 961 |       <div class="portfolio" style="flex-wrap: wrap; gap: 20px;">
 962 |         <div class="card section" style="background:#f5faff;">
 963 |             <h2 style="color:#0056b3; text-shadow:1px 2px 8px #b3c6e7; letter-spacing:1px; margin-bottom:0.5em;">AI: Development and Integration</h2>
 964 |             <p style="font-size:1.08em; color:#333; margin-bottom:1em; background:linear-gradient(90deg,#e0eafc 60%,#f5faff 100%); padding:0.7em 1em; border-radius:8px; box-shadow:0 2px 8px rgba(0,123,255,0.07);">
 965 |             We specialize in developing and integrating <span style="color:#007BFF; font-weight:bold;">AI solutions</span> for businesses, including machine learning, natural language processing, and computer vision.
 966 |             </p>
 967 |             <ul style="padding-left:18px; margin-bottom:0.5em;">
 968 |             <li style="margin-bottom:0.5em; color:#007BFF; font-weight:500; background:#e0eafc; border-radius:5px; padding:0.3em 0.7em;">
 969 |               <span style="color:#222;">Machine learning model development</span>
 970 |             </li>
 971 |             <li style="margin-bottom:0.5em; color:#801855; font-weight:500; background:#fbeff5; border-radius:5px; padding:0.3em 0.7em;">
 972 |               <span style="color:#222;">Natural language processing</span>
 973 |             </li>
 974 |             <li style="color:#0cb335; font-weight:500; background:#eafcf3; border-radius:5px; padding:0.3em 0.7em;">
 975 |               <span style="color:#222;">Computer vision</span>
 976 |             </li>
 977 |             </ul>
 978 |             <div style="display:flex; gap:10px; margin-top:1em;">
 979 |             <img src="png-transparent-ai-brain-configuration-ai-brain-setting-ai-brain-ai-mind-artificial-intelligence-brain-artificial-brain-3d-icon-thumbnail.png" alt="AI" title="AI" style="width:32px; height:32px;">
 980 |             <img src="png-transparent-brainstorming-creativity-brain-orange-people-hand-drawn-thumbnail.png" alt="Machine Learning" title="Machine Learning" style="width:32px; height:32px;">
 981 |             <img src="png-transparent-human-brain-psychology-mind-psychologist-brain-relaxing-s-art-scalable-vector-graphics-reality-thumbnail.png" alt="NLP" title="Natural Language Processing" style="width:32px; height:32px;">
 982 |             <img src="png-transparent-lateralization-of-brain-function-human-brain-brain-text-people-logo-thumbnail.png" alt="Computer Vision" title="Computer Vision" style="width:32px; height:32px;">
 983 |             </div>
 984 |         </div>
 985 |         <div class="card section" style="background:linear-gradient(120deg,#f5faff 60%,#e0eafc 100%); border: 1.5px solid #cce0ff; box-shadow: 0 6px 18px rgba(0,123,255,0.08); border-radius: 18px; padding: 2em 1.5em; transition: box-shadow 0.3s, transform 0.3s;">
 986 |           <h2 style="color:#0056b3; text-shadow:1px 2px 8px #b3c6e7; letter-spacing:1px; margin-bottom:0.5em;">Web: Design and Development</h2>
 987 |           <p style="font-size:1.08em; color:#333; margin-bottom:1em; background:linear-gradient(90deg,#e0eafc 60%,#f5faff 100%); padding:0.7em 1em; border-radius:8px; box-shadow:0 2px 8px rgba(0,123,255,0.07);">
 988 |             We design and develop <span style="color:#007BFF; font-weight:bold;">custom websites</span> and <span style="color:#801855; font-weight:bold;">web applications</span>, including e-commerce sites, blogs, and portfolios.
 989 |           </p>
 990 |           <ul style="padding-left:18px; margin-bottom:0.5em;">
 991 |             <li style="margin-bottom:0.5em; color:#007BFF; font-weight:500; background:#e0eafc; border-radius:5px; padding:0.3em 0.7em;">
 992 |               <span style="color:#222;">Custom website design</span>
 993 |             </li>
 994 |             <li style="margin-bottom:0.5em; color:#801855; font-weight:500; background:#fbeff5; border-radius:5px; padding:0.3em 0.7em;">
 995 |               <span style="color:#222;">Web application development</span>
 996 |             </li>
 997 |             <li style="color:#0cb335; font-weight:500; background:#eafcf3; border-radius:5px; padding:0.3em 0.7em;">
 998 |               <span style="color:#222;">E-commerce solutions</span>
 999 |             </li>
1000 |           </ul>
1001 |           <div style="display:flex; gap:10px; margin-top:1em;">
1002 |             <img src="web-design.png" alt="Web Design" title="Web Design" style="width:32px; height:32px;">
1003 |             <img src="source-code.png" alt="Web Development" title="Web Development" style="width:32px; height:32px;">
1004 |             <img src="shopping-cart.png" alt="E-commerce" title="E-commerce" style="width:32px; height:32px;">
1005 |           </div>
1006 |         </div>
1007 |         <div class="card section" style="background: linear-gradient(120deg, #f5faff 60%, #e0eafc 100%); border: 1.5px solid #cce0ff; box-shadow: 0 6px 18px rgba(0,123,255,0.08); border-radius: 18px; padding: 2em 1.5em; transition: box-shadow 0.3s, transform 0.3s;">
1008 |           <h2 style="color:#0056b3; text-shadow:1px 2px 8px #b3c6e7; letter-spacing:1px; margin-bottom:0.5em;">Cybersecurity: Protection and Consulting</h2>
1009 |           <p style="font-size:1.08em; color:#333; margin-bottom:1em; background:linear-gradient(90deg,#e0eafc 60%,#f5faff 100%); padding:0.7em 1em; border-radius:8px; box-shadow:0 2px 8px rgba(0,123,255,0.07);">
1010 |             We provide <span style="color:#007BFF; font-weight:bold;">cybersecurity protection</span> and <span style="color:#801855; font-weight:bold;">consulting services</span>, including penetration testing, vulnerability assessments, and incident response.
1011 |           </p>
1012 |           <ul style="padding-left:18px; margin-bottom:0.5em;">
1013 |             <li style="margin-bottom:0.5em; color:#007BFF; font-weight:500; background:#e0eafc; border-radius:5px; padding:0.3em 0.7em;">
1014 |               <span style="color:#222;">Penetration testing</span>
1015 |             </li>
1016 |             <li style="margin-bottom:0.5em; color:#801855; font-weight:500; background:#fbeff5; border-radius:5px; padding:0.3em 0.7em;">
1017 |               <span style="color:#222;">Vulnerability assessments</span>
1018 |             </li>
1019 |             <li style="color:#0cb335; font-weight:500; background:#eafcf3; border-radius:5px; padding:0.3em 0.7em;">
1020 |               <span style="color:#222;">Incident response</span>
1021 |             </li>
1022 |           </ul>
1023 |           <div style="display:flex; gap:10px; margin-top:1em;">
1024 |             <img src="hacker-logo-or-hacker-in-black-hoodie-cyber-crime-with-laptop-free-png (1).webp" alt="Penetration Testing" title="Penetration Testing" style="width:32px; height:32px;">
1025 |             <img src="png-transparent-risk-assessment-risk-management-plan-others-saving-text-plan-thumbnail.png" alt="Vulnerability Assessment" title="Vulnerability Assessment" style="width:32px; height:32px;">
1026 |             <img src="png-transparent-risk-management-risk-register-risk-assessment-management-philosophy-angle-company-text-thumbnail.png" alt="Incident Response" title="Incident Response" style="width:32px; height:32px;">
1027 |           </div>
1028 |         </div>
1029 |         <div class="card section" style="background: linear-gradient(120deg, #f5faff 60%, #e0eafc 100%); border: 1.5px solid #cce0ff; box-shadow: 0 6px 18px rgba(0,123,255,0.08); border-radius: 18px; padding: 2em 1.5em; transition: box-shadow 0.3s, transform 0.3s;">
1030 |           <h2 style="color:#0056b3; text-shadow:1px 2px 8px #b3c6e7; letter-spacing:1px; margin-bottom:0.5em;">Data: Analysis and Visualization</h2>
1031 |           <p style="font-size:1.08em; color:#333; margin-bottom:1em; background:linear-gradient(90deg,#e0eafc 60%,#f5faff 100%); padding:0.7em 1em; border-radius:8px; box-shadow:0 2px 8px rgba(0,123,255,0.07);">
1032 |             We analyze and visualize data to help businesses make informed decisions, including data mining, predictive analytics, and data visualization.
1033 |           </p>
1034 |           <ul style="padding-left:18px; margin-bottom:0.5em;">
1035 |             <li style="margin-bottom:0.5em; color:#007BFF; font-weight:500; background:#e0eafc; border-radius:5px; padding:0.3em 0.7em;">
1036 |               <span style="color:#222;">Data mining</span>
1037 |             </li>
1038 |             <li style="margin-bottom:0.5em; color:#801855; font-weight:500; background:#fbeff5; border-radius:5px; padding:0.3em 0.7em;">
1039 |               <span style="color:#222;">Predictive analytics</span>
1040 |             </li>
1041 |             <li style="color:#0cb335; font-weight:500; background:#eafcf3; border-radius:5px; padding:0.3em 0.7em;">
1042 |               <span style="color:#222;">Data visualization</span>
1043 |             </li>
1044 |           </ul>
1045 |           <div style="display:flex; gap:10px; margin-top:1em;">
1046 |             <img src="combo-chart--v1.png" alt="Data Mining" title="Data Mining" style="width:32px; height:32px;">
1047 |             <img src="artificial-intelligence.png" alt="Predictive Analytics" title="Predictive Analytics" style="width:32px; height:32px;">
1048 |             <img src="png-transparent-computer-icons-big-data-database-data-base-angle-rectangle-black-thumbnail.png" alt="Data Visualization" title="Data Visualization" style="width:32px; height:32px;">
1049 |           </div>
1050 |         </div>
1051 |         <div class="card section" style="background: linear-gradient(120deg, #f5faff 60%, #e0eafc 100%); border: 1.5px solid #cce0ff; box-shadow: 0 6px 18px rgba(0,123,255,0.08); border-radius: 18px; padding: 2em 1.5em; transition: box-shadow 0.3s, transform 0.3s;">
1052 |           <h2 style="color:#0056b3; text-shadow:1px 2px 8px #b3c6e7; letter-spacing:1px; margin-bottom:0.5em;">Cloud: Migration and Management</h2>
1053 |           <p style="font-size:1.08em; color:#333; margin-bottom:1em; background:linear-gradient(90deg,#e0eafc 60%,#f5faff 100%); padding:0.7em 1em; border-radius:8px; box-shadow:0 2px 8px rgba(0,123,255,0.07);">
1054 |             We help businesses migrate to the cloud and manage their cloud infrastructure, including cloud security, cloud storage, and cloud computing.
1055 |           </p>
1056 |           <ul style="padding-left:18px; margin-bottom:0.5em;">
1057 |             <li style="margin-bottom:0.5em; color:#007BFF; font-weight:500; background:#e0eafc; border-radius:5px; padding:0.3em 0.7em;">
1058 |               <span style="color:#222;">Cloud migration</span>
1059 |             </li>
1060 |             <li style="margin-bottom:0.5em; color:#801855; font-weight:500; background:#fbeff5; border-radius:5px; padding:0.3em 0.7em;">
1061 |               <span style="color:#222;">Cloud security</span>
1062 |             </li>
1063 |             <li style="color:#0cb335; font-weight:500; background:#eafcf3; border-radius:5px; padding:0.3em 0.7em;">
1064 |               <span style="color:#222;">Cloud storage</span>
1065 |             </li>
1066 |           </ul>
1067 |           <div style="display:flex; gap:10px; margin-top:1em;">
1068 |             <img src="png-transparent-computer-icons-data-security-data-migration-cloud-secure-text-logo-data-thumbnail.png" alt="Cloud Migration" title="Cloud Migration" style="width:32px; height:32px;">
1069 |             <img src="png-transparent-cloud-computing-security-computer-security-cloud-storage-information-technology-cloud-computing-computer-network-cloud-computer-thumbnail.png" alt="Cloud Security" title="Cloud Security" style="width:32px; height:32px;">
1070 |             <img src="cloud-storage.png" alt="Cloud Storage" title="Cloud Storage" style="width:32px; height:32px;">
1071 |           </div>
1072 |         </div>
1073 |       </div>
1074 |     </section>
1075 |     </div>
1076 |     <section id="comment" class="content">
1077 |       <div class="card comment-section" style="max-width: 400px; margin: 0 auto; background: #f7faff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,123,255,0.07); padding: 2em 1.5em;">
1078 |       <h1 style="text-align:center; color:#007BFF; margin-bottom:0.5em;">Comments</h1>
1079 |       <h2 style="text-align:center; color:#555; font-size:1.2em; margin-bottom:1.5em;">Leave a Comment</h2>
1080 |       <form id="commentForm" style="display:flex; flex-direction:column; gap:15px;">
1081 |         <input type="text" name="yourname" placeholder="Your Name" required style="padding:12px; border-radius:6px; border:1px solid #cce0ff; font-size:1em;">
1082 |         <input type="url" name="yourwebsite" placeholder="Your Website" required style="padding:12px; border-radius:6px; border:1px solid #cce0ff; font-size:1em;">
1083 |         <input type="email" name="youremail" placeholder="Your Email" required style="padding:12px; border-radius:6px; border:1px solid #cce0ff; font-size:1em;">
1084 |         <button type="submit" style="background:linear-gradient(90deg,#007BFF,#0056b3); color:#fff; border:none; border-radius:6px; padding:12px; font-size:1em; font-weight:bold; cursor:pointer; transition:background 0.3s;">Submit</button>
1085 |       </form>
1086 |       <p id="thankYouMessage" style="display:none; color:lightgreen; text-align:center; margin-top:1em;">Thank you for your comment!</p>
1087 |       </div>
1088 |     </section>
1089 |   <footer>
1090 |     <p>&copy; 2025 Jahidads Web designer and Developer</p>
1091 |   </footer>
1092 |   <script>
1093 |   let lastScrollTop = 0;
1094 |   const navbar = document.querySelector('nav');
1095 | 
1096 |   window.addEventListener('scroll', () => {
1097 |     if (window.innerWidth >= 1024) {
1098 |       // Disable navbar movement on desktop devices
1099 |       navbar.style.top = '0';
1100 |       return;
1101 |     }
1102 | 
1103 |     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
1104 |     if (scrollTop > lastScrollTop) {
1105 |       // Scrolling down
1106 |       navbar.style.top = '-70px'; // Adjust height as per navbar height
1107 |     } else {
1108 |       // Scrolling up
1109 |       navbar.style.top = '0';
1110 |     }
1111 |     lastScrollTop = scrollTop;
1112 |   });
1113 | 
1114 |   document.querySelector('.card:nth-child(1)').addEventListener('click', () => {
1115 |     window.open('https://www.facebook.com/jahidads1', '_blank'); // Replace 'https://example.com' with the desired URL
1116 |   });
1117 | 
1118 |   document.querySelector('.card:nth-child(2)').addEventListener('click', () => {
1119 |     window.open('https://jahidads.github.io/Cyber-Security/', '_blank'); // Replace with the desired URL for Project 2
1120 |   });
1121 | 
1122 |   document.querySelector('.card:nth-child(3)').addEventListener('click', () => {
1123 |     window.open('https://jahidads.github.io/business-portfolio/', '_blank'); // Replace with the desired URL for Project 3
1124 |   });
1125 | 
1126 |   document.querySelector('.card:nth-child(4)').addEventListener('click', () => {
1127 |     window.open('https://jahidads.github.io/Developer-portfolio/', '_blank'); // Replace with the desired URL for Project 4
1128 |   });
1129 | 
1130 |   document.querySelector('.card:nth-child(5)').addEventListener('click', () => {
1131 |     window.open('https://jahidads.github.io/my-traditional-website/', '_blank'); // Replace with the desired URL for Project 5
1132 |   });
1133 | 
1134 |   document.querySelector('.card:nth-child(6)').addEventListener('click', () => {
1135 |     window.open('https://jahidads.github.io/Resume-Portfolio/', '_blank'); // Replace with the desired URL for Project 6
1136 |   });
1137 | 
1138 |   document.querySelector('.card:nth-child(7)').addEventListener('click', () => {
1139 |     window.open('https://jahidads.github.io/Web-Developer/', '_blank'); // Replace with the desired URL for Project 7
1140 |   });
1141 | 
1142 |   document.querySelector('.card:nth-child(8)').addEventListener('click', () => {
1143 |     window.open('https://jahidads.github.io/CyberShield/', '_blank'); // Replace with the desired URL for Project 8
1144 |   });
1145 | 
1146 |   document.querySelector('.card:nth-child(9)').addEventListener('click', () => {
1147 |     window.open('https://jahidads.github.io/TeamPro/', '_blank'); // Replace with the desired URL for Project 9
1148 |   });
1149 | 
1150 |   document.getElementById('commentForm').addEventListener('submit', function(event) {
1151 |     event.preventDefault(); // Prevent the default form submission
1152 | 
1153 |     // Show the thank you message
1154 |     document.getElementById('thankYouMessage').style.display = 'block';
1155 | 
1156 |     // Optionally, you can also clear the form fields
1157 |     this.reset();
1158 |   });
1159 | </script>
1160 | </body>
1161 | </html>
1162 | 


--------------------------------------------------------------------------------