المشاركات

Responsive Personal Portfolio Website

Hello Guys, how are you? I think all of you are doing well. I am Shozon Roy back with a new topic about "Creating a Responsive Personal Portfolio Website in HTML CSS JS and Bootstrap". Let's dive into the details of how to create this template!

In today's digital world, having a personal portfolio website is essential for professionals across industries. It serves as your digital business card, showcasing your skills, projects, and achievements. A well-designed portfolio can make the difference between landing your dream job or client and being overlooked.

Creating a responsive portfolio ensures your site looks great on any device – from desktops to smartphones. In this guide, I'll walk you through building a professional portfolio website from scratch using HTML, CSS, JavaScript, and Bootstrap

Step 1: HTML Structure

First, we'll create the HTML structure of our portfolio. This will include sections for the header, about me, skills, projects, and contact information.

1. HTML Structure

index.html


     
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Shozon Roy | Frontend Developer & UI/UX Designer </title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
   <link rel="stylesheet" href="style.css" type="text/css" media="all" />
 </head>
 <body>
   <!-- Background elements -->
   <div class="bg-gradient"> </div>
   <div class="particles">
     <div class="particle"> </div>
     <div class="particle"> </div>
     <div class="particle"> </div>
     <div class="particle"> </div>
     <div class="particle"> </div>
     <div class="particle"> </div>
   </div>

   <div class="container">
     <!-- Header with profile information -->
     <header>
       <div class="profile">
         <div class="profile-img-container">
           <img src="https://i.postimg.cc/HLMMQ92J/IMG-20240925-000206-700.jpg" alt="Shozon Roy" class="profile-img">
         </div>
         <h1>Shozon Roy  <i class="bi bi-patch-check-fill" style="color: #3897F0; font-size: 0.7em; vertical-align: center;"> </i> </h1>
         <p class="tagline">Frontend Developer & UI/UX Designer </p>
         <div class="location">
           <i class="fas fa-map-marker-alt"> </i> Dinajpur, Bangladesh
         </div>
       </div>
     </header>

     <!-- Social media links -->
     <div class="social-links">
       <a href="https://facebook.com/" target="_blank" class="social-btn" aria-label="Facebook">
         <i class="fab fa-facebook"> </i>
       </a>
       <a href="https://instagram.com/" target="_blank" class="social-btn" aria-label="Instagram">
         <i class="fab fa-instagram"> </i>
       </a>
       <a href="https://twitter.com/" target="_blank" class="social-btn" aria-label="Twitter/X">
         <i class="fab fa-twitter"> </i>
       </a>
       <a href="https://github.com/" target="_blank" class="social-btn" aria-label="GitHub">
         <i class="fab fa-github"> </i>
       </a>
       <a href="https://t.me/" target="_blank" class="social-btn" aria-label="Telegram">
         <i class="fab fa-telegram-plane"> </i>
       </a>
       <a href="mailto:contact@shozonroy.com" class="social-btn" aria-label="Email">
         <i class="fas fa-envelope"> </i>
       </a>
     </div>

     <!-- Navigation tabs -->
     <div class="tabs-container">
       <ul class="tabs">
         <li class="active" data-tab="about-tab"> <i class="fas fa-user"> </i> About </li>
         <li data-tab="projects-tab"> <i class="fas fa-code"> </i> Projects </li>
         <li data-tab="skills-tab"> <i class="fas fa-laptop-code"> </i> Skills </li>
         <li data-tab="blog-tab"> <i class="fas fa-feather-alt"> </i> Blog </li>
         <li data-tab="contact-tab"> <i class="fas fa-envelope"> </i> Contact </li>
       </ul>
     </div>

     <!-- Tab contents -->
     <!-- About Tab -->
     <div class="tab-content active" id="about-tab">
       <div class="about-me">
         <h3 class="section-title">About Me </h3>
         <p>
          Hi, I'm  <strong>Shozon Roy </strong>, a  <strong>Frontend Developer, UI/UX Designer, and Tech Blogger </strong> from  <strong>Dinajpur, Bangladesh </strong>.  
          I have a deep passion for creating beautiful and functional user interfaces, specializing in  <strong>frontend development and UI/UX design </strong>.  
         </p>
         <p>
          With over  <strong>500+ web projects </strong> built, I have extensive experience in  <strong>HTML, CSS, JavaScript, Bootstrap, jQuery, and Tailwind CSS </strong>.  
          While I have some backend knowledge in  <strong>PHP and Python </strong>, my main focus is on crafting  <strong>modern, user-friendly, and interactive web experiences </strong>.  
         </p>
         <p>
          Additionally, I have created  <strong>15+ Android apps </strong> using  <strong>Sketchware </strong> and have a strong understanding of  <strong>UI/UX principles, prototyping, and design tools like Figma and Framer </strong>.  
         </p>
         <p>
          Beyond coding and design, I run a  <strong>tech blog </strong> where I have published  <strong>40+ articles </strong> on  <strong>web technologies, UI/UX trends, and industry insights </strong>.  
          I love sharing my knowledge and helping others learn about frontend development and design.  
         </p>

         <div class="skill-highlight">
           <h4>What I Do Best </h4>
           <div class="skill-grid">
             <div class="skill-item">
               <div class="skill-icon">
                 <i class="fas fa-code"> </i>
               </div>
               <div class="skill-content">
                 <strong>Frontend Development </strong>
                 <p>Expert in HTML, CSS, JavaScript, React, Bootstrap, jQuery, and Tailwind CSS </p>
               </div>
             </div>
             <div class="skill-item">
               <div class="skill-icon">
                 <i class="fas fa-palette"> </i>
               </div>
               <div class="skill-content">
                 <strong>UI/UX Design & Prototyping </strong>
                 <p>Professional designs with Figma, Framer, and deep understanding of UX principles </p>
               </div>
             </div>
             <div class="skill-item">
               <div class="skill-icon">
                 <i class="fas fa-mobile-alt"> </i>
               </div>
               <div class="skill-content">
                 <strong>Mobile App Development </strong>
                 <p>Created 15+ Android apps using Sketchware with beautiful UI and smooth UX </p>
               </div>
             </div>
             <div class="skill-item">
               <div class="skill-icon">
                 <i class="fas fa-feather-alt"> </i>
               </div>
               <div class="skill-content">
                 <strong>Tech Blogging </strong>
                 <p>Published 40+ articles on web technologies and UI/UX design trends </p>
               </div>
             </div>
           </div>
         </div>

         <p>
          I'm always excited to collaborate, learn new technologies, and push the boundaries of web design.  
           <strong>Let's connect and create something amazing together! </strong>  
         </p>
       </div>
     </div>

     <!-- Projects Tab -->
     <div class="tab-content" id="projects-tab">
       <h3 class="section-title">Featured Projects </h3>
       <div class="projects-grid">
         <!-- Project 1 -->
         <div class="project-card" style="--index: 1">
           <div class="project-image">
             <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y29kaW5nfGVufDB8fDB8fHww" alt="E-Commerce Platform">
             <div class="project-overlay">
               <span class="project-category">Web App </span>
             </div>
           </div>
           <div class="project-content">
             <h4>E-Commerce Platform </h4>
             <p>A fully responsive e-commerce website with product filtering, cart functionality, and secure payment integration. </p>
             <div class="project-tags">
               <span class="project-tag">React </span>
               <span class="project-tag">Tailwind CSS </span>
               <span class="project-tag">Stripe </span>
             </div>
             <a href="#" class="project-link">View Project  <i class="fas fa-arrow-right"> </i> </a>
           </div>
         </div>

         <!-- Project 2 -->
         <div class="project-card" style="--index: 2">
           <div class="project-image">
             <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bW9iaWxlJTIwYXBwfGVufDB8fDB8fHww" alt="Health Tracker App">
             <div class="project-overlay">
               <span class="project-category">Mobile App </span>
             </div>
           </div>
           <div class="project-content">
             <h4>Health Tracker App </h4>
             <p>A comprehensive health tracking application with workout plans, nutrition tracking, and progress analytics. </p>
             <div class="project-tags">
               <span class="project-tag">Sketchware </span>
               <span class="project-tag">Firebase </span>
               <span class="project-tag">Material Design </span>
             </div>
             <a href="#" class="project-link">View Project  <i class="fas fa-arrow-right"> </i> </a>
           </div>
         </div>

         <!-- Project 3 -->
         <div class="project-card" style="--index: 3">
           <div class="project-image">
             <img src="https://images.unsplash.com/photo-1573867639040-6dd25fa5f597?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8ZGVzaWdufGVufDB8fDB8fHww" alt="Design Portfolio">
             <div class="project-overlay">
               <span class="project-category">UI/UX Design </span>
             </div>
           </div>
           <div class="project-content">
             <h4>Design System Portfolio </h4>
             <p>A comprehensive design system with reusable components, color palettes, and typography guidelines for consistent branding. </p>
             <div class="project-tags">
               <span class="project-tag">Figma </span>
               <span class="project-tag">Framer </span>
               <span class="project-tag">Design Systems </span>
             </div>
             <a href="#" class="project-link">View Project  <i class="fas fa-arrow-right"> </i> </a>
           </div>
         </div>
       </div>
     </div>

     <!-- Skills Tab -->
     <div class="tab-content" id="skills-tab">
       <h3 class="section-title">My Skills </h3>
       <div class="skills-container">
         <!-- Frontend Development -->
         <div class="skill-category">
           <h4>Frontend Development </h4>
           <div class="skill-items">
             <span class="skill-tag" style="--index: 1">HTML5 </span>
             <span class="skill-tag" style="--index: 2">CSS3 </span>
             <span class="skill-tag" style="--index: 3">JavaScript </span>
             <span class="skill-tag" style="--index: 4">React.js </span>
             <span class="skill-tag" style="--index: 5">jQuery </span>
             <span class="skill-tag" style="--index: 6">Bootstrap </span>
             <span class="skill-tag" style="--index: 7">Tailwind CSS </span>
             <span class="skill-tag" style="--index: 8">SASS/SCSS </span>
             <span class="skill-tag" style="--index: 9">Responsive Design </span>
           </div>
         </div>

         <!-- UI/UX Design -->
         <div class="skill-category">
           <h4>UI/UX Design </h4>
           <div class="skill-items">
             <span class="skill-tag" style="--index: 1">Figma </span>
             <span class="skill-tag" style="--index: 2">Framer </span>
             <span class="skill-tag" style="--index: 3">Adobe XD </span>
             <span class="skill-tag" style="--index: 4">Photoshop </span>
             <span class="skill-tag" style="--index: 5">Illustrator </span>
             <span class="skill-tag" style="--index: 6">Wireframing </span>
             <span class="skill-tag" style="--index: 7">Prototyping </span>
             <span class="skill-tag" style="--index: 8">User Research </span>
             <span class="skill-tag" style="--index: 9">Design Systems </span>
           </div>
         </div>

         <!-- Mobile Development -->
         <div class="skill-category">
           <h4>Mobile Development </h4>
           <div class="skill-items">
             <span class="skill-tag" style="--index: 1">Sketchware </span>
             <span class="skill-tag" style="--index: 2">Android Development </span>
             <span class="skill-tag" style="--index: 3">Mobile UI Design </span>
             <span class="skill-tag" style="--index: 4">Responsive Layouts </span>
             <span class="skill-tag" style="--index: 5">Progressive Web Apps </span>
           </div>
         </div>

         <!-- Other Skills -->
         <div class="skill-category">
           <h4>Other Skills </h4>
           <div class="skill-items">
             <span class="skill-tag" style="--index: 1">Git/GitHub </span>
             <span class="skill-tag" style="--index: 2">PHP </span>
             <span class="skill-tag" style="--index: 3">Python </span>
             <span class="skill-tag" style="--index: 4">WordPress </span>
             <span class="skill-tag" style="--index: 5">SEO </span>
             <span class="skill-tag" style="--index: 6">Technical Writing </span>
             <span class="skill-tag" style="--index: 7">Content Creation </span>
           </div>
         </div>
       </div>
     </div>

     <!-- Blog Tab -->
     <div class="tab-content" id="blog-tab">
       <h3 class="section-title">From My Blog </h3>
       <div class="blog-posts">
         <!-- Blog Post 1 -->
         <div class="blog-card" style="--index: 1">
           <div class="blog-image">
             <img src="https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHdlYiUyMGRlc2lnbnxlbnwwfHwwfHx8MA%3D%3D" alt="Blog Post">
           </div>
           <div class="blog-content">
             <div class="blog-meta">
               <div class="blog-date"> <i class="far fa-calendar-alt"> </i> June 15, 2023 </div>
               <div class="blog-category">Web Design </div>
             </div>
             <h4>The Future of Web Design: Trends to Watch in 2023 </h4>
             <p class="blog-excerpt">
              Explore the emerging trends in web design that are shaping the digital landscape in 2023, from immersive 3D elements to micro-interactions that enhance user experience.
             </p>
             <a href="https://shozonroy.blogspot.com/" target="_blank" class="read-more">Read Article  <i class="fas fa-arrow-right"> </i> </a>
           </div>
         </div>

         <!-- Blog Post 2 -->
         <div class="blog-card" style="--index: 2">
           <div class="blog-image">
             <img src="https://images.unsplash.com/photo-1593720213428-28a5b9e94613?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d2ViJTIwZGV2ZWxvcG1lbnR8ZW58MHx8MHx8fDA%3D" alt="Blog Post">
           </div>
           <div class="blog-content">
             <div class="blog-meta">
               <div class="blog-date"> <i class="far fa-calendar-alt"> </i> May 28, 2023 </div>
               <div class="blog-category">JavaScript </div>
             </div>
             <h4>Mastering Modern JavaScript: Essential Tips for Frontend Developers </h4>
             <p class="blog-excerpt">
              Dive into advanced JavaScript concepts and techniques that every frontend developer should know to build more efficient and maintainable web applications.
             </p>
             <a href="https://shozonroy.blogspot.com/" target="_blank" class="read-more">Read Article  <i class="fas fa-arrow-right"> </i> </a>
           </div>
         </div>

         <!-- Blog Post 3 -->
         <div class="blog-card" style="--index: 3">
           <div class="blog-image">
             <img src="https://images.unsplash.com/photo-1618788372246-79faff0c3742?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8dWklMjB1eHxlbnwwfHwwfHx8MA%3D%3D" alt="Blog Post">
           </div>
           <div class="blog-content">
             <div class="blog-meta">
               <div class="blog-date"> <i class="far fa-calendar-alt"> </i> April 10, 2023 </div>
               <div class="blog-category">UI/UX </div>
             </div>
             <h4>From Concept to Prototype: A Guide to the UI/UX Design Process </h4>
             <p class="blog-excerpt">
              Learn the step-by-step process of creating effective UI/UX designs, from initial research and wireframing to final prototyping and user testing.
             </p>
             <a href="https://shozonroy.blogspot.com/" target="_blank" class="read-more">Read Article  <i class="fas fa-arrow-right"> </i> </a>
           </div>
         </div>
       </div>
     </div>

     <!-- Contact Tab -->
     <div class="tab-content" id="contact-tab">
       <h3 class="section-title">Get In Touch </h3>
       <p style="color: var(--text-secondary); margin-bottom: 2rem;">
        Feel free to reach out if you're looking for a developer, have a question, or just want to connect.
       </p>
       <form class="contact-form" id="contactForm">
         <div class="form-group">
           <label for="name">Your Name </label>
           <input type="text" id="name" class="form-control" required>
         </div>
         <div class="form-group">
           <label for="email">Your Email </label>
           <input type="email" id="email" class="form-control" required>
         </div>
         <div class="form-group">
           <label for="message">Your Message </label>
           <textarea id="message" class="form-control" required> </textarea>
         </div>
         <button type="submit" class="submit-btn">
           <i class="fas fa-paper-plane"> </i> Send Message
         </button>
       </form>
     </div>

     <!-- Footer -->
     <footer>
       <p>© 2023 Shozon Roy. All rights reserved. | Made with  <i class="fas fa-heart" style="color: var(--accent-color);"> </i> in Bangladesh </p>
     </footer>
   </div>

   <!-- Scroll to top button -->
   <div class="scroll-top" id="scrollTop">
     <i class="fas fa-arrow-up"> </i>
   </div>
 <script src="scriot.js" type="text/javascript" charset="utf-8"> </script>
 </body>
 </html>

