Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
225 lines (206 loc) · 9.11 KB
/
Copy pathindex.html
File metadata and controls
225 lines (206 loc) · 9.11 KB
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
224
225
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Peter Muriuki</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body id="page-top"><a href="#" class="menu-toggle rounded"><i class="fa fa-bars"></i></a>
<nav class="navbar navbar-light navbar-expand" id="sidebar-wrapper">
<div class="container">
<button class="navbar-toggler d-none" data-toggle="collapse" data-target="#"></button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav sidebar-nav" id="sidebar-nav">
<li class="nav-item sidebar-nav-item" role="presentation"><a class="nav-link js-scroll-trigger"
href="#page-top">Home</a></li>
<li class="nav-item sidebar-nav-item" role="presentation"><a class="nav-link js-scroll-trigger"
href="#about">About</a></li>
<li class="nav-item sidebar-nav-item" role="presentation"><a class="nav-link js-scroll-trigger"
href="#skills">Skills</a></li>
<li class="nav-item sidebar-nav-item" role="presentation"><a class="nav-link js-scroll-trigger"
href="#portfolio">Portfolio</a></li>
<li class="nav-item sidebar-nav-item" role="presentation"><a class="nav-link js-scroll-trigger"
href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div id="particle-div" class="banner">
</div>
<header class="d-flex masthead">
<div class="container my-auto text-center">
<h1 class="mb-1">Hi, Am Peter.</h1>
<h3 class="mb-5"><em>A Back End Developer and an avid pythonista</em></h3>
<a class="btn btn-xl js-scroll-trigger" role="button" href="#about">more About me <span
class="angle-down"> >> </span></a>
<div class="overlay"></div>
</div>
</header>
<section id="about" class="content-section bg-light">
<div class="container text-center">
<div class="row">
<div class="col-lg-10 mx-auto">
<h2>This Guy!</h2>
<p class="lead mb-5">
Am a guy whose insatiably inquisitive and always striving to teach myself new things.
To this end, i have a goal to learn a new skill every month. so far i have my eyes set on playing
the
violin, hand drawing and maybe tap dance in the near future. I enjoy reading a broad range of
genres,
especially fiction works that have been later adapted into some form of motion picture.
</p>
<p class="lead mb-5">
i love sports, we love <em>Manchester United </em>, haha.. <br>
Am an athlete too, and actively participate in swimming, soccer, and occasionally darts, basketball,
and
volleyball. besides that and in my free time you will find me listening to music, or scouring the
web for funny clips and memes. Also huge fan of COD, Europa universalis, Fifa, Farcry etc.
</p>
<p class="lead mb-5">
Coffee or Tea?<br> Coffee always, and forever.
</p>
</div>
</div>
</div>
</section>
<section id="skills" class="content-section text-center">
<h2 class="mb-5">Skills</h2>
<div class='skills'>
</div>
</section>
<section id="portfolio" class="content-section">
<div class="container">
<div class="header content-section-heading text-center">
<h2 class="mb-5">My Projects</h2>
</div>
<div class="row no-gutters">
<div class="col-lg-6">
<a href="https://github.com/p-netm/soccer-cli" class="portfolio-item">
<div class="caption">
<div class="caption-content">
<h2>python api</h2>
<p class="mb-0"> Football scores for hackers. A command line interface for all the football scores.!</p>
</div>
</div>
<img class="img-fluid" src="assets/img/soccer-cli-banner.gif"></a>
</div>
<div class="col-lg-6">
<a href="https://p-netm.github.io/Bsaw/" class="portfolio-item">
<div class="caption">
<div class="caption-content">
<h2>Simulator</h2>
<p class="mb-0">A risk assessment simulator for the Betin's spin and win casino game
cone!</p>
</div>
</div>
<img class="img-fluid" src="https://github.com/p-netm/Bsaw/raw/plotting/figures/snp.PNG"></a>
</div>
<div class="col-lg-6">
<a href="https://p-netm.github.io/snphsp/" class="portfolio-item">
<div class="caption">
<div class="caption-content">
<h2>Mathematical tool</h2>
<p class="mb-0">implementing required numerical analysis tools to solve a magazine puzzle</p>
</div>
</div>
<img class="img-fluid" src="assets/img/snhsp.PNG"></a>
</div>
</div>
</div>
<style>
#skills{
height: 100vh;
background-color: #ffffff;
}
#portfolio{
background-color: rgba(100,230,100,0.1);
}
.skills-image{
display: none;
}
.skills{
background-image: url('assets/img/mycloud.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 500px;
width: 900px;
margin: 0 auto;
}
@supports (display: grid){
@media screen and (min-width:900px){
#portfolio .container{
display: grid;
}
.portfolio-grid-container{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: header repeat(2, 1fr);
grid-gap: 1rem;
}
#portfolio .header{
grid-template-name: header
}
}
}
@media screen and (max-width:900px){
//small screen devices
#skills{
border: 3px solid red;
}
}
@media screen and (max-width:640px){
//small screen devices
.skills{
border: 2px solid black;
width: 250px !important;
height: 300px !important;
}
}
@media screen and (max-width:320px){
//small screen devices
.skills{
width: 250px;
height: 300px;
}
}
@media screen and (min-width:900px){
//small screen devices
#skills{
border: 3px solid red;
}
}
</style>
</section>
<footer id="footer" class="footer text-center">
<h2 class="mb-5">Social Places</h2>
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item"> <a class="text-black-50" href="mailto:pmuriuki98@gmail.com?Subject=Hello%20" target="_top"> Pmuriuki@gmail.com
</a></li>
<li class="list-inline-item"> <a class="text-white social-link rounded-circle"
href="https://www.linkedin.com/in/peter-muriuki-094b8411a/"><i
class="icon-social-linkedin"></i></a></li>
<li class="list-inline-item"> <a class="text-white social-link rounded-circle"
href="https://twitter.com/p_netm"><i class="icon-social-twitter"></i></a>
</li>
<li class="list-inline-item"> <a class="text-white social-link rounded-circle"
href="https://github.com/p-netm/"><i
class="icon-social-github"></i></a></li>
</ul>
<p class="text-muted mb-0 small">Made with love by Peter.</p>
</div>
<a href="#page-top" class="js-scroll-trigger scroll-to-top rounded"><i class="fa fa-angle-up"></i></a></footer>
<script src="assets/js/particles.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="assets/js/stylish-portfolio.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>