├── 4.png
├── OLOO_LOGO1.png
├── headerbg.jpeg
├── 20240505_153428.jpg
├── styles.css
├── index.html
└── headers.css


/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StephenLegacy/PortfolioTrial/HEAD/4.png


--------------------------------------------------------------------------------
/OLOO_LOGO1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StephenLegacy/PortfolioTrial/HEAD/OLOO_LOGO1.png


--------------------------------------------------------------------------------
/headerbg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StephenLegacy/PortfolioTrial/HEAD/headerbg.jpeg


--------------------------------------------------------------------------------
/20240505_153428.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StephenLegacy/PortfolioTrial/HEAD/20240505_153428.jpg


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     font-family: sans-serif;
  5 | }
  6 | nav{
  7 |     display: flex;
  8 |     position: fixed;
  9 |     width: 74%;
 10 |     margin:auto;
 11 |     padding:20px 0;
 12 |     align-items: center;
 13 |     justify-content: space-between;
 14 |     min-width: 300px;
 15 |     right: 50px;
 16 | }
 17 | nav ul li{
 18 |     display: inline-block;
 19 |     list-style: none;
 20 |     margin: 10px 20px;
 21 | }
 22 | nav ul li a{
 23 |     text-decoration: none;
 24 |     color: black;
 25 |     font-weight: bold;
 26 | }
 27 | nav ul li a:hover{
 28 |     color:red;
 29 | }
 30 | .details{
 31 |     margin-left: 4%;
 32 |     margin-top: 8%;
 33 | }
 34 | .details h1{
 35 |     font-size: 50px;
 36 |     color: #212121;
 37 | }
 38 | span{
 39 |     color: orange;
 40 | }
 41 | .details a{
 42 |     background: #000;
 43 |     padding: 10px 10px;
 44 |     text-decoration: none;
 45 |     font-weight: bold;
 46 |     color: #fff;
 47 |     display: inline-block;
 48 |     margin-top: 55px;
 49 |     margin: 30px;
 50 |     border-radius: 10px;
 51 |     border-color: none;
 52 | 
 53 | }
 54 | .profilepic{
 55 |     z-index: 0;
 56 | 
 57 | }
 58 | .profilepic img{
 59 |     position: absolute;
 60 |     border-radius: 50%;
 61 |     top: 160px;
 62 |     right: 120px;
 63 |     height: 370px;
 64 |     width: 370px;
 65 |     margin-bottom: 20px;
 66 |     
 67 | }
 68 | .dynamic-details .job{
 69 |     font-size: 30px;
 70 |     color: #2c3e50;
 71 |     display: flex;
 72 |     font-weight: 700;
 73 |     margin-top: 10px;
 74 |     margin-bottom: 10px;
 75 | 
 76 | }
 77 | .dynamic-details .job .typing-text{
 78 |     color: #1de2d1;
 79 |     margin-left: 10px;
 80 |     white-space: nowrap;
 81 |     overflow: hidden;
 82 |     padding-right: 2px;
 83 |     border-right: 3px solid #b98118;
 84 |     animation: typing 14s steps(37) infinite; 
 85 | }
 86 | @keyframes typing{
 87 |     0%{
 88 |         width: 0ch;
 89 |     }
 90 |     50%{
 91 |         width: 37ch;
 92 |     }
 93 |     100%{
 94 |         width: 0ch;
 95 |     }
 96 | }
 97 | .button1{
 98 |         margin: 20px 2 2 50px;
 99 |         color: #fff;
100 |         margin: 0 10px;
101 |         padding: 8px 16px;
102 |         font-size: 18px;
103 |         cursor: pointer;
104 |         border-radius:6px;
105 |         outline: none;
106 |         border: solid #08833f;
107 |         transform: all 0.3s ease;
108 |         background: linear-gradient(135deg, #2afadf 10%, #c346c2 100%);  
109 |         margin-bottom: 20px;
110 |         margin-top: 20px;
111 | }
112 | .button1:hover{
113 |     transform: scale(0.98);
114 |     background: linear-gradient(135deg, #424099 10%, #08833f 100%); 
115 |     color: #b98118;
116 | }
117 | 
118 | 
119 | 
120 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" dir="ltr">
  3 |     <head>
  4 |         <title>Stephen O. Portfolio</title>
  5 |         <meta charset="UTF-8">
  6 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |         <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  9 |         <link rel="stylesheet" href="styles.css">
 10 |         <link rel="stylesheet" href="headers.css">
 11 | 
 12 |         <header>
 13 |            <div class="header">
 14 |                 <nav>
 15 |                     <img src="OLOO_LOGO1.png" alt="StephenOlooLogo" class="mylogo">
 16 |                         <ul>
 17 |                             <li><a href="#">HOME</a></li>
 18 |                             <li><a href="#">ABOUTgh</a></li>
 19 |                             <li><a href="#">My portfolio</a></li>
 20 |                             <li><a href="#">my SERVICES</a></li>
 21 |                             <li><a href="#">HIRE ME</a></li>
 22 |                         </ul>
 23 |                 </nav>
 24 |            </div>
 25 |         </header>
 26 | 
 27 |     </head>
 28 | 
 29 |     <body>
 30 |     <div class="allbody">
 31 |                  <div class="details">
 32 |                     <h1>Hello, I'm Stephen </h1>
 33 |                     <div contenteditable="true" class="stylename">Oloo</div>
 34 |                     <div class="dynamic-details">
 35 |                     <div class="text-content">
 36 |                             
 37 |                     <div class="job">
 38 |                                 <span>I am</span>
 39 |                                 <div class="typing-text">
 40 |                                     <span>a Computer Scientist, </span>
 41 |                                     <span>a Cloud Practitioner</span>
 42 |                                     </div>
 43 |                                 </div>
 44 |             </div>
 45 |         </div>
 46 |                     <p class="mywelcome">Welcome To My Official Portfolio Website. Here I  Showcase Great Academic Excellence, <br>Tech erudition 
 47 |                         and Acumen. Here Is A Chance For You To Comprehend The Journey Traversed, <br>
 48 |                         The Great Successes Witnessed & Foster A Healthier And More Profitable Future. Cheers!
 49 |                     </p>
 50 |                         <button class="button1">View Resume</button>
 51 |                     </div>
 52 |                     
 53 |                 </div>
 54 |                 <div class="profilepic">
 55 |                     <img src="20240505_153428.jpg" alt="StephenOlooDP">
 56 |                 </div>
 57 |             </div>
 58 |     </div>
 59 |         </body>
 60 |     
 61 | 
 62 |         <footer>
 63 |        <div class="content">
 64 |             <div class="leftbox">
 65 |                 <div class="upper">
 66 |                     <div class="topic"> About Me</div>
 67 |                     <p>I'm an enthusiastic tech elite and business mogul with great and immense erudition in 
 68 |                         cloud engineering, computer science, SEO and Ecommerce Management. A Full Stack Web
 69 |                     Developer and full-time IT Consultant. A flexible and reliable freelancer. Founder and CEO at Oneshop Enterprises </p>
 70 |                 </div>
 71 |                 <div class="lower">
 72 |                     <div class="topic">Contact Me</div>
 73 |                     <div class="phone">
 74 |                         <a href="#"><i class="fas fa-phone-volume"></i>+254716631667</a>
 75 |                     </div>
 76 |                     <div class="email">
 77 |                         <a href="#"><i class="fas fa-envelope">oloostephen22@outlook.com</i></a>
 78 |                     </div>
 79 |                     </div>
 80 |             </div>
 81 |                 <div class="middlebox">
 82 |                     <div class="topic">Expertise</div>
 83 |                     <div><a href="#">Full Stack Web Design & Development</a></div>
 84 |                     <div><a href="#">Cloud Engineering</a></div>
 85 |                     <div><a href="#">Network Engineering</a></div>
 86 |                     <div><a href="#">General IT Consultations</a></div>
 87 |                     <div><a href="#">Database Deployment & Administration</a></div>
 88 |             </div>
 89 |            <div class="rightbox">
 90 |             <div class="topic">Subscribe</div>
 91 |             <form action="#"></form>
 92 |             <input type="text" placeholder="Enter Email Address">
 93 |             <input type="submit" name="" value="Send">
 94 |             <div class="media-icons">
 95 |                 <a href="#"><i class="fab fa-facebook-f"></i></a>
 96 |                 <a href="#"><i class="fab fa-instagram"></i></a>
 97 |                 <a href="#"><i class="fab fa-twitter"></i></a>
 98 |                 <a href="#"><i class="fab fa-youtube"></i></a>
 99 |                 <a href="#"><i class="fab fa-linkedin-in"></i></a>
100 |                 
101 |             </div>
102 |            </div>
103 | 
104 |            <div class="bottom">
105 |             <p>Copyright &copy; 2024 <a href="#"> StephenLegacy.io </a> All Rights Reserved</p>
106 |            </div>
107 |        </div>
108 |     </footer>
109 | </html>
110 | 


--------------------------------------------------------------------------------
/headers.css:
--------------------------------------------------------------------------------
  1 | html, body{
  2 |     height: 100%;
  3 |     margin: 0;
  4 |     padding: 0;
  5 | }
  6 | body{
  7 |     display: flex;
  8 |     flex-direction: column;
  9 |     height: 100%;
 10 |     width: 100%;
 11 |     background: linear-gradient(135deg, #2afadf 10%, #c346c2 100%);
 12 |     
 13 |     
 14 | }
 15 | body::before,
 16 | body::after{
 17 |     content: '';
 18 |     position: absolute;
 19 |     left:0;
 20 |     top: 0;
 21 |     height: 100vh;
 22 |     width: 100%;
 23 |     opacity: 0.4;
 24 | }
 25 | body::before{
 26 |     clip-path: circle(30% at left 20%);
 27 |     background: linear-gradient(135deg, #c346c2 10%, #2afadf 100%);
 28 | }body::after{
 29 |     clip-path: circle(15% at right 90%);
 30 |     background: linear-gradient(135deg, #2afadf 10%, #c346c2 100%);
 31 | }
 32 | 
 33 | .allbody{
 34 |     height: 98%;
 35 |     width: 98%;
 36 |     background: rgba(255, 255, 255, 0.1);
 37 |     backdrop-filter: blur(3px);
 38 |     margin: auto;
 39 |     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
 40 |     border-radius: 25px;
 41 |     border-top: 2px solid rgba(255, 255, 255, 0.1);
 42 |     border-left: 2px solid rgba(255, 255, 255, 0.1);
 43 |     margin-top: 120px;
 44 |     margin-bottom: 20px;
 45 | }
 46 | 
 47 | header{
 48 |     background-image: url(4.png);
 49 |     width: 100%;
 50 |     background-position: center;
 51 |     background-size: cover;
 52 |     position:fixed;
 53 |     margin-bottom: 80px;
 54 |     z-index: 1000;
 55 |     border: none;
 56 |     outline: none;
 57 |     height: 100px;
 58 |     
 59 | }
 60 | footer{
 61 |     bottom: 0;
 62 |     text-decoration: none;
 63 |     width: 100%;
 64 |     height: 100%;
 65 |     left: 0;
 66 |     z-index: 1000;
 67 |     background: linear-gradient(135deg, #000 20%, #694669  50%, #160516 100%);  
 68 | }
 69 |     
 70 | footer .content{
 71 |     max-width: 1350px;
 72 |     margin: auto;
 73 |     padding: 20px;
 74 |     display: flex;
 75 |     flex-wrap: wrap;
 76 |     justify-content: space-between;
 77 | }
 78 | footer .content p, a{
 79 |     color: #fff;
 80 |     text-decoration: none;
 81 |     display: flex;
 82 |     flex-wrap: wrap;
 83 | }
 84 | footer .content .box{
 85 |     width: 33%;
 86 | }
 87 | footer .content .topic{
 88 |     font-size: 22px;
 89 |     font-weight: 600;
 90 |     color: #fff;
 91 |     margin-bottom: 16px;
 92 |     padding-top: 2px;
 93 |     padding-bottom: 2px;
 94 | }
 95 | footer .content p{
 96 |     text-align: justify;
 97 | }
 98 | footer .content .lower .topic{
 99 |     margin: 24px 0 5px 0;
100 | }
101 | footer .content .lower i{
102 |     padding-left: 16px;
103 |     text-decoration: none;
104 | }
105 | footer .content .middlebox{
106 |     padding-left: 10px;
107 |     margin-top: 2px;
108 | }
109 | footer .content .middlebox a{
110 |     line-height: 18px;
111 | 
112 | }
113 | footer .content .rightbox input[type="text"]{
114 |     height: 45px;
115 |     width: 100%;
116 |     outline: none;
117 |     color: #d9d9d9;
118 |     background: #000;
119 |     border-radius: 5px;
120 |     padding-left: 10px;
121 |     font-size: 17px;
122 |     border: 2px solid #222222
123 | }
124 |     footer .content .rightbox input[type="submit"]{
125 |         height: 42px;
126 |         width: 100px;
127 |         font-size: 18px;
128 |         color:#d9d9d9;
129 |         background: #eb2f06;
130 |         outline: none;
131 |         border-radius: 5px;
132 |         letter-spacing: 1px;
133 |         cursor: pointer;
134 |         margin-top: 12px;
135 |         border: 2px solid #eb2f06;
136 |         transition: all 0.3s ease-in-out;
137 |     }
138 |     footer .content .rightbox input[type="submit"]:hover{
139 |         background: none;
140 |         color: #eb2f06;
141 |     }
142 |     footer .content .media-icons a{
143 |         font-size: 16px;
144 |         height: 45px;
145 |         width: 45px;
146 |         background: red;
147 |         display: inline-block;
148 |         text-align: center;
149 |         line-height: 43px;
150 |         border-radius: 5px;
151 |         border: 2px solid #222222;
152 |         margin: 30px 5px 0 0;
153 |         transition: all 0.3s ease;
154 |     }
155 |     footer .content .media-icons a:hover{
156 |         border-color: #eb2f06;
157 |     }
158 |     footer .bottom{
159 |         width: 100%;
160 |         text-align: right;
161 |         color: #d9d9d9;
162 |         padding: 0 40px 5px 0;
163 |     }
164 |     footer a{
165 |         transition: all 0.3s ease;
166 |     }
167 |     footer .bottom a{
168 |         color:#eb2f06
169 |     }
170 |     footer a:hover{
171 |         color: #eb2f06;
172 |     }
173 |     @media (max-width:1100px){
174 |         footer .content .middlebox{
175 |             padding-left: 50px;
176 |         }
177 |     }
178 |     @media (max-width:950px){
179 |         footer .content .box{
180 |             width: 50%;
181 |         }
182 |         .content .rightbox{
183 |             margin-top: 40px;
184 |         }
185 |     }
186 |     @media (max-width: 560px){
187 |         footer{
188 |             position: relative;
189 |         }
190 |         footer .content .box{
191 |             width: 100%;
192 |             margin-top: 30px;
193 |         }
194 |         footer .content .middlebox{
195 |             padding-left: 0;
196 |         }
197 |     }
198 |     .stylename{
199 |         display: flex;
200 |         border: none;
201 |         outline: none;
202 |         font-size: 100px;
203 |         font-weight: 800;
204 |         text-transform: uppercase;
205 |         animation: animate 10s linear infinite;
206 |         background-size: 400%;
207 |         background: linear-gradient(135deg, #5335cf 0%, #de005e 25%, #f66e48 50%, #de005e 75%, #5335cf 100% );
208 |         background-clip: text;
209 |         color: transparent;
210 |         -webkit-background-clip: text;
211 |         -webkit-text-fill-color: transparent;
212 |         
213 |     }
214 |     @keyframes animate{
215 |         100%{
216 |             background-position: 400%;
217 |         }
218 | 
219 |     }
220 |     .mywelcome{
221 |         font-family: Roboto;
222 |         font-weight: bold;
223 |         font-size: 20px;
224 |         margin-bottom: 40px;
225 |         line-height: 30px;
226 |     }
227 |     .mylogo {
228 |         width: 200px;
229 |         margin-top: 0;
230 |         height: 80px;
231 |         left: 5px;
232 |         margin-bottom: 1px;
233 |     }
234 |     .mylogo img{
235 |         margin-bottom: 1px;
236 |         margin-top: 0px;
237 |         margin-left: 1px;
238 |         padding-left: 0px;
239 |         display: inline-flex;
240 |     }


--------------------------------------------------------------------------------