Step 2: Styling with CSS

Next, we'll add custom styling to our portfolio using CSS. While Bootstrap provides a lot of styling out of the box, we'll add our personal touch to make the portfolio unique.

2. CSS Styling

Let's add some modern styling to make our application visually appealing:

styles.css


     :root {
      --primary-color: #6366F1;
      --secondary-color: #8B5CF6;
      --accent-color: #EC4899;
      --background-dark: #111827;
      --background-card: #1F2937;
      --text-primary: #F9FAFB;
      --text-secondary: #D1D5DB;
      --text-muted: #9CA3AF;
      --border-color: #374151;
      --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      --gradient-primary: linear-gradient(135deg, #6366F1, #4F46E5);
      --gradient-secondary: linear-gradient(135deg, #8B5CF6, #7C3AED);
      --gradient-accent: linear-gradient(135deg, #EC4899, #DB2777);
      --gradient-main: linear-gradient(135deg, #6366F1, #EC4899);
      --success-color: #10B981;
      --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.3);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Poppins', sans-serif;
      background-color: var(--background-dark);
      color: var(--text-primary);
      line-height: 1.6;
      overflow-x: hidden;
      position: relative;
      min-height: 100vh;
    }

    .bg-gradient {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: var(--background-dark);
      overflow: hidden;
    }

    .bg-gradient::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(17, 24, 39, 0) 70%);
      transform: rotate(15deg);
    }

    .bg-gradient::after {
      content: '';
      position: absolute;
      bottom: -50%;
      left: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, rgba(17, 24, 39, 0) 70%);
      transform: rotate(-15deg);
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 3rem 1.5rem;
      position: relative;
      z-index: 1;
    }

    /* Animated particles */
    .particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }

    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: rgba(99, 102, 241, 0.5);
      border-radius: 50%;
      animation: float 20s infinite linear;
    }

    .particle:nth-child(1) {
      top: 20%;
      left: 10%;
      animation-duration: 25s;
      animation-delay: 0s;
      opacity: 0.4;
    }

    .particle:nth-child(2) {
      top: 60%;
      left: 80%;
      animation-duration: 30s;
      animation-delay: 1s;
      opacity: 0.3;
    }

    .particle:nth-child(3) {
      top: 40%;
      left: 30%;
      animation-duration: 22s;
      animation-delay: 2s;
      opacity: 0.5;
    }

    .particle:nth-child(4) {
      top: 80%;
      left: 50%;
      animation-duration: 28s;
      animation-delay: 1.5s;
      opacity: 0.2;
    }

    .particle:nth-child(5) {
      top: 15%;
      left: 70%;
      animation-duration: 26s;
      animation-delay: 3s;
      opacity: 0.6;
    }

    .particle:nth-child(6) {
      top: 75%;
      left: 15%;
      animation-duration: 32s;
      animation-delay: 2.5s;
      opacity: 0.3;
    }

    @keyframes float {
      0% {
        transform: translate(0, 0) rotate(0deg);
      }
      50% {
        transform: translate(100px, 100px) rotate(180deg);
      }
      100% {
        transform: translate(0, 0) rotate(360deg);
      }
    }

    /* Header styles */
    header {
      text-align: center;
      margin-bottom: 3rem;
      position: relative;
    }

    .profile {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding: 2rem 0;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s forwards 0.2s;
    }

    .profile-img-container {
      position: relative;
      width: 160px;
      height: 160px;
      margin-bottom: 1.5rem;
    }

    .profile-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid var(--background-card);
      box-shadow: var(--shadow-glow);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      position: relative;
      z-index: 2;
    }

    .profile-img:hover {
      transform: scale(1.05);
      box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
    }

    .profile-img-container::before {
      content: '';
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
      border-radius: 50%;
      background: var(--gradient-main);
      z-index: 1;
      animation: rotate 10s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .profile h1 {
      font-size: 2.8rem;
      margin-bottom: 0.5rem;
      background: var(--gradient-main);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 700;
      letter-spacing: -0.5px;
      position: relative;
      display: inline-block;
    }

    .profile h1::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 4px;
      background: var(--gradient-main);
      border-radius: 10px;
    }

    .tagline {
      color: var(--text-secondary);
      font-size: 1.2rem;
      font-weight: 500;
      margin-bottom: 1.5rem;
      opacity: 0.9;
    }

    .location {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 1rem;
      margin-bottom: 2rem;
    }

    .location i {
      margin-right: 0.5rem;
      color: var(--accent-color);
    }

    /* Social links */
    .social-links {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1.2rem;
      margin-bottom: 3rem;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s forwards 0.4s;
    }

    .social-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      color: white;
      background: var(--gradient-primary);
      transition: all 0.3s ease;
      text-decoration: none;
      box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
      position: relative;
      overflow: hidden;
    }

    .social-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--gradient-accent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .social-btn:hover {
      transform: translateY(-5px) scale(1.1);
      box-shadow: 0 10px 25px rgba(236, 72, 153, 0.4);
    }

    .social-btn:hover::before {
      opacity: 1;
    }

    .social-btn i {
      font-size: 1.4rem;
      position: relative;
      z-index: 1;
    }

    /* Navigation tabs */
    .tabs-container {
      margin-bottom: 3rem;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s forwards 0.6s;
    }

    .tabs {
      display: flex;
      list-style: none;
      background-color: var(--background-card);
      border-radius: 20px;
      box-shadow: var(--card-shadow);
      overflow: hidden;
      position: relative;
      z-index: 5;
    }

    .tabs::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(99, 102, 241, 0.05), rgba(236, 72, 153, 0.05));
      z-index: -1;
    }

    .tabs li {
      flex: 1;
      text-align: center;
      padding: 1rem 0.5rem;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      font-size: 0.9rem;
      position: relative;
      overflow: hidden;
      color: var(--text-muted);
      border-radius: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      white-space: nowrap;
    }

    .tabs li::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 3px;
      background: var(--gradient-main);
      transition: width 0.3s ease;
      border-radius: 3px 3px 0 0;
    }

    .tabs li.active {
      color: var(--primary-color);
      background-color: rgba(99, 102, 241, 0.1);
    }

    .tabs li.active::before {
      width: 60%;
    }

    .tabs li:not(.active):hover {
      background-color: rgba(99, 102, 241, 0.05);
      color: var(--text-secondary);
    }

    .tabs li:not(.active):hover::before {
      width: 20%;
    }

    .tabs li i {
      margin-right: 8px;
      font-size: 1.1rem;
    }

    /* Tab content */
    .tab-content {
      display: none;
      animation: fadeIn 0.5s;
      background-color: var(--background-card);
      border-radius: 20px;
      padding: 2.5rem;
      box-shadow: var(--card-shadow);
      margin-bottom: 3rem;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid var(--border-color);
      opacity: 0;
      transform: translateY(20px);
    }

    .tab-content.active {
      display: block;
      animation: fadeInUp 0.5s forwards;
    }

    .tab-content::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 150px;
      height: 150px;
      background: radial-gradient(circle, rgba(99,102,241,0.05) 0%, rgba(17,24,39,0) 70%);
      border-radius: 0 0 0 100%;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeInUp {
      from { 
        opacity: 0;
        transform: translateY(20px);
      }
      to { 
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* About section */
    .section-title {
      color: var(--primary-color);
      margin-bottom: 1.8rem;
      font-size: 1.8rem;
      position: relative;
      padding-bottom: 0.8rem;
      display: inline-block;
    }

    .section-title::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 4px;
      background: var(--gradient-main);
      border-radius: 10px;
    }

    .about-me p {
      margin-bottom: 1.5rem;
      font-size: 1.05rem;
      color: var(--text-secondary);
      line-height: 1.8;
    }

    .about-me strong {
      color: var(--primary-color);
      font-weight: 600;
    }

    .about-me i {
      color: var(--success-color);
      margin-right: 8px;
    }

    .skill-highlight {
      background-color: rgba(99, 102, 241, 0.15);
      border-radius: 12px;
      padding: 2rem;
      margin: 2rem 0;
      border-left: 4px solid var(--primary-color);
    }

    .skill-highlight h4 {
      color: var(--text-primary);
      margin-bottom: 1.2rem;
      font-size: 1.3rem;
    }

    .skill-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1rem;
      color: var(--text-secondary);
    }

    .skill-item i {
      color: var(--primary-color);
      font-size: 1.1rem;
      margin-right: 10px;
      margin-top: 3px;
    }

    /* Projects section */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 30px;
      margin-top: 1.8rem;
    }

    .project-card {
      background-color: rgba(31, 41, 55, 0.7);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transition: all 0.4s ease;
      position: relative;
      top: 0;
      border: 1px solid var(--border-color);
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.5s forwards;
      animation-delay: calc(var(--index) * 0.1s);
    }

    .project-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
      border-color: rgba(99, 102, 241, 0.3);
    }

    .project-image {
      height: 200px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s ease;
    }

    .project-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    .project-image::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70%;
      background: linear-gradient(to top, rgba(17, 24, 39, 0.9), rgba(17, 24, 39, 0));
    }

    .project-card:hover .project-image img {
      transform: scale(1.1);
    }

    .project-overlay {
      position: absolute;
      top: 15px;
      left: 15px;
      z-index: 2;
    }

    .project-category {
      display: inline-block;
      background-color: rgba(99, 102, 241, 0.9);
      color: white;
      font-size: 0.8rem;
      font-weight: 600;
      padding: 6px 15px;
      border-radius: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .project-content {
      padding: 1.5rem;
    }

    .project-card h4 {
      color: var(--text-primary);
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 0.8rem;
    }

    .project-card p {
      font-size: 0.95rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 1.5rem;
    }

    .project-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 1.5rem;
    }

    .project-tag {
      font-size: 0.75rem;
      background-color: rgba(55, 65, 81, 0.7);
      color: var(--text-secondary);
      padding: 4px 10px;
      border-radius: 20px;
    }

    .project-link {
      display: inline-block;
      background: var(--gradient-primary);
      color: white;
      text-align: center;
      padding: 0.8rem 1.5rem;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
      z-index: 1;
      box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
    }

    .project-link::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--gradient-accent);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .project-link:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
    }

    .project-link:hover::before {
      opacity: 1;
    }

    .project-link i {
      margin-left: 8px;
    }

    /* Skills section */
    .skills-container {
      display: flex;
      flex-direction: column;
      gap: 35px;
      margin-top: 1.8rem;
    }

    .skill-category {
      background-color: rgba(31, 41, 55, 0.7);
      border-radius: 16px;
      padding: 2rem;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }

    .skill-category:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      border-color: rgba(99, 102, 241, 0.3);
    }

    .skill-category h4 {
      margin-bottom: 1.5rem;
      color: var(--primary-color);
      font-size: 1.3rem;
      position: relative;
      display: inline-block;
      padding-bottom: 0.5rem;
    }

    .skill-category h4::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 3px;
      background: var(--gradient-main);
      border-radius: 10px;
    }

    .skill-items {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    .skill-tag {
      position: relative;
      background: rgba(55, 65, 81, 0.7);
      color: var(--text-secondary);
      padding: 10px 20px;
      border-radius: 30px;
      font-size: 0.95rem;
      font-weight: 500;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      transition: all 0.3s;
      overflow: hidden;
      z-index: 1;
      border: 1px solid var(--border-color);
      opacity: 0;
      transform: translateY(10px);
      animation: fadeInUp 0.5s forwards;
      animation-delay: calc(var(--index) * 0.1s);
    }

    .skill-tag::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--gradient-main);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .skill-tag:hover {
      transform: translateY(-3px) scale(1.05);
      color: white;
      box-shadow: 0 6px 15px rgba(99, 102, 241, 0.3);
    }

    .skill-tag:hover::before {
      opacity: 1;
    }

    /* Blog section */
    .blog-posts {
      display: flex;
      flex-direction: column;
      gap: 30px;
      margin-top: 1.8rem;
    }

    .blog-card {
      display: flex;
      flex-direction: column;
      background-color: rgba(31, 41, 55, 0.7);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transition: all 0.4s ease;
      border: 1px solid var(--border-color);
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.5s forwards;
      animation-delay: calc(var(--index) * 0.1s);
    }

    .blog-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      border-color: rgba(99, 102, 241, 0.3);
    }

    .blog-image {
      height: 220px;
      overflow: hidden;
    }

    .blog-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    .blog-card:hover .blog-image img {
      transform: scale(1.1);
    }

    .blog-content {
      padding: 1.8rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .blog-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      font-size: 0.9rem;
      color: var(--text-muted);
    }

    .blog-date i {
      margin-right: 6px;
      color: var(--primary-color);
    }

    .blog-category {
      background-color: rgba(99, 102, 241, 0.2);
      color: var(--primary-color);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 500;
    }

    .blog-card h4 {
      font-size: 1.4rem;
      margin-bottom: 1rem;
      color: var(--text-primary);
      line-height: 1.4;
    }

    .blog-excerpt {
      color: var(--text-muted);
      margin-bottom: 1.5rem;
      line-height: 1.6;
      flex: 1;
    }

    .read-more {
      display: inline-block;
      color: var(--primary-color);
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s;
      position: relative;
    }

    .read-more::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--gradient-main);
      transition: width 0.3s ease;
    }

    .read-more:hover {
      color: var(--accent-color);
    }

    .read-more:hover::after {
      width: 100%;
    }

    .read-more i {
      margin-left: 6px;
      transition: transform 0.3s ease;
    }

    .read-more:hover i {
      transform: translateX(5px);
    }

    /* Contact section */
    .contact-form {
      margin-top: 1.8rem;
    }

    .form-group {
      margin-bottom: 1.5rem;
      position: relative;
    }

    .form-group label {
      display: block;
      margin-bottom: 0.8rem;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .form-control {
      width: 100%;
      padding: 1rem 1.2rem;
      background-color: rgba(31, 41, 55, 0.8);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      transition: all 0.3s;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
      background-color: rgba(31, 41, 55, 0.9);
    }

    textarea.form-control {
      min-height: 150px;
      resize: vertical;
    }

    .submit-btn {
      display: inline-block;
      background: var(--gradient-primary);
      color: white;
      border: none;
      padding: 1rem 2rem;
      border-radius: 30px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .submit-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--gradient-accent);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .submit-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
    }

    .submit-btn:hover::before {
      opacity: 1;
    }

    .submit-btn i {
      margin-right: 8px;
    }

    /* Footer */
    footer {
      text-align: center;
      padding: 2rem 0;
      color: var(--text-muted);
      font-size: 0.9rem;
      position: relative;
    }

    footer a {
      color: var(--primary-color);
      text-decoration: none;
      transition: color 0.3s;
    }

    footer a:hover {
      color: var(--accent-color);
    }

    /* Scroll to top button */
    .scroll-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background: var(--gradient-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
      z-index: 100;
    }

    .scroll-top.visible {
      opacity: 1;
      visibility: visible;
    }

    .scroll-top:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
      background: var(--gradient-accent);
    }

    /* Media Queries */
    @media (max-width: 768px) {
      .container {
        padding: 2rem 1rem;
      }

      .profile h1 {
        font-size: 2.2rem;
      }

      .tagline {
        font-size: 1rem;
      }

      .tabs {
        padding: 6px;
        gap: 4px;
      }

      .tabs li {
        padding: 0.8rem 0.4rem;
        font-size: 0.8rem;
      }

      .tabs li i {
        font-size: 0.9rem;
      }

      .tab-content {
        padding: 2rem 1.5rem;
      }

      .section-title {
        font-size: 1.5rem;
      }

      .projects-grid {
        grid-template-columns: 1fr;
      }

      .blog-card {
        flex-direction: column;
      }

      .blog-image {
        width: 100%;
        height: 200px;
      }
    }

    @media (max-width: 480px) {
      .profile-img-container {
        width: 140px;
        height: 140px;
      }

      .profile h1 {
        font-size: 1.8rem;
      }

      .social-btn {
        width: 50px;
        height: 50px;
      }

      .tabs li {
        padding: 0.6rem 0.3rem;
        font-size: 0.7rem;
      }

      .tabs li i {
        font-size: 0.8rem;
      }

      .section-title {
        font-size: 1.4rem;
      }

      .skill-tag {
        font-size: 0.85rem;
        padding: 8px 15px;
      }

      .submit-btn {
        width: 100%;
      }
    }

    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 20px;
      border-radius: 10px;
      background-color: var(--background-card);
      border-left: 4px solid var(--primary-color);
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 1000;
      max-width: 350px;
      transform: translateX(120%);
      transition: transform 0.3s ease;
    }

    .notification.show {
      transform: translateX(0);
    }

    .notification.success {
      border-left-color: var(--success-color);
    }

    .notification.error {
      border-left-color: #EF4444;
    }

    .notification-content {
      display: flex;
      align-items: center;
    }

    .notification-content i {
      font-size: 1.2rem;
      margin-right: 10px;
    }

    .notification.success .notification-content i {
      color: var(--success-color);
    }

    .notification.error .notification-content i {
      color: #EF4444;
    }

    .notification p {
      color: var(--text-secondary);
      font-size: 0.95rem;
    }

    .close-notification {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 0.9rem;
      margin-left: 15px;
      transition: color 0.3s;
    }

    .close-notification:hover {
      color: var(--text-primary);
    }

