Skip to content

Commit 749aa30

Browse files
author
Nikolai Andrei Calizar
committed
Mobile view fix.
1 parent 042a373 commit 749aa30

9 files changed

Lines changed: 61 additions & 21 deletions

‎css/style.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/style.min.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎img/bootstrap.jpg‎

11.1 KB
Loading

‎img/icons8-programmer-flaticons-lineal-color-96.png‎

4.73 KB
Loading

‎img/java.jpg‎

12.4 KB
Loading

‎img/kotlin.jpg‎

3.83 KB
Loading

‎img/python.jpg‎

14.2 KB
Loading

‎index.html‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Nikolai Andrei Calizar</title>
7+
<link
8+
rel="icon"
9+
type="image/x-icon"
10+
href="/img/icons8-programmer-flaticons-lineal-color-96.png"
11+
/>
712
<link rel="stylesheet" href="/css/style.min.css" />
813
<link
914
rel="stylesheet"
@@ -15,7 +20,7 @@
1520
<header>
1621
<nav class="navbar navbar-expand-lg navbar-dark bg-dark p-3" id="navbar">
1722
<div class="container-fluid">
18-
<a class="navbar-brand" href="#">Nikolai Andrei Calizar</a>
23+
<a class="navbar-brand" href="#"><strong>Nikolai Calizar</strong></a>
1924
<button
2025
class="navbar-toggler"
2126
type="button"
@@ -50,7 +55,7 @@
5055
<!-- End of Navbar Section-->
5156

5257
<!-- Main Content Section -->
53-
<main class="text-white">
58+
<main>
5459
<div class="container text-center" id="main-container">
5560
<div class="row">
5661
<div class="container">
@@ -61,17 +66,19 @@
6166
<h1 class="display-1">About Me</h1>
6267
</div>
6368
<div class="row">
64-
<p class="lead text-start">
65-
Hi! My name is <span>Nikolai Andrei Abella Calizar</span>.
66-
I am a Full Stack Developer with an experience in both
69+
<p class="text-start">
70+
Hi! My name is
71+
<span class="fw-bold" id="name"
72+
>Nikolai Andrei Abella Calizar</span
73+
>. I am a Full Stack Developer with an experience in both
6774
front-end and back-end development. My journey in this
6875
field has allowed me to work on a variety of projects,
6976
tackling challenges and overcoming obstacles to ensure
7077
successful implementation and deployment.
7178
</p>
7279
</div>
7380
<div class="row">
74-
<p class="lead text-start">
81+
<p class="text-start">
7582
My strength lies in problem-solving, adaptability, and
7683
collaboration, enabling me to communicate effectively
7784
within teams and translate project requirements into
@@ -81,7 +88,7 @@ <h1 class="display-1">About Me</h1>
8188
</p>
8289
</div>
8390
<div class="row">
84-
<p class="lead text-start">
91+
<p class="text-start">
8592
My approach is results-oriented, focusing on delivering
8693
solutions that meet both user needs and business
8794
objectives. I am passionate about development and always
@@ -175,17 +182,17 @@ <h1 class="display-1">My Projects</h1>
175182
<div class="row g-0">
176183
<div class="col-md-4">
177184
<img
178-
src="..."
185+
src="/img/bootstrap.jpg"
179186
class="img-fluid rounded-start"
180187
alt="..."
181188
/>
182189
</div>
183190
<div class="col-md-8">
184191
<div class="card-body">
185-
<h5 class="card-title">Milktea Shop</h5>
192+
<h5 class="card-title">Smartify</h5>
186193
<p class="card-text">
187194
This is a wider card with supporting text below
188-
as a natural lead-in to additional content. This
195+
as a natural -in to additional content. This
189196
content is a little bit longer.
190197
</p>
191198
</div>
@@ -198,17 +205,17 @@ <h5 class="card-title">Milktea Shop</h5>
198205
<div class="row g-0">
199206
<div class="col-md-4">
200207
<img
201-
src="..."
208+
src="/img/java.jpg"
202209
class="img-fluid rounded-start"
203210
alt="..."
204211
/>
205212
</div>
206213
<div class="col-md-8">
207214
<div class="card-body">
208-
<h5 class="card-title">Smartify</h5>
215+
<h5 class="card-title">Milktea Shop</h5>
209216
<p class="card-text">
210217
This is a wider card with supporting text below
211-
as a natural lead-in to additional content. This
218+
as a natural -in to additional content. This
212219
content is a little bit longer.
213220
</p>
214221
</div>
@@ -223,7 +230,7 @@ <h5 class="card-title">Smartify</h5>
223230
<div class="row g-0">
224231
<div class="col-md-4">
225232
<img
226-
src="..."
233+
src="/img/kotlin.jpg"
227234
class="img-fluid rounded-start"
228235
alt="..."
229236
/>
@@ -233,7 +240,7 @@ <h5 class="card-title">Smartify</h5>
233240
<h5 class="card-title">CrossRoads</h5>
234241
<p class="card-text">
235242
This is a wider card with supporting text below
236-
as a natural lead-in to additional content. This
243+
as a natural -in to additional content. This
237244
content is a little bit longer.
238245
</p>
239246
</div>
@@ -246,7 +253,7 @@ <h5 class="card-title">CrossRoads</h5>
246253
<div class="row g-0">
247254
<div class="col-md-4">
248255
<img
249-
src="..."
256+
src="/img/python.jpg"
250257
class="img-fluid rounded-start"
251258
alt="..."
252259
/>
@@ -256,7 +263,7 @@ <h5 class="card-title">CrossRoads</h5>
256263
<h5 class="card-title">GUI Calculator</h5>
257264
<p class="card-text">
258265
This is a wider card with supporting text below
259-
as a natural lead-in to additional content. This
266+
as a natural -in to additional content. This
260267
content is a little bit longer.
261268
</p>
262269
</div>

‎scss/style.scss‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
body {
55
background-color: #2b184e;
66
font-family: "JetBrains Mono", monospace;
7+
color: white;
78
}
89

910
#navbar {
@@ -15,10 +16,42 @@ body {
1516
}
1617

1718
#main-container {
18-
margin-top: 100px;
1919
margin-bottom: 100px;
2020
}
2121

22+
#about-section {
23+
margin-top: 100px;
24+
}
25+
26+
#name {
27+
color: #ffca2c;
28+
}
29+
2230
#services-section {
23-
gap: 200px;
31+
margin-top: 100px;
32+
}
33+
34+
#projects-section {
35+
margin-top: 100px;
36+
}
37+
#contact-section {
38+
margin-top: 100px;
39+
}
40+
41+
@media screen and (max-width: 575px) {
42+
body {
43+
font-size: 0.8rem;
44+
}
45+
}
46+
47+
@media screen and (min-width: 576px) {
48+
body {
49+
font-size: 1rem;
50+
}
51+
}
52+
53+
@media screen and (min-width: 768px) {
54+
body {
55+
font-size: 1.2rem;
56+
}
2457
}

0 commit comments

Comments
 (0)