Code Showcase with YouTube Video

Code & Video Showcase

Code Examples

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tabrej Azam - Portfolio</title>
    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <style></style>
  </head>
  <body>
    <!-- Header -->
    <header class="header">
      <div class="container">
        <div class="header-content">
          <div class="logo">
            <i data-lucide="target"></i>
            <span>Tabrej Azam</span>
          </div>
          <nav class="desktop-nav">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#expertise">Expertise</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
          </nav>
          <button class="mobile-menu-btn" aria-label="Toggle menu">
            <i data-lucide="menu"></i>
          </button>
        </div>
      </div>
      <nav class="mobile-nav">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#expertise">Expertise</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>

    <!-- Hero Section -->
    <section id="home" class="hero">
      <div class="container">
        <div class="hero-content">
          <div class="hero-text">
            <h1>
              Hi, I'm Tabrej Azam
              <br />
              <span class="text-gray">
                I'm a <span id="typed-text"></span>
              </span>
            </h1>
            <p>
              "I am an excellent digital designer. I have the ability to
              understand clients' needs in the best possible way. The designs
              that clients request, I create even better ones that make them
              happy. You can give me a chance to prove myself."
            </p>
            <a href="#contact" class="cta-button">
              Give Me a Chance
              <i data-lucide="arrow-right"></i>
            </a>
          </div>
          <div class="hero-image">
            <img
              src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj8vNoNctO5ES9mUvNxwtVOcfFOl_BCC6LTgAU4bLcQmuFlTuoHd180QJGN1UxFiBO_u2ubOIoLnSTQhkSUV9b2SEWtbqcb7tmyZskYYgBSF12s_LDtzD1pNqQo5THIf16tJ3lHE6tEqFktnTZjbGC7KiXwWnmxmhPsN15FpuJt3ttV_1_UbdhDE4-b8U/s1600/1737831626750.webp"
              alt="Tabrej Azam"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about">
      <div class="container">
        <h2>About Me</h2>
        <div class="about-content">
          <div class="about-text">
            <p>
              With extensive experience in digital design, I have created over
              800+ designs and helped 27+ clients grow their social media
              accounts. I specialize in understanding client needs and
              translating them into creative, innovative solutions that exceed
              expectations. My focus is on crafting user-centered designs that
              seamlessly combine aesthetics and functionality, delivering
              impactful visuals and engaging experiences that drive results.
            </p>
            <div class="achievements-grid">
              <div class="achievement">
                <i data-lucide="award"></i>
                <span>Certified by Canva "Design Guru"</span>
              </div>
              <div class="achievement">
                <i data-lucide="briefcase"></i>
                <span>3+ years experience</span>
              </div>
              <div class="achievement">
                <i data-lucide="graduation-cap"></i>
                <span>Diploma in Design</span>
              </div>
            </div>
          </div>
          <div class="key-achievements">
            <h3>Key Achievements</h3>
            <ul>
              <li><span>1</span>I have created nearly 800+ digital designs</li>
              <li><span>2</span>Managed and Grown 17+ clients' social media</li>
              <li><span>3</span>Received Canva's 'Design Guru' certificate</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Expertise Section -->
    <section id="expertise" class="expertise">
      <div class="container">
        <h2>Expertise</h2>
        <div class="skills-grid">
          <div class="skill-card">
            <div class="skill-header">
              <i data-lucide="paintbrush"></i>
              <h3>Canva</h3>
            </div>
            <div class="skill-bar">
              <div class="skill-progress" style="width: 95%"></div>
            </div>
            <span>95% proficiency</span>
          </div>
          <div class="skill-card">
            <div class="skill-header">
              <i data-lucide="image"></i>
              <h3>Photoshop</h3>
            </div>
            <div class="skill-bar">
              <div class="skill-progress" style="width: 70%"></div>
            </div>
            <span>70% proficiency</span>
          </div>
          <div class="skill-card">
            <div class="skill-header">
              <i data-lucide="palette"></i>
              <h3>Figma</h3>
            </div>
            <div class="skill-bar">
              <div class="skill-progress" style="width: 65%"></div>
            </div>
            <span>65% proficiency</span>
          </div>
        </div>
      </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="projects">
      <div class="container">
        <h2>New Projects</h2>
        <div class="projects-carousel">
          <button class="carousel-btn prev">
            <i data-lucide="arrow-left"></i>
          </button>
          <div class="projects-container">
            <div class="project-card">
              <div class="project-image">
                <img
                  src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?auto=format&fit=crop&q=80&w=800"
                  alt="Brand Identity Design"
                />
                <div class="project-overlay">
                  <button class="view-project" data-project="brand">
                    View Project
                    <i data-lucide="chart-no-axes-gantt"></i>
                  </button>
                </div>
              </div>
              <div class="project-info">
                <h3>Brand Identity Design</h3>
                <p>Complete brand redesign for a tech startup</p>
              </div>
            </div>
            <div class="project-card">
              <div class="project-image">
                <img
                  src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?auto=format&fit=crop&q=80&w=800"
                  alt="Mobile App UI"
                />
                <div class="project-overlay">
                  <button class="view-project" data-project="mobile">
                    View Project
                    <i data-lucide="chart-no-axes-gantt"></i>
                  </button>
                </div>
              </div>
              <div class="project-info">
                <h3>Mobile App UI</h3>
                <p>User interface design for a fitness tracking app</p>
              </div>
            </div>
            <div class="project-card">
              <div class="project-image">
                <img
                  src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&q=80&w=800"
                  alt="Website Redesign"
                />
                <div class="project-overlay">
                  <button class="view-project" data-project="website">
                    View Project
                    <i data-lucide="chart-no-axes-gantt"></i>
                  </button>
                </div>
              </div>
              <div class="project-info">
                <h3>Website Redesign</h3>
                <p>E-commerce website redesign project</p>
              </div>
            </div>
            <div class="project-card">
              <div class="project-image">
                <img
                  src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&q=80&w=800"
                  alt="Website Redesign"
                />
                <div class="project-overlay">
                  <button class="view-project" data-project="digital">
                    View Project
                    <i data-lucide="chart-no-axes-gantt"></i>
                  </button>
                </div>
              </div>
              <div class="project-info">
                <h3>Digital Marketing</h3>
                <p>Social media campaign design</p>
              </div>
            </div>
            <div class="project-card">
              <div class="project-image">
                <img
                  src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&q=80&w=800"
                  alt="Website Redesign"
                />
                <div class="project-overlay">
                  <button class="view-project" data-project="logo">
                    View Project
                    <i data-lucide="chart-no-axes-gantt"></i>
                  </button>
                </div>
              </div>
              <div class="project-info">
                <h3>Logo Design</h3>
                <p>Creative logo design portfolio</p>
              </div>
            </div>
            <div class="project-card">
              <div class="project-image">
                <img
                  src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&q=80&w=800"
                  alt="Website Redesign"
                />
                <div class="project-overlay">
                  <button class="view-project" data-project="print">
                    View Project
                    <i data-lucide="chart-no-axes-gantt"></i>
                  </button>
                </div>
              </div>
              <div class="project-info">
                <h3>Print Design</h3>
                <p>Business cards and brochure design</p>
              </div>
            </div>
          </div>
          <button class="carousel-btn next">
            <i data-lucide="arrow-right"></i>
          </button>
        </div>
      </div>
    </section>

    <!-- Projects Modal -->
    <div class="modal-overlay" id="projectModal">
      <div class="modal-container">
        <div class="modal-header">
          <h3 class="modal-title" id="modalTitle">Project Gallery</h3>
          <button class="modal-close" id="closeModal">
            <i data-lucide="x"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="modal-images" id="modalImages">
            <!-- Images will be dynamically loaded here -->
          </div>
        </div>
      </div>
    </div>

    <!-- Contact Section -->
    <section id="contact" class="contact">
      <div class="container">
        <h2>Give a Shot</h2>
        <div class="contact-content">
          <div class="contact-image">
            <img
              src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh99fxqHXaOdchDQ06Z_6OVRxbYkwCt4bS8koCHz8kKXZDqXt8cmW9mgrmP7EmrFjIwQ66QQzrcR8yRcEEhZshTpyYC-2YDOlqls1M6bx22rx9DbFfoI5Y7GAG0TFDjQ5Ijn_OlfrQgxuDHJXdCEVHVlqLk687xmmFisa18FS3m-NFYGt3O0s8upD8p0UY/s1600/1737809473088.webp"
              alt="Tabrej Azam"
            />
          </div>
          <div class="contact-info">
            <div class="contact-item">
              <div class="icon-wrapper">
                <i data-lucide="mail"></i>
              </div>
              <div>
                <p class="label">Email</p>
                <p class="value">youremail@gmail.com</p>
              </div>
            </div>
            <div class="contact-item">
              <div class="icon-wrapper">
                <i data-lucide="phone"></i>
              </div>
              <div>
                <p class="label">Phone</p>
                <p class="value">+00 9875432160</p>
              </div>
            </div>
            <div class="contact-item">
              <div class="icon-wrapper">
                <i data-lucide="globe"></i>
              </div>
              <div>
                <p class="label">Website</p>
                <p class="value">www.yourwebsite.com</p>
              </div>
            </div>
            <div class="contact-item">
              <div class="icon-wrapper">
                <i data-lucide="map-pin"></i>
              </div>
              <div>
                <p class="label">Location</p>
                <p class="value">yourcity, yourstate, Country - pincode</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-info">
            <p class="copyright">
              © <span id="year"></span> All rights reserved.
            </p>
          </div>
        </div>
      </div>
      <button id="scroll-top" aria-label="Scroll to top">
        <i data-lucide="arrow-up"></i>
      </button>
    </footer>

    <Script></Script>
  </body>
