commit bbaaab592afe4dd9e79d43b09246747955a63467 Author: LogolicusYZ Date: Wed Sep 6 11:09:13 2023 +0200 First commit diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..86b8a0a Binary files /dev/null and b/.DS_Store differ diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000..7276f7a Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/DarkmodeLogo.png b/assets/DarkmodeLogo.png new file mode 100644 index 0000000..6979fad Binary files /dev/null and b/assets/DarkmodeLogo.png differ diff --git a/assets/LogolicusZDarkmode.png b/assets/LogolicusZDarkmode.png new file mode 100644 index 0000000..1f24caf Binary files /dev/null and b/assets/LogolicusZDarkmode.png differ diff --git a/assets/Untitled-09.jpg b/assets/Untitled-09.jpg new file mode 100644 index 0000000..e8a7c43 Binary files /dev/null and b/assets/Untitled-09.jpg differ diff --git a/assets/Untitled-11.jpg b/assets/Untitled-11.jpg new file mode 100644 index 0000000..d649b40 Binary files /dev/null and b/assets/Untitled-11.jpg differ diff --git a/assets/Untitled-20.jpg b/assets/Untitled-20.jpg new file mode 100644 index 0000000..585e343 Binary files /dev/null and b/assets/Untitled-20.jpg differ diff --git a/assets/Untitled-28.jpg b/assets/Untitled-28.jpg new file mode 100644 index 0000000..e46cced Binary files /dev/null and b/assets/Untitled-28.jpg differ diff --git a/assets/WEB-21.jpg b/assets/WEB-21.jpg new file mode 100644 index 0000000..070dd4a Binary files /dev/null and b/assets/WEB-21.jpg differ diff --git a/assets/WEB-22.jpg b/assets/WEB-22.jpg new file mode 100644 index 0000000..c163acd Binary files /dev/null and b/assets/WEB-22.jpg differ diff --git a/assets/WEB-23.jpg b/assets/WEB-23.jpg new file mode 100644 index 0000000..eb390b7 Binary files /dev/null and b/assets/WEB-23.jpg differ diff --git a/assets/WEB-24.jpg b/assets/WEB-24.jpg new file mode 100644 index 0000000..c670229 Binary files /dev/null and b/assets/WEB-24.jpg differ diff --git a/assets/arrow.png b/assets/arrow.png new file mode 100644 index 0000000..395333f Binary files /dev/null and b/assets/arrow.png differ diff --git a/assets/checkmark.png b/assets/checkmark.png new file mode 100644 index 0000000..e18e143 Binary files /dev/null and b/assets/checkmark.png differ diff --git a/assets/education.png b/assets/education.png new file mode 100644 index 0000000..1a0cd97 Binary files /dev/null and b/assets/education.png differ diff --git a/assets/email.png b/assets/email.png new file mode 100644 index 0000000..480e480 Binary files /dev/null and b/assets/email.png differ diff --git a/assets/experience.png b/assets/experience.png new file mode 100644 index 0000000..e457565 Binary files /dev/null and b/assets/experience.png differ diff --git a/assets/github.png b/assets/github.png new file mode 100644 index 0000000..9490ffc Binary files /dev/null and b/assets/github.png differ diff --git a/assets/instagram.svg b/assets/instagram.svg new file mode 100644 index 0000000..8bacd9a --- /dev/null +++ b/assets/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/linkedin.png b/assets/linkedin.png new file mode 100644 index 0000000..0fbde15 Binary files /dev/null and b/assets/linkedin.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..d09a692 --- /dev/null +++ b/index.html @@ -0,0 +1,354 @@ + + + + + + + My Portfolio + + + + + + +
+
+ John Doe profile picture +
+
+

Hello, I'm

+

LogolicusZ

+

Artist

+
+ + +
+
+ My instagram profile +
+
+
+
+

Get To Know More

+

About Me

+
+ +
+
+
+ Experience icon +

Experience

+

2+ years
Frontend Development

+
+
+ Education icon +

Education

+

B.Sc. Bachelors Degree
M.Sc. Masters Degree

+
+
+
+

+ 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! +

+
+
+
+ Arrow icon +
+
+

Explore My

+

Experience

+
+
+
+

Frontend Development

+
+
+ Experience icon +
+

HTML

+

Experienced

+
+
+
+ Experience icon +
+

CSS

+

Experienced

+
+
+
+ Experience icon +
+

SASS

+

Intermediate

+
+
+
+ Experience icon +
+

JavaScript

+

Basic

+
+
+
+ Experience icon +
+

TypeScript

+

Basic

+
+
+
+ Experience icon +
+

Material UI

+

Intermediate

+
+
+
+
+
+

Frontend Development

+
+
+ Experience icon +
+

PostgreSQL

+

Basic

+
+
+
+ Experience icon +
+

Node JS

+

Intermediate

+
+
+
+ Experience icon +
+

Express JS

+

Intermediate

+
+
+
+ Experience icon +
+

Git

+

Intermediate

+
+
+
+
+
+
+ Arrow icon +
+
+

Browse My Recent

+

Projects

+
+
+
+
+ Project 1 +
+ +
+ +
+
+
+
+ Project 2 +
+ +
+ +
+
+
+
+ Project 3 +
+ +
+ +
+
+
+
+ Project 3 +
+
+ +
+
+
+
+ Project 3 +
+
+ +
+
+
+
+ Project 3 +
+
+
+
+ + Arrow icon +
+
+

Get in Touch

+

Contact Me

+
+
+ +

Adjordbra@gmail.com

+
+ +
+
+ + + + diff --git a/mediaqueries.css b/mediaqueries.css new file mode 100644 index 0000000..efb0d72 --- /dev/null +++ b/mediaqueries.css @@ -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; + } +} diff --git a/script.js b/script.js new file mode 100644 index 0000000..9e776ea --- /dev/null +++ b/script.js @@ -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"); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..d06155e --- /dev/null +++ b/style.css @@ -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; +}