Step 3: Adding Interactivity with JavaScript

3. JavaScript Implementation

Finally, we'll enhance our portfolio with JavaScript to add interactivity and animations, making the user experience more engaging.

script.js


     document.addEventListener('DOMContentLoaded', function() {
      // Add animated entrance for elements
      const animateElements = () => {
        document.body.classList.add('loaded');
      };

      // Animate elements on page load
      setTimeout(animateElements, 300);

      // Tab navigation with smooth transitions
      const tabs = document.querySelectorAll('.tabs li');
      const tabContents = document.querySelectorAll('.tab-content');

      tabs.forEach(tab => {
        tab.addEventListener('click', () => {
          // Don't do anything if the tab is already active
          if (tab.classList.contains('active')) return;

          // Remove active class from all tabs
          tabs.forEach(t => t.classList.remove('active'));

          // Fade out current content before switching
          const activeContent = document.querySelector('.tab-content.active');
          if (activeContent) {
            activeContent.style.opacity = '0';
            activeContent.style.transform = 'translateY(10px)';

            setTimeout(() => {
              tabContents.forEach(content => content.classList.remove('active'));

              // Add active class to clicked tab and corresponding content
              tab.classList.add('active');
              const tabId = tab.getAttribute('data-tab');
              const newContent = document.getElementById(tabId);
              newContent.classList.add('active');

              // Force reflow for animation
              void newContent.offsetWidth;

              // Fade in new content
              newContent.style.opacity = '';
              newContent.style.transform = '';
            }, 200);
          }
        });
      });

      // Initialize project cards for animation
      const projectCards = document.querySelectorAll('.project-card');
      projectCards.forEach((card, index) => {
        card.style.setProperty('--index', index + 1);
      });

      // Initialize skill tags for animation
      const skillCategories = document.querySelectorAll('.skill-category');
      skillCategories.forEach(category => {
        const skillTags = category.querySelectorAll('.skill-tag');
        skillTags.forEach((tag, index) => {
          tag.style.setProperty('--index', index + 1);
        });
      });

      // Initialize blog cards for animation
      const blogCards = document.querySelectorAll('.blog-card');
      blogCards.forEach((card, index) => {
        card.style.setProperty('--index', index + 1);
      });

      // Contact form submission
      const contactForm = document.getElementById('contactForm');
      if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
          e.preventDefault();

          // Get form values
          const name = document.getElementById('name').value.trim();
          const email = document.getElementById('email').value.trim();
          const message = document.getElementById('message').value.trim();

          // Validate inputs
          if (name === '' || email === '' || message === '') {
            showNotification('Please fill all required fields', 'error');
            return;
          }

          // Simulate form submission
          const submitBtn = this.querySelector('.submit-btn');
          const originalText = submitBtn.innerHTML;
          submitBtn.disabled = true;
          submitBtn.innerHTML = ' Sending...';

          setTimeout(() => {
            // Show success notification
            showNotification('Thank you for your message! I will get back to you soon.', 'success');

            // Reset form
            contactForm.reset();

            // Reset button
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
          }, 1500);
        });
      }

      // Scroll to top functionality
      const scrollTopBtn = document.getElementById('scrollTop');

      const toggleScrollTopButton = () => {
        if (window.scrollY > 300) {
          scrollTopBtn.classList.add('visible');
        } else {
          scrollTopBtn.classList.remove('visible');
        }
      };

      window.addEventListener('scroll', toggleScrollTopButton);

      scrollTopBtn.addEventListener('click', () => {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });

      // Animation on scroll for skill tags and cards
      const animateOnScroll = () => {
        const elements = document.querySelectorAll('.skill-tag, .project-card, .blog-card');

        elements.forEach(element => {
          const elementTop = element.getBoundingClientRect().top;
          const elementVisible = 150;

          if (elementTop < window.innerHeight - elementVisible) {
            element.classList.add('visible');
          }
        });
      };

      // Initial check for elements in view
      setTimeout(animateOnScroll, 500);

      // Add scroll event listener
      window.addEventListener('scroll', animateOnScroll);

      // Custom notification function
      window.showNotification = function(message, type = 'success') {
        // Remove existing notification if any
        const existingNotification = document.querySelector('.notification');
        if (existingNotification) {
          existingNotification.remove();
        }

        // Create notification element
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.innerHTML = `
          
            
            ${message}
          
          
        `;

        // Add to DOM
        document.body.appendChild(notification);

        // Animate in
        setTimeout(() => {
          notification.classList.add('show');
        }, 10);

        // Auto remove after 5 seconds
        const removeTimeout = setTimeout(() => {
          notification.classList.remove('show');
          setTimeout(() => {
            notification.remove();
          }, 300);
        }, 5000);

        // Close button functionality
        notification.querySelector('.close-notification').addEventListener('click', () => {
          clearTimeout(removeTimeout);
          notification.classList.remove('show');
          setTimeout(() => {
            notification.remove();
          }, 300);
        });
      }
    });