</html>

CSS Code

Copy HTML code to unlock CSS

 :root {
     --primary-color: #000;
     --text-color: #1d1b1b;
     --text-gray: #323232;
     --bg-gray: #f9fafb;
     --white: #fff;
     --transition: 0.3s ease;
 }

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

 html {
     scroll-behavior: smooth;
 }

 .blog-posts.hfeed.container {
     padding: 0;
 }

 body {
     font-family: system-ui, -apple-system, sans-serif;
     line-height: 1.5;
     color: var(--text-color);
 }

 .container {
     width: 100%;
     margin: 0 auto;
     padding: 0 1rem;
     background-color: var(--bg-main);
 }

 h2 {
     font-size: 3rem;
     font-weight: bold;
     line-height: normal;
     text-align: center;
     margin-bottom: 2rem;
 }

 /* Header */
 .header {
     position: fixed;
     width: 100%;
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(8px);
     z-index: 50;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }

 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem 0;
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-weight: bold;
     font-size: 1.25rem;
 }

 .desktop-nav {
     display: none;
 }

 .mobile-menu-btn {
     background: none;
     border: none;
     cursor: pointer;
     padding: 0.5rem;
 }

 .mobile-nav {
     display: none;
     background: var(--white);
     border-top: 1px solid #eee;
 }

 .mobile-nav.active {
     display: block;
 }

 .mobile-nav a {
     display: block;
     padding: 0.75rem 4rem;
     color: var(--text-color);
     text-decoration: none;
 }

 .mobile-nav a:hover {
     background: var(--bg-gray);
 }

 @media (min-width: 768px) {
     .mobile-menu-btn {
         display: none;
     }

     .desktop-nav {
         display: flex;
         gap: 2rem;
     }

     .desktop-nav a {
         color: var(--text-color);
         text-decoration: none;
         transition: var(--transition);
     }

     .desktop-nav a:hover {
         color: var(--primary-color);
     }
 }

 @media (max-width: 768px) {
     .header-content {
         padding: 0.5rem;
     }
 }

 /* Hero Section */
 .hero {
     min-height: 100vh;
     padding-top: 5rem;
     display: flex;
     align-items: center;
 }

 .hero-content {
     display: grid;
     gap: 3rem;
     align-items: center;
 }

 .hero h1 {
     font-size: 2.3rem;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }

 .hero p {
     font-size: 1.25rem;
     color: var(--text-gray);
     margin-bottom: 2rem;
 }

 .cta-button {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.75rem 1.5rem;
     background: var(--primary-color);
     color: var(--white);
     text-decoration: none;
     border-radius: 9999px;
     border: 1px solid black;
     transition: var(--transition);
 }

 .cta-button:hover {
     color: var(--primary-color);
     background: var(--white);
     border: 1px solid black;
 }

 .hero-image {
     position: relative;
     border-radius: 0 1rem 10rem 2rem;
     overflow: hidden;
     transition: var(--transition);
 }

 .hero-image:hover {
     transform: scale(1.02);
 }

 .hero-image img {
     width: 100%;
     height: auto;
     display: block;
 }

 @media (min-width: 768px) {
     .hero-content {
         grid-template-columns: repeat(2, 1fr);
     }

     .hero h1 {
         font-size: 4rem;
     }
 }

 /* About Section */
 .about {
     padding: 5rem 0;
     background: var(--bg-gray);
 }

 .about-content {
     display: grid;
     gap: 3rem;
 }

 .achievements-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
     margin-top: 1.5rem;
 }

 .achievement {
     display: flex;
     align-items: center;
     gap: 0.75rem;
 }

 .key-achievements ul {
     list-style: none;
 }

 .key-achievements li {
     display: flex;
     align-items: start;
     margin-bottom: 1rem;
 }

 .key-achievements span {
     width: 1.5rem;
     height: 1.5rem;
     background: var(--primary-color);
     color: var(--white);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.875rem;
     margin-right: 0.75rem;
 }

 .key-achievements h3 {
     padding-bottom: 1rem;
 }

 svg.lucide.lucide-award,
 svg.lucide.lucide-briefcase {
     width: 40px;
     height: 24px;
 }

 svg.lucide.lucide-graduation-cap {
     width: 24px;
     height: 24px;
 }

 @media (min-width: 768px) {
     .about-content {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* Expertise Section */
 .expertise {
     padding: 5rem 0;
 }

 .skills-grid {
     display: grid;
     gap: 2rem;
 }

 .skill-card {
     background: var(--white);
     padding: 1.5rem;
     border-radius: 0.75rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: var(--transition);
 }

 .skill-card:hover {
     box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
 }

 .skill-header {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 1rem;
 }

 .skill-header h3 {
     font-size: 1.25rem;
 }

 .skill-bar {
     width: 100%;
     height: 0.625rem;
     background: #eee;
     border-radius: 9999px;
     overflow: hidden;
     margin-bottom: 0.5rem;
 }

 .skill-progress {
     height: 100%;
     background: var(--primary-color);
     border-radius: 9999px;
     transition: width 1s ease-out;
 }

 @media (min-width: 768px) {
     .skills-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 /* Projects Section */
 .projects {
     padding: 5rem 0;
     background: var(--bg-gray);
 }

 .projects-carousel {
     position: relative;
 }

 .projects-container {
     display: flex;
     gap: 1.5rem;
     overflow-x: auto;
     scroll-behavior: smooth;
     scrollbar-width: none;
     padding: 1rem 0;
 }

 .projects-container::-webkit-scrollbar {
     display: none;
 }

 .project-card {
     min-width: 300px;
     background: var(--white);
     border-radius: 0.75rem;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 .project-image {
     position: relative;
     overflow: hidden;
 }

 .project-image img {
     width: 100%;
     height: 12rem;
     object-fit: cover;
     transition: var(--transition);
 }

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

 .project-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: var(--transition);
 }

 .project-card:hover .project-overlay {
     opacity: 1;
 }

 .view-project {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 1rem;
     background: var(--white);
     color: var(--primary-color);
     border: none;
     border-radius: 9999px;
     cursor: pointer;
 }

 .project-info {
     padding: 1.5rem;
 }

 .carousel-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: var(--white);
     border: none;
     border-radius: 50%;
     width: 2.5rem;
     height: 2.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     z-index: 10;
 }

 .carousel-btn.prev {
     left: 0;
 }

 .carousel-btn.next {
     right: 0;
 }

 @media (min-width: 768px) {
     .project-card {
         min-width: 400px;
     }
 }

 /* Modal Styles */
 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transition: all var(--transition);
 }

 .modal-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .modal-container {
     background: var(--white);
     border-radius: 1rem;
     max-width: 90vw;
     max-height: 90vh;
     width: 600px;
     position: relative;
     transform: scale(0.8);
     transition: transform var(--transition);
 }

 .modal-overlay.active .modal-container {
     transform: scale(1);
 }

 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
     border-bottom: 1px solid #eee;
 }

 .modal-title {
     font-size: 1.5rem;
     font-weight: bold;
     margin: 0;
 }

 .modal-close {
     background: none;
     border: none;
     cursor: pointer;
     padding: 0.5rem;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .modal-close:hover {
     background: var(--bg-gray);
 }

 .modal-body {
     padding: 1.5rem;
     max-height: 70vh;
     overflow-y: auto;
 }

 .modal-images {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .modal-image {
     width: 100%;
     border-radius: 0.5rem;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: var(--transition);
 }

 .modal-image:hover {
     transform: scale(1.02);
 }

 .modal-image img {
     width: 100%;
     height: auto;
     display: block;
 }

 .modal-image-title {
     padding: 1rem;
     background: var(--bg-gray);
     font-weight: 500;
     text-align: center;
 }

 /* Scrollbar Styles for Modal */
 .modal-body::-webkit-scrollbar {
     width: 8px;
 }

 .modal-body::-webkit-scrollbar-track {
     background: #f1f1f1;
     border-radius: 10px;
 }

 .modal-body::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 10px;
 }

 .modal-body::-webkit-scrollbar-thumb:hover {
     background: #999;
 }

 @media (max-width: 768px) {
     .modal-container {
         width: 95vw;
         max-height: 85vh;
     }

     .modal-header {
         padding: 1rem;
     }

     .modal-body {
         padding: 1rem;
         max-height: 65vh;
     }

     .modal-title {
         font-size: 1.25rem;
     }
 }

 /* Contact Section */
 .contact {
     padding-top: 5rem;
     padding-bottom: 1rem;
 }

 .contact-content {
     display: grid;
     gap: 3rem;
 }

 .contact-image {
     position: relative;
     border-radius: 10rem 0 10rem 0;
     overflow: hidden;
 }

 .contact-image img {
     width: 100%;
     height: auto;
     display: block;
     transition: var(--transition);
 }

 .contact-image:hover img {
     transform: scale(1.02);
 }

 .contact-info {
     display: flex;
     flex-direction: column;
     gap: 2rem;
 }

 .contact-item {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .icon-wrapper {
     padding: 0.75rem;
     background: var(--bg-gray);
     border-radius: 9999px;
     width: 3rem;
     height: 3rem;
     transition: var(--transition);
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .contact-item:hover .icon-wrapper {
     background: var(--primary-color);
     color: var(--white);
 }

 .label {
     font-size: 0.875rem;
     color: var(--text-gray);
 }

 @media (min-width: 768px) {
     .contact-content {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* Footer */
 .footer {
     background: var(--primary-color);
     color: var(--white);
     padding: 1rem 0;
     position: relative;
 }

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

 .footer-info .copyright {
     color: #999;
 }

 #scroll-top {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     background: var(--primary-color);
     color: var(--white);
     width: 3rem;
     height: 3rem;
     border: none;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     transition: var(--transition);
     opacity: 0;
     visibility: hidden;
 }

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

 #scroll-top:hover {
     background: #333;
 }

JavaScript Code

Copy CSS code to unlock JavaScript

// Sample project data
const projectData = {
    brand: {
        title: "Brand Identity Design",
        images: [
            {
                url: "#",
                title: "Logo Design Concept",
            },
            {
                url: "#",
                title: "Brand Color Palette",
            },
            {
                url: "#",
                title: "Business Card Design",
            },
            {
                url: "#",
                title: "Brand Guidelines",
            },
            {
                url: "#",
                title: "Brand Application",
            },
        ],
    },
    mobile: {
        title: "Mobile App UI Design",
        images: [
            {
                url: "#",
                title: "App Onboarding Screen",
            },
            {
                url: "#",
                title: "Dashboard Interface",
            },
            {
                url: "#",
                title: "User Profile Screen",
            },
            {
                url: "#",
                title: "Settings Interface",
            },
        ],
    },
    website: {
        title: "Website Design Portfolio",
        images: [
            {
                url: "#",
                title: "Homepage Design",
            },
            {
                url: "#",
                title: "Product Page Layout",
            },
            {
                url: "#",
                title: "Contact Form Design",
            },
            {
                url: "#",
                title: "About Page Layout",
            },
            {
                url: "#",
                title: "Blog Section Design",
            },
        ],
    },
    digital: {
        title: "Digital Marketing Designs",
        images: [
            {
                url: "#",
                title: "Social Media Post Design",
            },
            {
                url: "#",
                title: "Instagram Story Template",
            },
            {
                url: "#",
                title: "Facebook Ad Design",
            },
            {
                url: "#",
                title: "Email Campaign Design",
            },
        ],
    },
    logo: {
        title: "Logo Design Collection",
        images: [
            {
                url: "#",
                title: "Tech Startup Logo",
            },
            {
                url: "#",
                title: "Restaurant Logo Design",
            },
            {
                url: "#",
                title: "Fashion Brand Logo",
            },
            {
                url: "#",
                title: "Corporate Identity",
            },
            {
                url: "#",
                title: "Minimalist Logo Design",
            },
        ],
    },
    print: {
        title: "Print Design Projects",
        images: [
            {
                url: "#",
                title: "Business Card Collection",
            },
            {
                url: "#",
                title: "Brochure Design",
            },
            {
                url: "#",
                title: "Flyer Design",
            },
            {
                url: "#",
                title: "Poster Design",
            },
        ],
    },
};

// Initialize Typed.js
const typed = new Typed("#typed-text", {
    strings: ["UI/UX Designer", "Digital Artist", " Web Designer"],
    typeSpeed: 50,
    backSpeed: 50,
    loop: true,
});

// Mobile Menu Toggle
const menuBtn = document.querySelector(".mobile-menu-btn");
const mobileNav = document.querySelector(".mobile-nav");
const menuIcon = menuBtn.querySelector('[data-lucide="menu"]');

menuBtn.addEventListener("click", () => {
    mobileNav.classList.toggle("active");
    const isOpen = mobileNav.classList.contains("active");
    menuIcon.setAttribute("data-lucide", isOpen ? "x" : "menu");
    lucide.createIcons();
});

// Projects Carousel
const projectsContainer = document.querySelector(".projects-container");
const prevBtn = document.querySelector(".carousel-btn.prev");
const nextBtn = document.querySelector(".carousel-btn.next");

prevBtn.addEventListener("click", () => {
    projectsContainer.scrollBy({ left: -400, behavior: "smooth" });
});

nextBtn.addEventListener("click", () => {
    projectsContainer.scrollBy({ left: 400, behavior: "smooth" });
});

// Modal Functionality
const modal = document.getElementById("projectModal");
const modalTitle = document.getElementById("modalTitle");
const modalImages = document.getElementById("modalImages");
const closeModal = document.getElementById("closeModal");

// Open modal function
function openModal(projectType) {
    const project = projectData[projectType];
    if (!project) return;

    modalTitle.textContent = project.title;

    // Clear previous images
    modalImages.innerHTML = "";

    // Add new images
    project.images.forEach((image) => {
        const imageDiv = document.createElement("div");
        imageDiv.className = "modal-image";
        imageDiv.innerHTML = `
            <img src="${image.url}" alt="${image.title}" />
            <div class="modal-image-title">${image.title}</div>
          `;
        modalImages.appendChild(imageDiv);
    });

    modal.classList.add("active");
    document.body.style.overflow = "hidden";
}

// Close modal function
function closeModalFunction() {
    modal.classList.remove("active");
    document.body.style.overflow = "auto";
}

// Event listeners for modal
closeModal.addEventListener("click", closeModalFunction);

modal.addEventListener("click", (e) => {
    if (e.target === modal) {
        closeModalFunction();
    }
});

// Event listeners for view project buttons
document.querySelectorAll(".view-project").forEach((button) => {
    button.addEventListener("click", (e) => {
        e.preventDefault();
        const projectType = button.getAttribute("data-project");
        openModal(projectType);
    });
});

// Escape key to close modal
document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && modal.classList.contains("active")) {
        closeModalFunction();
    }
});

