PORTFOLIO/p5.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
<!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/[email protected]/css/boxicons.min.css" rel="stylesheet" />
  <title>Portfolio</title>
</head>

<body>

  <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>
  <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">DIGITAL</p>
      <span class="small-text" id="webdev">ONLINE</span>
    </div>
    <div class="container">
      <p class="large-text">SHELF</p>
      <span class="small-text" id="portfolio">LIBRARY</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="cursor" id="cursor"></div>

  <div class="containerr" id="cont">
    <i class="bx bxl-javascript"></i>
    <i class="bx bxl-html5"></i>
    <i class="bx bxl-sass"></i>
    <i class="bx bxl-bootstrap"></i>
    <i class="bx bxl-css3"></i>
  </div>
  <section class="description">
    <h2 class="autoShow">What It Does</h2>
    <p class="autoShow">
      This website serves as a digital library, allowing users to browse,
      search, and explore a collection of books in an intuitive and visually
      engaging way. It features a clean, responsive design built with
      Bootstrap and custom styles enhanced using Sass. The site makes it easy
      for users to navigate different book categories, view detailed
      descriptions, and interact with a smooth user interface powered by
      JavaScript.
    </p>

    <h2 class="autoShow">Why I Built It</h2>
    <p class="autoShow">
      I created this project to sharpen my front-end development skills while
      applying my newly learned knowledge of Sass for better styling and
      maintainable CSS. The goal was to build a modern and user-friendly
      e-library that showcases structured layouts, interactive elements, and a
      refined design approach. Additionally, this project serves as a
      portfolio piece, demonstrating my ability to work with Bootstrap,
      JavaScript, and Sass to create a well-styled, functional web
      application.
    </p>

    <h2 class="autoShow">Challenges Faced</h2>
    <p class="autoShow">
      One of the main challenges was structuring and organizing the Sass files
      efficiently while ensuring a scalable and reusable styling system.
      Implementing dynamic UI elements, such as interactive search filters and
      book previews, using JavaScript also required problem-solving and
      debugging. Additionally, achieving a balance between aesthetics and
      performance while keeping the design responsive across various devices
      was a key learning experience. This project helped me deepen my
      understanding of front-end technologies and best practices in styling
      with Sass.
    </p>

    <div class="btn-container autoShow">
      <a href="https://github.com/DevvObiero/The-Digital-Shelf" target="_blank" class="btn github-btn">
        View on GitHub
      </a>
      <a href="https://thedigitalshelf.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:[email protected]" 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:[email protected]" target="_blank">Mail</a>
        </li>
      </ul>
    </div>
  </footer>

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

</html>