Code copied successfully!

Wrapping Up

By following these three steps, you've created a responsive personal portfolio website that showcases your skills and projects professionally. The combination of HTML's structure, CSS's styling, and JavaScript's interactivity, enhanced by Bootstrap's responsive framework, gives you a powerful toolkit for creating an impressive online presence.

Remember to customize the content with your personal information, projects, and skills. Regularly update your portfolio with new projects and achievements to keep it current and relevant. Your portfolio is a living document that grows with your career.

hope this guide has been helpful in starting your journey toward creating a stunning portfolio website. Feel free to experiment with different designs and features to make it truly your own!

আমি সজন রায় । কন্টেন্ট রাইটার, ছোট-খাটো লেখক, কখনো এডিটর, সামান্য প্রোগ্রামিং এর নেশা , কখনো গ্রাফিক্স ডিজাইনার , কখনো ওয়েব/এপ ডেভলপমেন্টের হালকা নেশায় আসক্ত । বিজ্ঞান ও প্রযুক্তিকে জানা এবং অন্য…

ShozonCodeLab

Responsive Personal Portfolio Website

1. HTML Structure

2. CSS Styling

3. JavaScript Implementation

Wrapping Up

قد تُعجبك هذه المشاركات

إرسال تعليق

APMODY

Cookie Consent

Oops!