// Scroll to Top Button
const scrollTopBtn = document.getElementById("scroll-top");

window.addEventListener("scroll", () => {
    if (window.pageYOffset > 500) {
        scrollTopBtn.classList.add("visible");
    } else {
        scrollTopBtn.classList.remove("visible");
    }
});

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

// Update Copyright Year
document.getElementById("year").textContent = new Date().getFullYear();

// Initialize Lucide Icons
lucide.createIcons();

// Intersection Observer for Skill Bars Animation
const skillBars = document.querySelectorAll(".skill-progress");
const observer = new IntersectionObserver(
    (entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                entry.target.style.width =
                    entry.target.parentElement.dataset.progress;
            }
        });
    },
    { threshold: 0.5 }
);

skillBars.forEach((bar) => observer.observe(bar));

// Smooth Scroll for Navigation Links
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener("click", (e) => {
        e.preventDefault();
        const target = document.querySelector(anchor.getAttribute("href"));
        if (target) {
            target.scrollIntoView({ behavior: "smooth" });
            // Close mobile menu if open
            mobileNav.classList.remove("active");
            menuIcon.setAttribute("data-lucide", "menu");
            lucide.createIcons();
        }
    });
});

Welcome to the Interactive Code Showcase!

This is a progressive learning experience designed to help you understand HTML, CSS, and JavaScript step by step.

