Simple-HTML-CSS-Portfolio/index.html at main · iamspruce/Simple-HTML-CSS-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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Spruce - Dev Portfolio</title>
  </head>
  <body>
    <header class="site_header">
      <div class="wrapper_inner">
        <nav class="site_header_nav">
          <ul role="list" class="flex flex_center">
            <li><a href="#0">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#work">WORK</a></li>
            <li><a href="#contact">CONTACT</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main>
      <section id="hero">
        <div class="wrapper">
          <div class="wrapper_inner">
            <div class="text_center hero_content">
              <h1 class="h2">Spruce Emmanuel</h1>
              <p class="h5">WEB DEVELOPER && TECHNICAL WRITER</p>
            </div>
          </div>
          <ul role="list" class="flex flex_between hero_social">
            <address>Port Harcourt, Nigeria</address>
            <ul role="list" class="flex">
              <li>Find me online</li>
              <li>
                <a href="https://github.com/iamspruce" target="_blank">
                  <img
                    src="/assets/icon-github.svg"
                    alt="GitHub"
                    width="24"
                    height="24"
                  />
                </a>
              </li>
              <li>
                <a href="https://x.com/sprucekhalifa" target="_blank">
                  <img
                    src="/assets/icon-twitter.svg"
                    alt="Twitter"
                    width="24"
                    height="24"
                  />
                </a>
              </li>
            </ul>
          </ul>
        </div>
      </section>
      <section id="about">
        <div class="wrapper">
          <div class="text_center">
            <h2 class="">
              I am a web developer and technical writer. I write articles on web
              development and programming.
            </h2>
          </div>
          <div class="wrapper_inner">
            <div class="about_content flex flex_around">
              <figure class="about_figure text_center">
                <img
                  width="200px"
                  height="200px"
                  src="/assets/user.png"
                  alt="Developer"
                  class="about_img"
                />
                <figcaption class="about_caption">Spruce ❤️</figcaption>
              </figure>
              <p class="h5">
                Born in Nigeria, I've spent 4+ years building with and writing
                about JavaScript
                <br />
                I help companies market their products and services through
                technical writing.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section id="work">
        <div class="wrapper_inner">
          <div class="text_center">
            <h4 class="h5">
              So far I've helped 20+ companies build their web presence and
              improve their technical documentation.
            </h4>
            <ul role="list" class="work_logos flex flex_center">
              <li>
                <img src="/assets/logo1.png" alt="Acme Corp" />
              </li>
              <li>
                <img src="/assets/logo2.png" alt="Acme Innovations" />
              </li>
              <li>
                <img
                  src="/assets/logo1.png"
                  alt="Acme Solutions"
                  width="50"
                  height="50"
                />
              </li>
              <li>
                <img src="/assets/logo3.png" alt="Acme Technologies" />
              </li>
              <li>
                <img src="/assets/logo1.png" alt="Acme Enterprises" />
              </li>
            </ul>
          </div>
        </div>
      </section>
      <section id="contact">
        <div class="wrapper">
          <div class="text_left">
            <p>
              Want to work together? <br />
              I'd love to hear from you.
            </p>
          </div>

          <div class="wrapper_inner">
            <h5 class="h3">Contact Me</h5>
            <form action="" method="post" class="contact_form">
              <div class="flex">
                <div class="form_group">
                  <label for="name">NAME</label>
                  <input type="text" id="name" name="name" />
                </div>
                <div class="form_group">
                  <label for="email">EMAIL</label>
                  <input type="email" id="email" name="email" />
                </div>
              </div>
              <div class="form_group">
                <label for="message">Message</label>
                <textarea id="message" name="message"></textarea>
              </div>
              <button type="submit">SEND MESSAGE</button>
            </form>
          </div>
        </div>
      </section>
    </main>
    <footer>
      <section id="footer">
        <div class="wrapper">
          <div class="text_right">
            <p>&copy; 2025 Spruce Emmanuel</p>
          </div>
        </div>
      </section>
    </footer>
  </body>
</html>