PORTFOLIO/index.html at main · DevvObiero/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
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
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-M0P5HQZ6VP"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag("js", new Date());
    gtag("config", "G-M0P5HQZ6VP");
  </script>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- SEO Meta Tags -->
  <title>Paul Obiero | Frontend Developer & Portfolio</title>
  <meta name="description"
    content="Portfolio of Paul Obiero, a frontend developer who builds clean, responsive web applications using React, Next.js, Node, Express, and GraphQL. View projects and get in touch." />

  <meta name="keywords"
    content="Paul Obiero, frontend developer, React developer, Next.js developer, Node.js developer, web developer portfolio" />

  <meta name="author" content="Paul Obiero" />
  <meta name="robots" content="index, follow" />
  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/favicon.ico" />

  <!-- Styles -->
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <!-- Schema.org Person Markup -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Paul Obiero",
    "url": "https://paulobiero.me/",
    "sameAs": [
      "https://github.com/DevvObiero",
      "https://www.linkedin.com/in/paul-obiero-72155b32a/"
    ],
    "jobTitle": "Frontend Developer",
    "worksFor": {
      "@type": "Organization",
      "name": "Freelance"
    }
  }
  </script>
</head>

<body>
  <!-- <p id="dynamicText">Hello</p> -->

  <header>

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="profile.html">Profile</a></li>
        <li><a href="./blog.html">Blog</a></li>
        <li><a href="./resume.html">Resume</a></li>
        <button id="toggle-theme">
          <i class="bx bx-sun" id="sun-icon"></i>
          <!-- Sun icon for light mode -->
          <i class="bx bxs-moon" id="moon-icon"></i>
          <!-- Moon icon for dark mode -->
        </button>
      </ul>
      <span></span>
    </nav>
  </header>

  <svg class="custom-svg" id="Modo_de_aislamiento" data-name="Modo de aislamiento" xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1773.98 917.81">
    <path class="cls-1 cls"
      d="M2.13,496.09C25.31,517.29,50.31,536.29,79.31,548.29c26,10,54,11,80-1,9-5,17-11,24-19,7-9,12-19,16-29,5-13,5-26,5-39,0-6,1-11,0-17-2-8-2-15-4-22-3-7-4-14-7-21-7-17-16-31-27-47-9-11-17-21-26-32-18-24-36-45-53-70-2-3-3-7-4-10-1-2-4-3-5-5-21-40-33-88-13-131,2-4,5-9,7-13C104.31,44.29,160.31,25.29,214.31,28.29c21,2,40,5,60,12,29,11,55,25,81,44,19,15,36,28,53,44,3,2,6,4,8,6,5,6,11,11,17,17,7,6,14,12,21,19,18,16,35,29,54,44,11,7,21,13,32,20,18,10,36,18,55,24,18,7,37,10,56,12,21,2,41-2,61-8,66-24,98-86,133-144,7-10,13-19,20-29,6-8,12-16,19-24,9-10,18-18,28-26,16-12,32-22,50-29,25-10,53-9,78,0,46,18,64,66,71,112,7,52,6,104,24,153,9,22,22,44,44,56l3,3c5,2,9,6,15,7,2,1,4,3,7,4,19,7,38,12,58,18,3,1,7,3,10,5h4c18,10,34,19,46,36,11,16,17,33,18,52,2,44-15,85-37,123-18,30-35,57-46,89-6,18-9,37-9,56,1,7,1,15,2,22,3,17,7,32,13,47,14,33,34,60,63,83,56,43,132,52,193,16l3-3c2-1,5-2,7-4,6-5,11-11,19-14,13-15,28-28,39-46,2-3,2-5,4-8,20-28,30-57,39-89,9-36,14-72,11-108-5-70-32-133-52-201-8-31-14-61-12-92,3-36,14-69,35-101,5-7,11-13,16-20,6-7,12-14,20-18l6-6c9-7,18-13,28-19,4-2,9-4,14-6,25-9,51-15,77.58-14.32"
      fill="currentColor"></path>
  </svg>
  <div class="cursor" id="cursor"></div>

  <div class="container">
    <div class="container">
      <p id="large-textt" class="large-text ">PAUL</p>
      <span class=" small-text" id="webdev">SOFTWARE ENGINEER</span>
    </div>
    <div class="container">
      <p id="large-textt" class="large-text">OBIERO</p>
      <span class=" small-text" id="portfolio">PORTFOLIO 2025</span>
    </div>
  </div>
  <svg id="Modo_de_aislamiento" data-name="Modo de aislamiento" xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1399.32 163.87" class="custom-svg second-svg">
    <path class="cls-1"
      d="m1399.17,37.1c-87.27-27.1-183.66,2.85-259.54,53.78-11.17,7.5-22.38,15.81-29.01,27.52-6.63,11.71-7.49,27.69,1.37,37.81,8.86,10.12,28.35,9.53,33.81-2.77,5.16-11.62-4.8-25.42-16.94-29.21s-25.23-.58-37.58,2.44c-94.45,23.14-191.55,35.45-288.78,36.62-128.29,1.54-261.08-17.89-369.59-86.35-25.31-15.97-49.13-34.5-76.03-47.61-34.22-16.69-72.32-24.05-110.26-27.21C211.9-.77,176.62-.24,142.65,7.51c-37.08,8.46-71.69,25.29-105.05,43.54C18.9,61.28-2.25,77.19.79,98.28"
      fill="none" stroke="currentColor" stroke-width="4px" stroke-dasharray="4000" stroke-dashoffset="4000"
      transition="stroke-dashoffset 2s ease-in-out" />
  </svg>

  <div class="containerr" id="cont">
    <p class="autoShow uji">Front-end</p>
    <p class="autoShow uji">Software-Engineer</p>
    <p class="autoShow uji">Designer</p>
  </div>
  <div class="text autoShow">
    Empowering brands worldwide with exceptional Software solutions.
  </div>
  <div class="containerr" id="cont">
    <i class="bx bxl-javascript reveal-icon"></i>
    <i class="bx bxl-html5 reveal-icon"></i>
    <i class="bx bxl-css3 reveal-icon"></i>
    <i class='bx  bxl-typescript reveal-icon'></i>
    <i class="bx bxl-figma reveal-icon"></i>
    <i class='bx  bxl-nodejs reveal-icon'></i>
    <i class="bx bxl-react reveal-icon"></i>
    <i class="bx bxl-tailwind-css reveal-icon"></i>
  </div>

  <div id="projects" class="text autoShow">
    <h4>MY PROJECTS</h4>
  </div>

  <section class="grid-container">
    <div class="grid-item autoShow">
      <a href="p2.html">
        <img src="./266shots_so.png" loading="lazy" alt="Git mentor website" />
      </a>
      <p></p>
    </div>
    <div class="grid-item autoShow">
      <a href="p3.html">
        <img src="./402shots_so.png" loading="lazy" alt="wines and spirits" />
      </a>
      <p></p>
    </div>
    <div class="grid-item autoShow">
      <a href="p8.html">
        <img src="./463_1x_shots_so.webp" loading="lazy" alt="image 2" />
      </a>
      <p></p>
    </div>

    <div class="grid-item autoShow">
      <!-- <div class="image-container"> -->
      <a href="p9.html">
        <img src="./746shots_so (1).png" loading="lazy" alt="wines and spirits" />
      </a>

      <div class="overlay"></div>
      <!-- </div> -->
      <p></p>
    </div>
    <div class="grid-item autoShow">
      <!-- <div class="image-container"> -->
      <a href="p10.html">
        <img src="./169shots_so (1).png" loading="lazy" alt="wines and spirits" />
      </a>

      <div class="overlay"></div>
      <!-- </div> -->
      <p></p>
    </div>

    <div class="grid-item autoShow">
      <!-- <div class="image-container"> -->
      <a href="p1.html">
        <img src="./760_1x_shots_so.webp" loading="lazy" alt="wines and spirits" />
      </a>

      <div class="overlay"></div>
      <!-- </div> -->
      <p></p>
    </div>


  </section>
  <div class="text2 icons">
    <h5 id="autoBlur">Let's work together.</h5>
    <h5 id="autoBlur">Get in touch.</h5>
    <a href="https://instagram.com/obinazo.dev" target="_blank" id="autoBlur">
      <i class="bx bxl-instagram"></i>
    </a>
    <a href="mailto:paulonyangoobiero@outlook.com" id="autoBlur">
      <i class="bx bx-envelope"></i>
    </a>
    <a href="" target="_blank" id="autoBlur">
      <i class="bx bxl-linkedin"></i>
    </a>
  </div>
  <footer>
    <div class="coolness">
      <svg xmlns="http://www.w3.org/2000/svg" width="20%" height="20%" viewbox="0 0 160 160" fill="none"
        class="osmo-icon-svg">
        <path
          d="M94.8284 53.8578C92.3086 56.3776 88 54.593 88 51.0294V0H72V59.9999C72 66.6273 66.6274 71.9999 60 71.9999H0V87.9999H51.0294C54.5931 87.9999 56.3777 92.3085 53.8579 94.8283L18.3431 130.343L29.6569 141.657L65.1717 106.142C67.684 103.63 71.9745 105.396 72 108.939V160L88.0001 160L88 99.9999C88 93.3725 93.3726 87.9999 100 87.9999H160V71.9999H108.939C105.407 71.9745 103.64 67.7091 106.12 65.1938L106.142 65.1716L141.657 29.6568L130.343 18.3432L94.8284 53.8578Z"
          fill="currentColor"></path>
      </svg>
    </div>
    <div class="text3">© Paul Obiero 2025</div>

    <div class="text4">
      <ul>
        <li>
          <a href="https://www.instagram.com/obinazo.dev/" target="_blank">Instagram</a>
        </li>
        <li>
          <a href="https://www.linkedin.com/in/paul-obiero-72155b32a" target="_blank">LinkedIn</a>
        </li>
        <li>
          <a href="mailto:paulonyangoobiero@outlook.com" target="_blank">Mail</a>
        </li>
      </ul>
    </div>
  </footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

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

</html>