How It Works

The showcase uses a unique progressive unlocking system that encourages hands-on learning:

Step 1: HTML code is visible immediately - this is your starting point
Step 2: Copy the HTML code to unlock the CSS section (5-second countdown)
Step 3: Copy the CSS code to unlock the JavaScript section (5-second countdown)
Interactive Learning: Each step builds upon the previous one

Copying Code Instructions

To copy any code block:

Look for the copy button (📋 icon) in the top-right corner of each code block
Click the copy button to copy the code to your clipboard
The button will show a ✅ checkmark when successfully copied
Paste the code into your preferred code editor or IDE

Getting Started

Here's what you need to do to set up and use this showcase effectively:

Have a Code Editor Ready: Use VS Code, Sublime Text, or any text editor
Create Project Folders: Make separate folders for HTML, CSS, and JS files
Follow the Sequence: Start with HTML, then CSS, then JavaScript
Test Your Code: Open HTML files in your browser to see results
Experiment: Modify the copied code to learn how it works

Pro Tips

Use browser developer tools (F12) to inspect and debug your code
Try modifying the copied code to see how changes affect the output
Create your own variations of the provided examples
Link your CSS and JavaScript files to your HTML for complete projects

Having Trouble Copying Code?

If you're experiencing issues with copying the code or understanding the process, watch the tutorial video above. It provides a complete walkthrough of how to use this interactive showcase and demonstrates the copying process step by step.

Troubleshooting

If you encounter any issues:

Code won't copy: Make sure your browser allows clipboard access
Sections won't unlock: Ensure you've successfully copied the previous code block
Browser compatibility: Use modern browsers (Chrome, Firefox, Safari, Edge)
Mobile users: Long-press the copy button if single tap doesn't work

Ready to Start?

Close this modal and begin by copying the HTML code. Watch as the CSS section unlocks, then proceed to JavaScript. Happy coding! 🚀

Search This Blog

Tabrej Azam

Portfolio Website

Code & Video Showcase

Code Examples

HTML Code

CSS Code

JavaScript Code

Comments

Post a Comment

Popular Posts

Offline Page

15 August Code

Portfolio Website

Code & Video Showcase

Code Examples

HTML Code

CSS Code

JavaScript Code

How to Set Up This Code Showcase

How It Works

Copying Code Instructions

Getting Started

Pro Tips

Troubleshooting

Comments

Post a Comment

Popular Posts

Offline Page

15 August Code