First commit
This commit is contained in:
commit
bbaaab592a
24 changed files with 899 additions and 0 deletions
BIN
.DS_Store
vendored
Normal file
BIN
.DS_Store
vendored
Normal file
Binary file not shown.
BIN
assets/.DS_Store
vendored
Normal file
BIN
assets/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
assets/DarkmodeLogo.png
Normal file
BIN
assets/DarkmodeLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
BIN
assets/LogolicusZDarkmode.png
Normal file
BIN
assets/LogolicusZDarkmode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
BIN
assets/Untitled-09.jpg
Normal file
BIN
assets/Untitled-09.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
BIN
assets/Untitled-11.jpg
Normal file
BIN
assets/Untitled-11.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
BIN
assets/Untitled-20.jpg
Normal file
BIN
assets/Untitled-20.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
assets/Untitled-28.jpg
Normal file
BIN
assets/Untitled-28.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
assets/WEB-21.jpg
Normal file
BIN
assets/WEB-21.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 MiB |
BIN
assets/WEB-22.jpg
Normal file
BIN
assets/WEB-22.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 MiB |
BIN
assets/WEB-23.jpg
Normal file
BIN
assets/WEB-23.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 MiB |
BIN
assets/WEB-24.jpg
Normal file
BIN
assets/WEB-24.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
BIN
assets/arrow.png
Normal file
BIN
assets/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
assets/checkmark.png
Normal file
BIN
assets/checkmark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
assets/education.png
Normal file
BIN
assets/education.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
assets/email.png
Normal file
BIN
assets/email.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
assets/experience.png
Normal file
BIN
assets/experience.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
assets/github.png
Normal file
BIN
assets/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
1
assets/instagram.svg
Normal file
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
BIN
assets/linkedin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
354
index.html
Normal file
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
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
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
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;
|
||||
}
|
||||
Loading…
Reference in a new issue