-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (140 loc) · 7.16 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Francis Ngigi Portfolio</title>
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section class="colored-section" id="title">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Francis Ngigi🍀</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-itm">
<a class="nav-link" href="#contactMe">Contact me</a>
</li>
<li class="nav-itm">
<a class="nav-link" href="#aboutme">About me</a>
</li>
<li class="nav-itm">
<a class="nav-link" href="index2.html">My Projects</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<section>
<div class="welcome">
<h1>Hi, glad you made it. Welcome!</h1>
<img class="midasTouch" src="images/midas.png" alt="midasTouch">
<h1 class="intro">At your service, full-stack web developer.</h1>
</div>
<section id="aboutme">
<div class="Aboutme">
<h2 class="meSection">About me</h2>
<p>Ever since I was a young boy, I have always been enchanted by the workings of a computer. How do they work? What makes them work? Why and how do they work the way they do?
The more I learn, the more into a trance they get me. Software is what tells computers what to do, how to do it and when to do it. So, who tells the software what to do? Computer programmers.
</p>
<p>This discovery made me want to command a computer. The thought that it could be me commanding it fascinated me. The ability to communicate with a computer got me really excited and hooked.
Software is a tool aimed at solve complex and simple problems. Its implimentation reaches far and wide into most, if not all, industries.
My path to software development has been everything but conventional, but here I am, enamored of computers, their mysterious workings and never ceasing wonders.
I'm striving to unravel their mysteries and master this domain, one line of code at a time.
</p>
<div class="myskills">
<img class="codepic" src="images/coderlife.png" alt="coding">
<ol type="I">
<label class="meSection">My skills</label>
<li>UI/UX: Frontend Developer;
<ul>
<li>HTML</li>
<li>CSS/Bootstrap</li>
<li>Javascript</li>
<li>Angular</li>
<li>Currently learning Reactjs</li>
</ul>
</li>
<li>Backend development/business logic:
<ul>
<li>Python Flask</li>
<li>Python Django</li>
<li> Currently learning Node.js with Express. </li>
<li>Database: PostgreSQL </li>
</ul>
</ol>
</div>
<div class="Hobbies">
<ol type="I">
<label class="meSection">Hobbies</label>
<li>Tackling programming and coding challenges.</li>
<li>Playing chess and other strategy games. If you'd like to challenge me, <a href="https://lichess.org/iYcR0blZ">HERE.</a> </li>
<li>Driving. Nothing calms me more than a good drive. <a href="https://youtu.be/8_NBwub3gxg">The open road.</a> To somewhere near or far, or nowhere at all.</li>
<li>Reading books. I love to grow my mind. Getting lost in a good book is one of the few pleasures available for close to nothing in this world.</li>
</ol>
</div>
<div>
<ol>
<label class="meSection">Interests</label>
<li>Computers and their workings.</li>
<li>Machine learning and automation.</li>
<li>Art, poetry and literature.</li>
<li>Astronomy, the heavens know no bounds.</li>
</ol>
</div>
</div>
</section>
<section class="container" id="contactMe">
<div class="container">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-xs-6">
<h2 class="inTouch">Get in touch</h2>
<form class="" action="index.html" method="post">
<div class="form-group">
<input type="email" placeholder="email" class="form-control" id="email" />
</div>
<form class="" action="index.html" method="post">
<div class="form-group">
<input type="text" placeholder="subject" class="form-control" id="subject" />
</div>
<form class="" action="index.html" method="post">
<div class="form-group">
<input type="text" class="form-control" placeholder="Message" id="text" />
</div>
<form class="" action="index.html" method="post">
<div class="form-group">
<button type="button" class="btn btn-primary btn-lg">Share your thoughts</button>
</div>
</div>
</form>
</div>
</div>
</section>
<footer>
<div class="connectSocial">
<div class="container-fluid">
<a href="https://stackoverflow.com/users/16427030/francisflow"><i class="social-icon fab fa-stack-overflow"></i></a>
<i class="social-icon fab fa-twitter"></i>
<a href="https://www.linkedin.com/in/francis-karanja-821924216/"><i class="social-icon fab fa-linkedin-in"></i></a>
<a href="https://github.com/"><i class="social-icon fab fa-github"></i></a>
</div>
<a class="nav-link" href="#title">Back to top</a>
<p>© 2021 FrancisNgigi🍀</p>
</footer>
</body>
</html>