CodeSpace-Portfolio/index.html at main · ikonets1/CodeSpace-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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      rel="stylesheet"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="navbar">
      <div class="logo">My Portfolio</div>

      <!-- Desktop Navigation -->
      <ul class="nav-links-desktop">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#work-experience">Experience</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>

      <!-- Hamburger Menu for Mobile -->
      <button class="hamburger" aria-label="Toggle navigation">☰</button>

      <!-- Mobile Navigation -->
      <ul class="nav-links-mobile">
        <div class="mobile">
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#work-experience">Experience</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#contact">Contact</a></li>
        </div>
      </ul>
    </nav>

    <!-- Home Section -->
    <header id="home" class="header-section">
      <span class="web-developer">Web Developer</span>
      <h2 style="margin: 0">Ikenna Njoku</h2>
      <p>Your one-stop destination to explore my work and contact me.</p>
      <button
        style="
          border: 1px solid #3b0764;
          border-radius: 20px;
          background-color: #3b0764;
          color: #fff;
          padding: 5px 20px;
        "
      >
        Let's talk
      </button>
    </header>

    <!-- About Section -->
    <section id="about" class="section">
      <h2>About Me</h2>
      <div class="about-content">
        <p style="max-width: 600px; margin: 0 auto; text-align: center">
          Hi, I'm Ikenna Njoku, an Electrical and Electronics Engineer, an aspiring web developer,
          a software engineering student at Edinburgh College.Focused on creating user-friendly and
          responsive websites. Proven track record in service management role. I specialize in HTML,
          CSS, and JavaScript, and I love exploring new technologies. In my free time, I enjoy exploring
          different programming languages.
        </p>
      </div>
    </section>

    <!-- Work Experience Section -->
    <section id="work-experience">
      <h2>Experience</h2>


      <div class="experience-card">
        <div class="experience-header">
          <h3>Software Engineering Student</h3>
          <span>August 2024 - Present</span>
        </div>
        <p class="company-name">Edinburgh College.</p>
        <p class="experience-details">
          - Understanding how to design and convert a web page with HTML and CSS.
          .<br>
          - Understanding how to build a mobile responsive and mobile adaptive website.
          <br>
          - Understanding how to build a dynamic website with JSON data.
        </p>
      </div>


      </div>
    </section>

    <!-- Skills Section -->
    <section id="skills" class="section">
      <h2>Skills</h2>
      <div class="skills-container">
        <div class="skill">
          <i class="fab fa-html5"></i>
          <p>HTML</p>
        </div>
        <div class="skill">
          <i class="fab fa-css3-alt"></i>
          <p>CSS</p>
        </div>
        <div class="skill">
          <i class="fab fa-js"></i>
          <p>JavaScript</p>
        </div>
        <div class="skill">
          <i class="fab fa-react"></i>
          <p>React</p>
        </div>
        <div class="skill">
          <i class="fab fa-node-js"></i>
          <p>Node.js</p>
        </div>
        <div class="skill">
          <i class="fab fa-git-alt"></i>
          <p>Git</p>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="section">
      <h2>Contact Me</h2>
      <form class="contact-form" id="contactForm">
        <label for="name">Name</label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="Your Name"
          required
        />

        <label for="email">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="Your Email"
          required
        />

        <label for="subject">Subject</label>
        <input
          type="text"
          id="subject"
          name="subject"
          placeholder="Subject"
          required
        />

        <label for="message">Message</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          placeholder="Your Message"
          required
        ></textarea>

        <button type="submit">Send Message</button>
      </form>

      <!-- Social Buttons -->
      <div class="social-buttons">
        <a
          href="https://wa.me/+4474121910"
          target="_blank"
          class="social-btn whatsapp"
        >
          <i class="fab fa-whatsapp"></i> WhatsApp
        </a>
        <a href="tel:+4474121910" class="social-btn call">
          <i class="fa fa-phone"></i> Call
        </a>
        <a href="mailto:ikonets@yahoo.com" class="social-btn email">
          <i class="fa fa-envelope"></i> Mail
        </a>
      </div>
    </section>

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