355 lines
11 KiB
HTML
355 lines
11 KiB
HTML
|
<!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>
|