CodeAlpha_Portfolio/index.html at main · NaseebUllah12/CodeAlpha_Portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Naseeb Ullah - Portfolio</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
</head>
<body>

  <header class="hero">
    <div class="container">
      <h1><i class="fa-solid fa-user"></i> Naseeb Ullah</h1>
      <p>Frontend Developer | BSCS Graduate | CodeAlpha Intern</p>
      <nav>
        <a href="#about"><i class="fa-solid fa-user-circle"></i> About</a>
        <a href="#skills"><i class="fa-solid fa-code"></i> Skills</a>
        <a href="#projects"><i class="fa-solid fa-diagram-project"></i> Projects</a>
        <a href="#education"><i class="fa-solid fa-graduation-cap"></i> Education</a>
        <a href="#contact"><i class="fa-solid fa-envelope"></i> Contact</a>
      </nav>
    </div>
  </header>

  <section id="about">
    <div class="container">
      <h2><i class="fa-solid fa-circle-info"></i> About Me</h2>
      <p>I’m a frontend developer with strong skills in HTML, CSS, and JavaScript. I recently graduated with a BS in Computer Science from Abdul Wali Khan University Mardan (Timergara Campus), and completed a hands-on internship at CodeAlpha. I enjoy building responsive, elegant, and interactive websites.</p>
    </div>
  </section>

  <section id="skills" class="highlight">
    <div class="container">
      <h2><i class="fa-solid fa-laptop-code"></i> Skills</h2>
      <ul class="grid-2">
        <li>HTML5 & CSS3</li>
        <li>JavaScript (ES6+)</li>
        <li>Responsive Web Design</li>
        <li>Git & GitHub</li>
        <li>Python Basics</li>
        <li>Flutter & Firebase (Basic)</li>
      </ul>
    </div>
  </section>

  <section id="projects">
    <div class="container">
      <h2><i class="fa-solid fa-code-branch"></i> Projects</h2>
      <div class="project-card">
        <h3>🖼️ Image Gallery</h3>
        <p>A responsive image gallery with filter categories and lightbox effect.</p>
        <a href="https://github.com/NaseebUllah12/CodeAlpha_ImageGallery" target="_blank"><i class="fa-brands fa-github"></i> View on GitHub</a>
      </div>
      <div class="project-card">
        <h3>🧮 Calculator</h3>
        <p>A fully functional calculator with keyboard support and clean design.</p>
        <a href="https://github.com/NaseebUllah12/CodeAlpha_Calculator" target="_blank"><i class="fa-brands fa-github"></i> View on GitHub</a>
      </div>
      <div class="project-card">
        <h3>🎵 Music Player</h3>
        <p>Interactive music player with animated cover, volume control, and playlist.</p>
        <a href="https://github.com/NaseebUllah12/CodeAlpha_MusicPlayer" target="_blank"><i class="fa-brands fa-github"></i> View on GitHub</a>
      </div>
    </div>
  </section>

  <section id="education" class="highlight">
    <div class="container">
      <h2><i class="fa-solid fa-graduation-cap"></i> Education</h2>
      <p><strong>BS in Computer Science</strong><br>
      Abdul Wali Khan University Mardan (Timergara Campus)<br>
      2021 – 2025 | CGPA: 3.30 / 4.00<br>
      Final Year Project: <em>AI Hub – A multi-feature AI utility app</em></p>
    </div>
  </section>

  <section id="contact">
    <div class="container">
      <h2><i class="fa-solid fa-address-book"></i> Contact</h2>
      <p><i class="fa-solid fa-envelope"></i> Email: <a href="mailto:kamalasim676@gmail.com">kamalasim676@gmail.com</a></p>
      <p><i class="fa-brands fa-linkedin"></i> LinkedIn: <a href="https://www.linkedin.com/in/naseeb-ullah-007b55375" target="_blank">naseeb-ullah-007b55375</a></p>
    </div>
  </section>

  <footer>
    <div class="container">
      <p>© 2025 Naseeb Ullah. All rights reserved.</p>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>