-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (197 loc) · 11.3 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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Carey Mokou Portfolio</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Simple line icons-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css" rel="stylesheet" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<a class="menu-toggle rounded" href="#"><i class="fas fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-nav-item"><a href="#page-top">Home</a></li>
<li class="sidebar-nav-item"><a href="#about">About Me</a></li>
<li class="sidebar-nav-item"><a href="#services">Why Development?</a></li>
<li class="sidebar-nav-item"><a href="#portfolio">Creative Side</a></li>
<li class="sidebar-nav-item"><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Header-->
<header class="masthead d-flex align-items-center">
<div class="container px-4 px-lg-5 text-center">
<h1 class="mb-1">Carey Mokou Portfolio Page</h1>
<h3 class="mb-5"><em>Curious about who I am? Let's find out!</em></h3>
<a class="btn btn-primary btn-xl" href="#about">Find Out More</a>
</div>
</header>
<!-- About-->
<section class="content-section bg-light" id="about">
<div class="container px-4 px-lg-5 text-center">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-10">
<h2>About Me</h2>
<p class="lead mb-5">
My name is Carey. I am a student at the University of Pretoria. I study BSc Information and Knowledge Systems.
<br>
I find passion in development and I always aspire to do great things.
In my free time, I usually listen to my <a href="https://open.spotify.com/playlist/6NjjtPCf6SeeZL5XEPdPNn?si=8e6f61d016d94cd4">Spotify playlists</a> or watch YouTube videos <br>
throughout the entire day.
</p>
<a class="btn btn-dark btn-xl" href="#services">See more</a>
</div>
</div>
</div>
</section>
<!-- Services-->
<section class="content-section bg-primary text-white text-center" id="services">
<div class="container px-4 px-lg-5">
<div class="content-section-heading">
<h3 class="text-secondary mb-0">Why, Why, Why?</h3>
<h2 class="mb-5">Why Development, Carey?</h2>
</div>
<div class="row gx-4 gx-lg-5">
<div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
<span class="service-icon rounded-circle mx-auto mb-3"><i class="icon-screen-smartphone"></i></span>
<h4><strong>App/Web Development</strong></h4>
<p class="text-faded mb-0">Always been a passion to create something from scratch!</p>
</div>
<div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
<span class="service-icon rounded-circle mx-auto mb-3"><i class="icon-pencil"></i></span>
<h4><strong>Redesigned</strong></h4>
<p class="text-faded mb-0">Engaging in learning and improving myself</p>
</div>
<div class="col-lg-3 col-md-6 mb-5 mb-md-0">
<span class="service-icon rounded-circle mx-auto mb-3"><i class="icon-like"></i></span>
<h4><strong>Loving Technology</strong></h4>
<p class="text-faded mb-0">
Always loved techno gadgets
<i class="fas fa-heart"></i>
From a young age
</p>
</div>
<div class="col-lg-3 col-md-6">
<span class="service-icon rounded-circle mx-auto mb-3"><i class="icon-mustache"></i></span>
<h4><strong>Questions</strong></h4>
<p class="text-faded mb-0">I mustache questions about why certain things happen with computer programming...GET IT?</p>
</div>
</div>
</div>
</section>
<!-- Callout-->
<section class="callout">
<div class="container px-4 px-lg-5 text-center">
<h2 class="mx-auto mb-5">
Welcome to
<em>my</em>
website!
</h2>
<a class="btn btn-primary btn-xl" href="https://startbootstrap.com/theme/stylish-portfolio/">Get the same website as ME!</a>
</div>
</section>
<!-- Portfolio-->
<section class="content-section" id="portfolio">
<div class="container px-4 px-lg-5">
<div class="content-section-heading text-center">
<h3 class="text-secondary mb-0">Me</h3>
<h2 class="mb-5">Creativity at its best</h2>
</div>
<div class="row gx-0">
<div class="col-lg-6">
<a class="portfolio-item" href="#!">
<div class="caption">
<div class="caption-content">
<div class="h2">What I usually have on my desk. </div>
<p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
</div>
</div>
<img class="img-fluid" src="assets/img/portfolio-1.jpg" alt="..." />
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#!">
<div class="caption">
<div class="caption-content">
<div class="h2">Piture Perfect</div>
<p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
</div>
</div>
<img class="img-fluid" src="assets/img/portfolio-2.jpg" alt="..." />
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#!">
<div class="caption">
<div class="caption-content">
<div class="h2">My Favourite Fruit: Strawberries</div>
<p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
</div>
</div>
<img class="img-fluid" src="assets/img/portfolio-3.jpg" alt="..." />
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#!">
<div class="caption">
<div class="caption-content">
<div class="h2">My Workspace</div>
<p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
</div>
</div>
<img class="img-fluid" src="assets/img/portfolio-4.jpg" alt="..." />
</a>
</div>
</div>
</div>
</section>
<!-- Call to Action-->
<section class="content-section bg-primary text-white">
<div class="container px-4 px-lg-5 text-center">
<h2 class="mb-4">The buttons below are impossible to resist...</h2>
<a class="btn btn-xl btn-light me-4" href="#!">Click Me!</a>
<a class="btn btn-xl btn-dark" href="#!">Look at Me!</a>
</div>
</section>
<!-- Map-->
<div class="map" id="contact">
<iframe src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A"></a></small>
</div>
<!-- Footer-->
<footer class="footer text-center">
<div class="container px-4 px-lg-5">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#!"><i class="icon-social-facebook"></i></a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#!"><i class="icon-social-twitter"></i></a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white" href="#!"><i class="icon-social-github"></i></a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright © Carey Mokou 2022</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top"><i class="fas fa-angle-up"></i></a>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>