-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (183 loc) · 9.38 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boniface Sitati</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="icon" type="image/x-icon" href="icons/man_4140048.png">
</head>
<body>
<header id="header">
<div class="top-nav" id="topNav">
<a href="#about-me"><img id="nav-image" src="images/dp.jpg" alt="About Me"></a>
<div id="topRight" class="top-right">
<button class="nav-toggle" id="navToggle">
<span></span>
<span></span>
<span></span>
</button>
<ul id="navMenu">
<li><a href="#about-me">About Me</a></li>
<li><a href="#my-work">My Work</a></li>
<li><a href="#get-in-touch">Get In Touch</a></li>
</ul>
</div>
</div>
</header>
<main>
<section id="about-me" class="fade-in">
<h1>Boniface Sitati</h1>
<div class="intro">
<div id="introLeft">
<p>I am a <span id="myIntro">programmer</span>.<br>I have always had my heart set on technology, always facinated by how wonderful machines work and how magical applications are.<br>Having a career in tech is a dream come true for me, and I will utilize any chance given to me very well.</p>
<ul id="contactInfoLinksTop">
<li><a href="https://github.com/bit-worm"><img src="icons/github.png" id="githubIcon"></a></li>
<li><a href="https://x.com/bit_worm_"><img src="icons/twitter.png" id="xIcon"></a></li>
<li><a href="https://www.linkedin.com/in/boniface-sitati-z11"><img src="icons/linkedin.png" id="linkedinIcon"></a></li>
<li><a href="https://wa.me/+254707592157"><img src="icons/whatsapp.png" id="whatsappIcon"></a></li>
<li><a href="mailto:[email protected]"><img src="icons/email.png" id="emailIcon"></a></li>
</ul>
</div> <!--intro-left-->
<div id="introRight">
<img id="me" src="images/dp.jpg" alt="dp">
</div> <!--intro-right-->
</div> <!--intro-->
<div class="skills">
<h2>Skills</h2>
<h4>Hard skills</h4>
<div class="hard-skills">
<div class="technical-skills">
<h5>Technical Skills</h5>
<img src="images/laptop-1478822_1920.jpg" alt="work">
<ul id="hardSkillsList">
<li>Programming</li>
<li>Bug hunting</li>
<li>FullStack Web development</li>
<li>Software testing</li>
<li>Help desk support</li>
</ul>
</div> <!--technical-skills-->
<div class="tech-stack">
<h5>Tech Stack</h5>
<img src="images/robot-8449206_1920.jpg" alt="tech-stack">
<ul id="techStackList">
<li>Python</li>
<li>Java</li>
<li>Rust</li>
<li>Bash/Shell scripting</li>
<li>Linux</li>
<li>C/C++</li>
<li>Git/GitHub</li>
<li>HTML/CSS/JavaScript</li>
<li>SQL</li>
</ul>
</div> <!--tech-stack-->
</div> <!--hard-skills-->
<hr>
<h4>Soft skills</h4>
<div class="soft-skills">
<div class="strengths">
<h4>Strengths</h4>
<ul id="strengthsList">
<li>Confident</li>
<li>Creative thinking</li>
<li>Critical thining</li>
<li>Good with authority</li>
<li>Team player</li>
<li>Good leadership skills</li>
</ul>
</div> <!--strengths-->
<div class="weakness">
<h4>Weakness</h4>
<ul id="weaknessList">
<li>Perfectionist</li>
<li>I like to do things my way</li>
</ul>
</div> <!--Weakness-->
</div> <!--soft-skills-->
</div> <!--skills-->
<div class="education">
<h3>Education</h3>
<div class="formal-edu">
<fieldset id="primarySchool">
<legend>2009-2018</legend>
<p><h4>Primary School</h4><br>I studied in Kiminini Angels for my primary school education. My time here taught me a lot.</p>
</fieldset> <!--primary school-->
<fieldset id="secondarySchool">
<legend>2019-2022</legend>
<p><h4>Secondary School</h4><br>After succesfully completing primary school education, I joined Kapenguria School for my secondary school education.</p>
</fieldset> <!--secondary school-->
<fieldset id="university">
<legend>2023-Present</legend>
<p><h4>University</h4><br>I am currently a student at <a href="https://chuka.ac.ke">Chuka University</a> taking BSC Computer Science. I hope to advance in my career with the skills and knowledge gained from my time here.</p>
</fieldset> <!--University-->
</div> <!--formal-edu-->
<h4>In Addition</h4>
<fieldset id="inAddition">
<legend id="onTheSide">On the side</legend>
<p>I have gained knowledge from other places, mostly online. From sites like:</p>
<ul id="sitesList">
<li><a href="https://youtube.com">Youtube</a></li>
<li><a href="https://freecodecamp.org">freeCodeCamp</a></li>
<li><a href="https://learn.microsoft.com">Learn Microsoft</a></li>
<li><a href="https://tryhackme.com">TryHackMe</a></li>
</ul>
<p>I also got a schorlaship at <a href="https://powerlearnprojectafrica.org">Plp Africa</a> in 2025 February. The skills gained here are truly valuable and an asset to my extensive arsenal.</p>
</fieldset> <!--in addition-->
</div> <!--education-->
</section> <!--about-me-->
<section id = "my-work" class="fade-in">
<h2>My Work</h2>
<div class="my-work">
<div class="hef-layout">
<p><h5>A WebApp</h5><br>I have done a project on a web app that helps university students in Kenya receiving funds under the new funding model impelemented in 2023 to calculate the amount of money they receive and how the money is divided for different purposes.<br>You can check it here <a href="https://bit-worm.github.io/hef-layout">The Web App</a>.<br>The code can be found here <a href="https://github.com/bit-worm/hef-layout">The Code</a>.</p>
</div> <!--hef-layout-->
<div class="cpp-basics">
<p><h5>Learning Code</h5><br>I have on my gitHub I have a repository that has my learning notes in form of code for when I was learning the basics of C++, you can find them here: <a href="https://github.com/bit-worm/cpp-basics">C++ Code</a>.</p>
</div> <!--cpp-basics-->
<div class="my-portfolio">
<p><h5>My Portfolio</h5><br>This porfolio is also my work. The code to this website is available on github here: <a href="https://github.com/bit-worm/my-portfolio">My Portfolio Code</a>.</p>
</div> <!--my-portfolio-->
</div> <!--my-work-->
</section> <!--my-work-->
<section id="get-in-touch" class="fade-in">
<div class="contact-container">
<div class="get-in-touch-form">
<form name="getInTouch" netlify>
<fieldset id="getInTouchForm">
<legend>Get In Touch</legend>
<label for="fname">Name</label><br>
<input type="text" name="fname" id="fname" required minlength="3" placeholder="your full name"><br>
<label for="email">Email</label><br>
<input type="email" name="email" id="email" required placeholder="[email protected]"><br>
<label for="message">Message</label><br>
<input type="text" name="message" id="message" required minlength="10"><br>
<input type="submit" name="submit" id="submit" value="Send">
</fieldset> <!--getInTouchForm-->
</form>
</div> <!--get-in-touch-form-->
<div class="contact-info">
<ul id="contactInfoLinks">
<li><a href="https://github.com/bit-worm"><img src="icons/github.png" id="githubIcon"></a></li>
<li><a href="https://x.com/bit_worm_"><img src="icons/twitter.png" id="xIcon"></a></li>
<li><a href="https://www.linkedin.com/in/boniface-sitati-z11"><img src="icons/linkedin.png" id="linkedinIcon"></a></li>
<li><a href="https://wa.me/+254707592157"><img src="icons/whatsapp.png" id="whatsappIcon"></a></li>
<li><a href="mailto:[email protected]"><img src="icons/email.png" id="emailIcon" ></a></li>
</ul>
</div> <!--contact-info-->
</div> <!--contact-container-->
</section> <!--get-in-touch-->
</main>
<footer>
<ul id="myContactsList">
<li>+254707592157</li>
<li>[email protected]</li>
<li>Kenya</li>
</ul>
<hr>
<p>© 2025. All Rights Reserved</p>
</footer>
<script src="scripts/script.js"></script>
</body>
</html>