First commit
BIN
.DS_Store
vendored
Normal file
BIN
assets/.DS_Store
vendored
Normal file
BIN
assets/DarkmodeLogo.png
Normal file
After Width: | Height: | Size: 275 KiB |
BIN
assets/LogolicusZDarkmode.png
Normal file
After Width: | Height: | Size: 219 KiB |
BIN
assets/Untitled-09.jpg
Normal file
After Width: | Height: | Size: 3.6 MiB |
BIN
assets/Untitled-11.jpg
Normal file
After Width: | Height: | Size: 4.1 MiB |
BIN
assets/Untitled-20.jpg
Normal file
After Width: | Height: | Size: 1.5 MiB |
BIN
assets/Untitled-28.jpg
Normal file
After Width: | Height: | Size: 1.9 MiB |
BIN
assets/WEB-21.jpg
Normal file
After Width: | Height: | Size: 6.7 MiB |
BIN
assets/WEB-22.jpg
Normal file
After Width: | Height: | Size: 7.1 MiB |
BIN
assets/WEB-23.jpg
Normal file
After Width: | Height: | Size: 5.9 MiB |
BIN
assets/WEB-24.jpg
Normal file
After Width: | Height: | Size: 5.5 MiB |
BIN
assets/arrow.png
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
assets/checkmark.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
assets/education.png
Normal file
After Width: | Height: | Size: 8.4 KiB |
BIN
assets/email.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
assets/experience.png
Normal file
After Width: | Height: | Size: 9.7 KiB |
BIN
assets/github.png
Normal file
After Width: | Height: | Size: 8.4 KiB |
1
assets/instagram.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#282828;}</style></defs><title/><path class="cls-1" d="M250,193.27A56.73,56.73,0,1,0,306.73,250,56.8,56.8,0,0,0,250,193.27Z"/><path class="cls-1" d="M316.74,105.49H183.26a77.86,77.86,0,0,0-77.77,77.77V316.74a77.86,77.86,0,0,0,77.77,77.77H316.74a77.86,77.86,0,0,0,77.77-77.77V183.26A77.86,77.86,0,0,0,316.74,105.49ZM250,336.7A86.7,86.7,0,1,1,336.7,250,86.8,86.8,0,0,1,250,336.7Zm95.27-160.26A21.41,21.41,0,1,1,366.68,155,21.41,21.41,0,0,1,345.27,176.45Z"/><path class="cls-1" d="M484.85,124.74a144.17,144.17,0,0,0-2.32-25.29c-1.94-10.19-4.67-20.12-9.55-29.33A101.84,101.84,0,0,0,453.39,44a97.14,97.14,0,0,0-42.76-24.4c-14.83-4-30-4.84-45.21-4.82a.46.46,0,0,1-.09-.23H134.59c0,.08,0,.16,0,.23-8.65.16-17.32.09-25.92,1.16A123.46,123.46,0,0,0,81,22.14,97.48,97.48,0,0,0,44.25,46.26,97.15,97.15,0,0,0,19.68,89.17c-3.94,14.72-4.8,29.73-4.82,44.85L14.7,365.69v0c.28,10.45.37,21,2.13,31.36,1.87,11,4.54,21.71,9.64,31.69A101.36,101.36,0,0,0,54.77,463a91.91,91.91,0,0,0,28.31,15.35c15.12,4.88,30.72,6.75,46.55,6.84,9.88.06,19.74.31,29.62.27,71.74-.3,143.49.52,215.23-.44a169.32,169.32,0,0,0,28.23-3A95.61,95.61,0,0,0,450,459c15.78-14.08,26.43-31.3,31.24-52.09,3.15-13.59,3.93-27.38,4.07-41.21v-2.76C485.3,361.86,484.89,127.84,484.85,124.74Zm-60.38,192A107.87,107.87,0,0,1,316.74,424.48H183.26A107.87,107.87,0,0,1,75.52,316.74V183.26A107.87,107.87,0,0,1,183.26,75.52H316.74A107.87,107.87,0,0,1,424.48,183.26Z"/></svg>
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/linkedin.png
Normal file
After Width: | Height: | Size: 13 KiB |
354
index.html
Normal file
|
@ -0,0 +1,354 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>My Portfolio</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<link rel="stylesheet" href="mediaqueries.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav id="desktop-nav">
|
||||||
|
<div class="logo">LogolicusZ</div>
|
||||||
|
<div>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
<li><a href="#projects">Gallery</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<nav id="hamburger-nav">
|
||||||
|
<div class="logo">LogolicusZ</div>
|
||||||
|
<div class="hamburger-menu">
|
||||||
|
<div class="hamburger-icon" onclick="toggleMenu()">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
<div class="menu-links">
|
||||||
|
<li><a href="#experience" onclick="toggleMenu()">About</a></li>
|
||||||
|
<li><a href="#projects" onclick="toggleMenu()">Gallery</a></li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<section id="profile">
|
||||||
|
<div class="section__pic-container">
|
||||||
|
<img src="./assets/DarkmodeLogo.png" alt="John Doe profile picture" />
|
||||||
|
</div>
|
||||||
|
<div class="section__text">
|
||||||
|
<p class="section__text__p1">Hello, I'm</p>
|
||||||
|
<h1 class="title">LogolicusZ</h1>
|
||||||
|
<p class="section__text__p2">Artist</p>
|
||||||
|
<div class="btn-container">
|
||||||
|
|
||||||
|
<button class="btn btn-color-1" onclick="location.href='./#contact'">
|
||||||
|
Contact Info
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="socials-container">
|
||||||
|
<img
|
||||||
|
src="assets/instagram.svg"
|
||||||
|
alt="My instagram profile"
|
||||||
|
class="icon"
|
||||||
|
onclick="location.href='https://www.instagram.com/art_logolicusz/?hl=af'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="about">
|
||||||
|
<p class="section__text__p1">Get To Know More</p>
|
||||||
|
<h1 class="title">About Me</h1>
|
||||||
|
<div class="section-container">
|
||||||
|
|
||||||
|
<div class="about-details-container">
|
||||||
|
<div class="about-containers">
|
||||||
|
<div class="details-container">
|
||||||
|
<img
|
||||||
|
src="./assets/experience.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<h3>Experience</h3>
|
||||||
|
<p>2+ years <br />Frontend Development</p>
|
||||||
|
</div>
|
||||||
|
<div class="details-container">
|
||||||
|
<img
|
||||||
|
src="./assets/education.png"
|
||||||
|
alt="Education icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<h3>Education</h3>
|
||||||
|
<p>B.Sc. Bachelors Degree<br />M.Sc. Masters Degree</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-container">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quis
|
||||||
|
reprehenderit et laborum, rem, dolore eum quod voluptate
|
||||||
|
exercitationem nobis, nihil esse debitis maxime facere minus sint
|
||||||
|
delectus velit in eos quo officiis explicabo deleniti dignissimos.
|
||||||
|
Eligendi illum libero dolorum cum laboriosam corrupti quidem,
|
||||||
|
reiciendis ea magnam? Nulla, impedit fuga!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src="./assets/arrow.png"
|
||||||
|
alt="Arrow icon"
|
||||||
|
class="icon arrow"
|
||||||
|
onclick="location.href='./#experience'"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
<section id="experience">
|
||||||
|
<p class="section__text__p1">Explore My</p>
|
||||||
|
<h1 class="title">Experience</h1>
|
||||||
|
<div class="experience-details-container">
|
||||||
|
<div class="about-containers">
|
||||||
|
<div class="details-container">
|
||||||
|
<h2 class="experience-sub-title">Frontend Development</h2>
|
||||||
|
<div class="article-container">
|
||||||
|
<article>
|
||||||
|
<img
|
||||||
|
src="./assets/checkmark.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3>HTML</h3>
|
||||||
|
<p>Experienced</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<img
|
||||||
|
src="./assets/checkmark.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3>CSS</h3>
|
||||||
|
<p>Experienced</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<img
|
||||||
|
src="./assets/checkmark.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3>SASS</h3>
|
||||||
|
<p>Intermediate</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<img
|
||||||
|
src="./assets/checkmark.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3>JavaScript</h3>
|
||||||
|
<p>Basic</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<img
|
||||||
|
src="./assets/checkmark.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3>TypeScript</h3>
|
||||||
|
<p>Basic</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<img
|
||||||
|
src="./assets/checkmark.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3>Material UI</h3>
|
||||||
|
<p>Intermediate</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="details-container">
|
||||||
|
<h2 class="experience-sub-title">Frontend Development</h2>
|
||||||
|
<div class="article-container">
|
||||||
|
<article>
|
||||||
|
<img
|
||||||
|
src="./assets/checkmark.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Basic</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<img
|
||||||
|
src="./assets/checkmark.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3>Node JS</h3>
|
||||||
|
<p>Intermediate</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<img
|
||||||
|
src="./assets/checkmark.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3>Express JS</h3>
|
||||||
|
<p>Intermediate</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<img
|
||||||
|
src="./assets/checkmark.png"
|
||||||
|
alt="Experience icon"
|
||||||
|
class="icon"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3>Git</h3>
|
||||||
|
<p>Intermediate</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src="./assets/arrow.png"
|
||||||
|
alt="Arrow icon"
|
||||||
|
class="icon arrow"
|
||||||
|
onclick="location.href='./#projects'"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
<section id="projects">
|
||||||
|
<p class="section__text__p1">Browse My Recent</p>
|
||||||
|
<h1 class="title">Projects</h1>
|
||||||
|
<div class="experience-details-container">
|
||||||
|
<div class="about-containers">
|
||||||
|
<div class="details-container color-container">
|
||||||
|
<div class="article-container">
|
||||||
|
<img
|
||||||
|
src="./assets/WEB-21.jpg"
|
||||||
|
alt="Project 1"
|
||||||
|
class="project-img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="details-container color-container">
|
||||||
|
<div class="article-container">
|
||||||
|
<img
|
||||||
|
src="./assets/WEB-22.jpg"
|
||||||
|
alt="Project 2"
|
||||||
|
class="project-img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="details-container color-container">
|
||||||
|
<div class="article-container">
|
||||||
|
<img
|
||||||
|
src="./assets/Untitled-28.jpg"
|
||||||
|
alt="Project 3"
|
||||||
|
class="project-img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="details-container color-container">
|
||||||
|
<div class="article-container">
|
||||||
|
<img
|
||||||
|
src="./assets/Untitled-09.jpg"
|
||||||
|
alt="Project 3"
|
||||||
|
class="project-img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="btn-container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="details-container color-container">
|
||||||
|
<div class="article-container">
|
||||||
|
<img
|
||||||
|
src="./assets/Untitled-20.jpg"
|
||||||
|
alt="Project 3"
|
||||||
|
class="project-img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="btn-container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="details-container color-container">
|
||||||
|
<div class="article-container">
|
||||||
|
<img
|
||||||
|
src="./assets/Untitled-28.jpg"
|
||||||
|
alt="Project 3"
|
||||||
|
class="project-img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src="./assets/arrow.png"
|
||||||
|
alt="Arrow icon"
|
||||||
|
class="icon arrow"
|
||||||
|
onclick="location.href='./#contact'"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
<section id="contact">
|
||||||
|
<p class="section__text__p1">Get in Touch</p>
|
||||||
|
<h1 class="title">Contact Me</h1>
|
||||||
|
<div class="contact-info-upper-container">
|
||||||
|
<div class="contact-info-container">
|
||||||
|
<img
|
||||||
|
src="./assets/email.png"
|
||||||
|
alt="Email icon"
|
||||||
|
class="icon contact-icon email-icon"
|
||||||
|
/>
|
||||||
|
<p><a href="mailto:examplemail@gmail.com">Adjordbra@gmail.com</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<nav>
|
||||||
|
<div class="nav-links-container">
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
<li><a href="#projects">Gallery</a></li>
|
||||||
|
</ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<p>Copyright © 2023 LogolicusZ. All Rights Reserved.</p>
|
||||||
|
</footer>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
103
mediaqueries.css
Normal file
|
@ -0,0 +1,103 @@
|
||||||
|
@media screen and (max-width: 1400px) {
|
||||||
|
#profile {
|
||||||
|
height: 83vh;
|
||||||
|
margin-bottom: 6rem;
|
||||||
|
}
|
||||||
|
.about-containers {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
#contact,
|
||||||
|
#projects {
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
#desktop-nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#hamburger-nav {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#experience,
|
||||||
|
.experience-details-container {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
#profile,
|
||||||
|
.section-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.arrow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
section,
|
||||||
|
.section-container {
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
margin: 0 5%;
|
||||||
|
}
|
||||||
|
.section__pic-container {
|
||||||
|
width: 275px;
|
||||||
|
height: 275px;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
}
|
||||||
|
.about-containers {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
#contact,
|
||||||
|
footer {
|
||||||
|
height: 40vh;
|
||||||
|
}
|
||||||
|
#profile {
|
||||||
|
height: 83vh;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
article {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
footer nav {
|
||||||
|
height: fit-content;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.about-containers,
|
||||||
|
.contact-info-upper-container,
|
||||||
|
.btn-container {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.contact-info-container {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.contact-info-container p,
|
||||||
|
.nav-links li a {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.experience-sub-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
.nav-links {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.section__pic-container {
|
||||||
|
width: auto;
|
||||||
|
height: 46vw;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.section__text__p2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.text-container {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
}
|
6
script.js
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
function toggleMenu() {
|
||||||
|
const menu = document.querySelector(".menu-links");
|
||||||
|
const icon = document.querySelector(".hamburger-icon");
|
||||||
|
menu.classList.toggle("open");
|
||||||
|
icon.classList.toggle("open");
|
||||||
|
}
|
435
style.css
Normal file
|
@ -0,0 +1,435 @@
|
||||||
|
/* GENERAL */
|
||||||
|
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: rgb(85, 85, 85);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TRANSITION */
|
||||||
|
|
||||||
|
a,
|
||||||
|
.btn {
|
||||||
|
transition: all 300ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* DESKTOP NAV */
|
||||||
|
|
||||||
|
nav,
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
height: 17vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
gap: 2rem;
|
||||||
|
list-style: none;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
text-decoration-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: grey;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 1rem;
|
||||||
|
text-decoration-color: rgb(181, 181, 181);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo:hover {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HAMBURGER MENU */
|
||||||
|
|
||||||
|
#hamburger-nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-menu {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 24px;
|
||||||
|
width: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon span {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: black;
|
||||||
|
transition: all 0.3 ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-links {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
background-color: white;
|
||||||
|
width: fit-content;
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3 ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-links a {
|
||||||
|
display: block;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3 ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-links li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-links.open {
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon.open span:first-child {
|
||||||
|
transform: rotate(45deg) translate(10px, 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon.open span:nth-child(2) {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon.open span:last-child {
|
||||||
|
transform: rotate(-45deg) translate(10px, -5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon span:first-child {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon span:first-child {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon span:first-child {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SECTIONS */
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding-top: 4vh;
|
||||||
|
height: 96vh;
|
||||||
|
margin: 0 10rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PROFILE SECTION */
|
||||||
|
|
||||||
|
#profile {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 5rem;
|
||||||
|
height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__pic-container {
|
||||||
|
display: flex;
|
||||||
|
height: 400px;
|
||||||
|
width: 400px;
|
||||||
|
margin: auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__text {
|
||||||
|
align-self: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__text p {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__text__p1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__text__p2 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#socials-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ICONS */
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* BUTTONS */
|
||||||
|
|
||||||
|
.btn-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 300ms ease;
|
||||||
|
padding: 1rem;
|
||||||
|
width: 8rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-color-1,
|
||||||
|
.btn-color-2 {
|
||||||
|
border: rgb(53, 53, 53) 0.1rem solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-color-1:hover,
|
||||||
|
.btn-color-2:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-color-1,
|
||||||
|
.btn-color-2:hover {
|
||||||
|
background: rgb(53, 53, 53);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-color-1:hover {
|
||||||
|
background: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-color-2 {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-color-2:hover {
|
||||||
|
border: rgb(255, 255, 255) 0.1rem solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-container {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ABOUT SECTION */
|
||||||
|
|
||||||
|
#about {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-containers {
|
||||||
|
gap: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-details-container {
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-containers,
|
||||||
|
.about-details-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-pic {
|
||||||
|
border-radius: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
position: absolute;
|
||||||
|
right: -5rem;
|
||||||
|
bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-container {
|
||||||
|
padding: 1.5rem;
|
||||||
|
flex: 1;
|
||||||
|
background: white;
|
||||||
|
border-radius: 2rem;
|
||||||
|
border: rgb(53, 53, 53) 0.1rem solid;
|
||||||
|
border-color: rgb(163, 163, 163);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container {
|
||||||
|
gap: 4rem;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__pic-container {
|
||||||
|
height: 400px;
|
||||||
|
width: 400px;
|
||||||
|
margin: auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* EXPERIENCE SECTION */
|
||||||
|
|
||||||
|
#experience {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.experience-sub-title {
|
||||||
|
color: rgb(85, 85, 85);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.experience-details-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-container {
|
||||||
|
display: flex;
|
||||||
|
text-align: initial;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 2.5rem;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
display: flex;
|
||||||
|
width: 10rem;
|
||||||
|
justify-content: space-around;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article .icon {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PROJECTS SECTION */
|
||||||
|
|
||||||
|
#projects {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-container {
|
||||||
|
border-color: rgb(163, 163, 163);
|
||||||
|
background: rgb(250, 250, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-img {
|
||||||
|
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-title {
|
||||||
|
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-btn {
|
||||||
|
color: black;
|
||||||
|
border-color: rgb(163, 163, 163);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CONTACT */
|
||||||
|
|
||||||
|
#contact {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 70vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-upper-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 2rem;
|
||||||
|
border: rgb(53, 53, 53) 0.1rem solid;
|
||||||
|
border-color: rgb(163, 163, 163);
|
||||||
|
background: (250, 250, 250);
|
||||||
|
margin: 2rem auto;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-container p {
|
||||||
|
font-size: larger;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-icon {
|
||||||
|
height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FOOTER SECTION */
|
||||||
|
|
||||||
|
footer {
|
||||||
|
height: 26vh;
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
text-align: center;
|
||||||
|
}
|