Skip to content

Commit a4f6bbb

Browse files
Andre-AndreatiAndre-Andreati
committed
Ready
1 parent 14c7d77 commit a4f6bbb

File tree

3 files changed

+55
-70
lines changed

3 files changed

+55
-70
lines changed

‎index.html‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
<!DOCTYPE html>
2-
<html lang="en"><head>
3-
<meta charset="utf-8" />
4-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5-
<title>Portfolio</title>
6-
<link href="style.css" rel="stylesheet"/>
7-
</head>
8-
91
<body>
102
<div id="navbar-container">
113
<nav id="navbar">
@@ -18,15 +10,15 @@ <h1>Andreati</h1>
1810
<h1>ENGINNERING</h1>
1911
</a>
2012
</header>
21-
<button onclick="openNav()" id="menubtn">☰</button><button id="themebtn" onclick="changeTheme()"><img class="theme-img" src="images/sun.png" alt="light" id="dark-light-img"></button><ul id="nav-menu" class="hide-in-portrait" onclick="openNav()">
13+
<button onclick="openNav()" id="menubtn">☰</button><ul id="nav-menu" class="hide-in-portrait" onclick="openNav()">
2214
<li><a href="#mechanical">Mechanical</a></li>
2315
<li><a href="#software">Software</a></li>
2416
<li><a href="#data">Data and Machine Learning</a></li>
2517
<li><a href="#certificates">Certificates and Projects</a></li>
2618
<li><a href="#contact">Contact</a></li>
2719
</ul>
2820
<footer id="nav-footer">
29-
<img id="ligth-img" class="theme-img" src="images/sun.png" alt="light">
21+
<button id="themebtn" onclick="changeTheme()"><img class="theme-img" src="images/sun.png" alt="light" id="dark-light-img"></button><img id="ligth-img" class="theme-img" src="images/sun.png" alt="light">
3022
<div id="toggle-div">
3123
<input type="checkbox" class="hide-me" id="theme-toggle" value="dark">
3224
<label class="toggle" for="theme-toggle" value="dark"></label>
@@ -135,7 +127,7 @@ <h1 class="subtitle">Data and Machine Learning</h1>
135127

136128
<section class="section" id="certificates">
137129
<div class="section-div">
138-
<h3>Certificates:</h3>
130+
<h1 class="subtitle">Certificates:</h1>
139131
<div class="grid">
140132
<a href="https://www.freecodecamp.org/certification/Andreati/data-analysis-with-python-v7" target="_blank">
141133
<img class="certificate-img" src="images/FCC Data Analysis.png" alt="Data Analysis Certification"></a>
@@ -148,7 +140,7 @@ <h3>Certificates:</h3>
148140
<a href="https://www.freecodecamp.org/certification/Andreati/javascript-algorithms-and-data-structures" target="_blank">
149141
<img class="certificate-img" src="images/FCC Javascript.png" alt="Javascript Algorithms and Data Structures Certification"></a>
150142
</div>
151-
<h3>Projects:</h3>
143+
<h1 class="subtitle">Projects:</h1>
152144
<div class="grid">
153145

154146
<div class="certificate-container" style="margin-left: 0px;margin-top: 0px;margin-bottom: 0px;">
@@ -193,8 +185,5 @@ <h1 class="subtitle">Contact</h1>
193185
</main>
194186

195187
<script src="script.js"></script>
196-
197-
</body>
198-
199-
</html>
200188

189+
</body>

