-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·151 lines (142 loc) · 7.98 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Stephane Karim's Portofolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/fontawesome.css">
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100;200;300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/vendors/css/glightbox.min.css">
</head>
<body>
<!-- Start NavBar -->
<nav class="navbar navbar-expand-lg navbar-light menu shadow fixed-top">
<div class="container">
<a class="navbar-brand" href="#home"><img src="/images/slogo1.png" alt="logo image"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#portofolio">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.canva.com/design/DAEXFJkwvqI/rwXz7nAHCvzizqr5eVeCzQ/view?utm_content=DAEXFJkwvqI&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink">Resume
<span class="fas fa-file"></span></a>
</span></a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-success btn-large" href="mailto:[email protected]" aria-expanded="false">Reach Out</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- //Start the intro section -->
<section id="home" class="intro-section mb-0">
<div class="container">
<div class="row align-content-center text-white-50">
<div class="col-md-6 intros">
<h1 class="display-2">
<span class="display-2--intro">Howdy!, I am Stephane</span><br>
<span class="display-2--description lh-base">A software engineer with a background in biology. My creative and curious personality is constantly urging me to learn new skills. I believe that I have found my calling with Software Engineer. I truly believe that the boundaries set by Biology could be pushed in the Tech world. PS: I love React.<br>
<i class=" icon-description fab fa-sass"></i>
<i class=" icon-description fab fa-bootstrap"></i>
<i class=" icon-description fab fa-react"></i>
<i class=" icon-description fab fa-node-js"></i>
<i class=" icon-description fab fa-js"></i>
<i class=" icon-description fab fa-python"></i>
<i class=" icon-description fab fa-docker"></i>
</h1>
</div>
<div class="col-md-6 intros ">
<span class='photo justify-content-end ml-0'><img src="/images/stephane.png" class="img-fluid" alt="..."></span>
</div>
</div>
</div>
<svg class='wave' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#5000ca" fill-opacity="0.55" d="M0,224L30,192C60,160,120,96,180,69.3C240,43,300,53,360,64C420,75,480,85,540,101.3C600,117,660,139,720,138.7C780,139,840,117,900,101.3C960,85,1020,75,1080,106.7C1140,139,1200,213,1260,224C1320,235,1380,181,1410,154.7L1440,128L1440,0L1410,0C1380,0,1320,0,1260,0C1200,0,1140,0,1080,0C1020,0,960,0,900,0C840,0,780,0,720,0C660,0,600,0,540,0C480,0,420,0,360,0C300,0,240,0,180,0C120,0,60,0,30,0L0,0Z"></path></svg>
</section>
<!-- SECTION PORTOFOLIO -->
<section id="portofolio" class="mt-0 mb-3 portofolio align-items-center">
<div class="container">
<div class="row text-center">
<h1 class="display-3 fw-bold text-capitalize text-white-50">Latest Work</h1>
<div class="heading-line"></div>
<p class="lead text-white-50">
My first Projects! </p>
</div>
</div>
<!-- PORTOFOLIO ITEM -->
<div class="container">
<div class="row justify-content-center text-center"></div>
<div class="col-lg-4 col-md-6 mx-auto">
<div class="portofolio-box shadow">
<img src="/images/3.png" alt="portofolio image 1" title="portofolio image 1" class="img-fluid">
<div class="portofolio-info">
<div class="caption">
<h4>Deep Dive</h4>
<p>Music App <br> group project<br>React Styled-Components NodeJs Postman</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mx-auto">
<div class="portofolio-box shadow">
<img src="/images/2.png" alt="portofolio image 2" title="portofolio image 2" class="img-fluid">
<div class="portofolio-info">
<div class="caption">
<h4>Flashcard Game</h4>
<p>Web Game<br> HTML CSS Javascript</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mx-auto">
<div class="portofolio-box shadow">
<img src="/images/4.png" alt="portofolio image 3" title="portofolio image 3" class="img-fluid">
<div class="portofolio-info">
<div class="caption">
<h4>Anime For Each</h4>
<p>Animes LookUp<br> React External API</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<div class="container">
<div class="row py-3">
<div class="col-md-7">
<ul class="nav">
<li class="nav-item">
<a class="nav-link fw-bold" aria-current="page" href="https://github.com/StephtheITSloth">Github</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold" href="https://www.linkedin.com/in/stephane-karim/">LinkedIn</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold" href="https://twitter.com/Stephane_Karim1">Twitter</a>
</li>
</ul>
</div>
<div class="col-md text-md-right">
<small>© 2021 Full Stack Engineer Stephane Karim</small>
</div>
</div>
</div>
<!-- /footer -->
<script src='/assets/vendors/js/glightbox.min.js'></script>
<script type='text/javascript'>
const lightbox = GLightbox({
'href': 'https://www.canva.com/design/DAEXFJkwvqI/rwXz7nAHCvzizqr5eVeCzQ/view?utm_content=DAEXFJkwvqI&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink',
'type': 'image'
});
</script>
<script src='/assets/bootstrap-5.0.2-dist/js/bootstrap.bundle.js'></script>
</body>
</html>