PORTFOLIO/p4.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
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Google tag (gtag.js) -->
  <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" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
  <title>Portfolio</title>
</head>

<body>
  <div class="cursor" id="cursor"></div>

  <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">Contact</a></li>
    </ul>
    <span></span>
  </nav>
  <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>
  <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"
      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="container">
    <div class="container">
      <p class="large-text">WINES</p>
      <span class="small-text" id="webdev">BODMAS</span>
    </div>
    <div class="container">
      <p class="large-text">& SPIRITS</p>
      <span class="small-text" id="portfolio">E-COMMERCE</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">
    <i class="bx bxl-javascript"></i>
    <i class="bx bxl-html5"></i>
    <i class="bx bxl-css3"></i>
  </div>


  <section class="description">
    <h2 class="autoShow">What It Does</h2>
    <p class="autoShow">
      This e-commerce website provides an online platform for selling wines
      and spirits. It allows customers to browse a variety of drinks, view
      product details, and place orders conveniently. The website features a
      clean UI, product filtering, and a seamless checkout experience.
    </p>

    <h2 class="autoShow">Why I Built It</h2>
    <p class="autoShow">
      I built this project for my uncle, who owns a physical wines and spirits
      shop and wanted a way to sell his drinks online. The goal was to help
      him expand his business by reaching more customers and making ordering
      easier. This project also gave me valuable experience in front-end
      development and designing an e-commerce platform.
    </p>

    <h2 class="autoShow">Challenges Faced</h2>
    <p class="autoShow">
      One of the biggest challenges was creating a responsive and visually
      appealing product grid that works across different screen sizes. I also
      had to ensure a smooth user experience while handling navigation,
      product display, and optimizing images. Debugging layout issues and
      making the design both functional and engaging required multiple
      iterations.
    </p>
    <div class="btn-container autoShow">
      <a href="https://github.com/DevvObiero/Wines-Spirits-E-commerce" target="_blank" class="btn github-btn">
        View on GitHub
      </a>
      <a href="https://winesandspiritsmigori.netlify.app/" target="_blank" class="btn live-btn">
        Live Demo
      </a>
    </div>
  </section>

  <div class="text2">
    <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="www.linkedin.com/in/paul-obiero-72155b32a" 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="script.js"></script>
</body>

</html>