MyFirstWebPage/index.html at main · AJtheManager/MyFirstWebPage · 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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CREATIVE Portfolio — Ayomide Adodo</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- NAV -->
    <nav>
      <div class="nav-logo">Ayomide <span>Adodo</span></div>
      <ul class="nav-links">
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>

    <!-- HERO -->
    <section id="hero">
      <div class="bg-circle bg-circle-1"></div>
      <div class="bg-circle bg-circle-2"></div>

      <div class="hero-left">
        <p class="hero-eyebrow">Creative Director & Strategist</p>
        <h1 class="hero-name">Ayomide<br /><em>Adodo</em></h1>
        <p class="hero-tagline">Crafting stories that leave a mark.</p>
        <p class="hero-desc">
          I help brands find their voice — through considered design, refined
          visual identity, and strategy rooted in genuine human connection.
        </p>
        <div class="hero-cta">
          <a href="#services" class="btn-primary">View My Work</a>
          <a href="#contact" class="btn-ghost">Let's Talk →</a>
        </div>
      </div>

      <div class="hero-right">
        <div class="hero-photo-wrap">
          <div class="hero-photo-bg"></div>
          <div class="hero-photo">
            <!-- Decorative silhouette — replace with <img src="your-photo.jpg"> -->
            <svg
              viewBox="0 0 200 300"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <ellipse cx="100" cy="70" rx="42" ry="42" fill="#5a3e2b" />
              <path
                d="M30 280 Q30 180 100 160 Q170 180 170 280Z"
                fill="#5a3e2b"
              />
            </svg>
          </div>
          <div class="hero-badge">
            8+
            <small>Years exp.</small>
          </div>
        </div>
      </div>
    </section>

    <!-- ABOUT -->
    <section id="about">
      <div class="about-text reveal">
        <p class="section-label">About Me</p>
        <h2 class="section-title">
          A creative mind<br />with <em>purpose</em>
        </h2>
        <p>
          I'm Ayomide — a creative director and brand strategist with over eight
          years of experience helping companies of all sizes build visual
          identities that resonate and endure.
        </p>
        <p>
          My approach is rooted in listening first. Every project begins with
          deep discovery — understanding who you are, who you serve, and what
          you want to be remembered for. Then I craft something that feels
          unmistakably yours.
        </p>
        <div class="about-stats">
          <div class="stat">
            <div class="stat-number">80+</div>
            <div class="stat-label">Projects Delivered</div>
          </div>
          <div class="stat">
            <div class="stat-number">40+</div>
            <div class="stat-label">Happy Clients</div>
          </div>
          <div class="stat">
            <div class="stat-number">12</div>
            <div class="stat-label">Design Awards</div>
          </div>
          <div class="stat">
            <div class="stat-number">8+</div>
            <div class="stat-label">Years of Craft</div>
          </div>
        </div>
      </div>

      <div class="about-image-col reveal">
        <div class="about-img-box">
          <!-- Replace with your photo -->
          <span style="font-size: 0.9rem; opacity: 0.5"
            >[ Your Photo Here ]</span
          >
        </div>
        <div class="about-decor"></div>
      </div>
    </section>

    <!-- SERVICES -->
    <section id="services">
      <div class="services-header reveal">
        <div>
          <p class="section-label">What I Offer</p>
          <h2 class="section-title">
            Services built<br />with <em>intention</em>
          </h2>
        </div>
        <p class="services-intro">
          Each service is delivered with meticulous attention to craft — no
          templates, no shortcuts. Just bespoke work made to move people.
        </p>
      </div>

      <div class="services-grid">
        <div class="service-card reveal">
          <div class="service-num">01</div>
          <div class="service-name">Brand Identity</div>
          <p class="service-desc">
            Logos, color systems, typography, and visual language that capture
            who you are and where you're going.
          </p>
        </div>
        <div class="service-card reveal">
          <div class="service-num">02</div>
          <div class="service-name">Creative Direction</div>
          <p class="service-desc">
            Art direction for campaigns, editorials, and launches — ensuring
            every visual touchpoint speaks in one coherent voice.
          </p>
        </div>
        <div class="service-card reveal">
          <div class="service-num">03</div>
          <div class="service-name">Brand Strategy</div>
          <p class="service-desc">
            Positioning, messaging frameworks, and competitive research to give
            your brand a clear, confident point of view.
          </p>
        </div>
        <div class="service-card reveal">
          <div class="service-num">04</div>
          <div class="service-name">Web Design</div>
          <p class="service-desc">
            Pixel-perfect, beautifully responsive websites that balance
            aesthetics with usability and conversion.
          </p>
        </div>
        <div class="service-card reveal">
          <div class="service-num">05</div>
          <div class="service-name">Print & Collateral</div>
          <p class="service-desc">
            Business cards, brochures, packaging, and stationery — tactile
            experiences that leave lasting impressions.
          </p>
        </div>
        <div class="service-card reveal">
          <div class="service-num">06</div>
          <div class="service-name">Consulting</div>
          <p class="service-desc">
            One-on-one brand audits, workshop facilitation, and ongoing creative
            advisory for growing teams.
          </p>
        </div>
      </div>
    </section>

    <!-- CONTACT -->
    <section id="contact">
      <div class="contact-info reveal">
        <p class="section-label">Get In Touch</p>
        <h2 class="section-title">
          Let's create<br />something <em>beautiful</em>
        </h2>
        <p>
          Whether you have a project in mind or simply want to explore what's
          possible, I'd love to hear from you. Fill out the form or reach me
          directly below.
        </p>
        <div class="contact-detail">
          <div class="contact-item">
            <div class="contact-item-dot"></div>
            ayomidejoe48@creative.com
          </div>
          <div class="contact-item">
            <div class="contact-item-dot"></div>
            +1 (555) 012 3456
          </div>
          <div class="contact-item">
            <div class="contact-item-dot"></div>
            Available for projects worldwide
          </div>
        </div>
      </div>

      <form class="contact-form reveal" id="contact-form">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">First Name</label>
            <input class="form-input" type="text" placeholder="Jane" />
          </div>
          <div class="form-group">
            <label class="form-label">Last Name</label>
            <input class="form-input" type="text" placeholder="Doe" />
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Email</label>
          <input
            class="form-input"
            type="email"
            placeholder="jane@example.com"
          />
        </div>
        <div class="form-group">
          <label class="form-label">Subject</label>
          <input
            class="form-input"
            type="text"
            placeholder="Brand Identity Project"
          />
        </div>
        <div class="form-group">
          <label class="form-label">Message</label>
          <textarea
            class="form-textarea"
            placeholder="Tell me about your project..."
          ></textarea>
        </div>
        <button type="submit" class="form-submit">Send Message</button>
      </form>
    </section>

    <!-- FOOTER -->
    <footer>
      <span class="footer-copy"
        >© 2026 Ayomide Adodo. All rights reserved.</span
      >
      <span class="footer-logo">SA</span>
    </footer>

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