‎script.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,4 @@ themeToggle.addEventListener('click', function() {
2525
toggle between hiding and showing the dropdown content */
2626
function openNav() {
2727
document.getElementById("nav-menu").classList.toggle("show");
28-
}
29-
30-
function changeTheme() {
31-
console.log('clicked')
32-
document.getElementById("themeToggle").click();
3328
}

‎style.css‎

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ html:has([value="dark"]:checked) {
2525
body {
2626
margin: 0px;
2727
padding: 0px;
28-
width: 100%;
29-
height: 100%;
28+
width: 100vw;
29+
height: 100vh;
3030
--nav-width: 400px;
3131
}
3232

@@ -267,8 +267,9 @@ a {
267267

268268
.certificate-img {
269269
max-height: 300px;
270-
padding: 20px;
270+
padding: 20px 0 0 0;
271271
vertical-align: middle;
272+
max-width: 100%;
272273
}
273274

274275
/* The overlay effect - lays on top of the container and over the image */
@@ -278,7 +279,7 @@ a {
278279
background: rgba(0, 0, 0, 0.5); /* Black see-through */
279280
transition: .5s ease;
280281
opacity: 0;
281-
color: white;
282+
color: lightgray;
282283
font-size: 30px;
283284
padding: 20px;
284285
text-align: center;
@@ -291,12 +292,14 @@ a {
291292

292293
p {
293294
margin: 10px;
294-
}
295+
}
296+
297+
/*PORTRAIT ORIENTATION*/
295298

296299
@media (orientation: portrait) {
297300

298301
#navbar-container {
299-
width: 100%;
302+
width: 100vw;
300303
height: 10vh;
301304
padding-bottom: 1px;
302305
background-image:
@@ -306,30 +309,48 @@ p {
306309
var(--color-accent),
307310
var(--color-sidebar)
308311
);
312+
z-index: 1;
309313
}
310314

311315
#navbar {
312316
flex-direction: row;
317+
justify-content: space-around;
313318
}
314319

315320
#sidebar-logo {
316-
width: 9vh;
317-
height: 9vh;
318-
margin: auto 20px;
321+
width: 8vh;
322+
height: 8vh;
323+
margin: auto 10px;
319324
}
320325

321326
#nav-header {
327+
font-size: 18px;
328+
padding: 10px;
329+
}
330+
331+
#menubtn {
332+
display: flex;
322333
font-size: 40px;
334+
color: var(--color-sidebar-title);
335+
background-color: transparent;
336+
border: none;
323337
}
324338

339+
#nav-footer {
340+
position: fixed;
341+
top: 11vh;
342+
width: 100%;
343+
display: none;
344+
}
345+
325346
#nav-menu {
326347
position: absolute;
327348
z-index: 1;
328349
top: 10vh;
329-
right: 0;
330-
width: 70vw;
350+
right: 0vw;
351+
width: 80vw;
331352
padding-top: 1px;
332-
margin: 10px;
353+
margin: 5px;
333354
background-image:
334355
linear-gradient(
335356
to right,
@@ -346,38 +367,11 @@ p {
346367
}
347368

348369
#nav-menu li {
349-
font-size: 40px;
350-
line-height: 150px;
370+
font-size: 20px;
371+
line-height: 50px;
351372
margin-bottom: 1px;
352373
}
353374

354-
#menubtn {
355-
display: block;
356-
font-size: 100px;
357-
color: var(--color-sidebar-title);
358-
background-color: transparent;
359-
border: none;
360-
margin-left: auto;
361-
}
362-
363-
#themebtn {
364-
display: block;
365-
height: 7vh;
366-
width: 7vh;
367-
margin: auto 20px auto auto;
368-
background-color: transparent;
369-
border: none;
370-
}
371-
372-
#dark-light-img {
373-
width: 7vh;
374-
max-height: 7vh;
375-
}
376-
377-
#nav-footer {
378-
display: none;
379-
}
380-
381375
main {
382376
margin: auto;
383377
}
@@ -388,14 +382,14 @@ p {
388382
}
389383

390384
#title-1 {
391-
font-size: 80px;
385+
font-size: 40px;
392386
}
393387
#title-2 {
394-
font-size: 60px;
388+
font-size: 20px;
389+
margin: 20px;
395390
}
396391
#title-3 {
397-
font-size: 40px;
398-
margin-bottom: 100px;
392+
font-size: 20px;
399393
}
400394

401395
.section {
@@ -405,14 +399,21 @@ p {
405399
.section-div {
406400
min-height: auto;
407401
padding: 20px;
408-
font-size: 30px;
409-
line-height: 50px;
402+
font-size: 15px;
403+
line-height: 20px;
410404
padding-bottom: 100px;
411405
padding-top: 10vh;
412406
}
413407
.subtitle {
414-
font-size: 50px;
415-
margin: 60px;
408+
font-size: 30px;
409+
margin: 30px;
410+
line-height: 40px;
411+
}
412+
413+
.certificate-overlay {
414+
bottom: 0px;
415+
opacity: 1;
416+
font-size: 20px;
416417
}
417418

418419
}

0 commit comments

Comments
 (0)