diff --git a/task-1/assets/cool.png b/task-1/assets/cool.png new file mode 100644 index 0000000..4c934fe Binary files /dev/null and b/task-1/assets/cool.png differ diff --git a/task-1/assets/dark-theme.svg b/task-1/assets/dark-theme.svg new file mode 100644 index 0000000..c50e070 --- /dev/null +++ b/task-1/assets/dark-theme.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/task-1/assets/favicon.ico b/task-1/assets/favicon.ico new file mode 100644 index 0000000..da848e7 Binary files /dev/null and b/task-1/assets/favicon.ico differ diff --git a/task-1/assets/galaxy.jpg b/task-1/assets/galaxy.jpg new file mode 100644 index 0000000..80f9752 Binary files /dev/null and b/task-1/assets/galaxy.jpg differ diff --git a/task-1/assets/light-theme.svg b/task-1/assets/light-theme.svg new file mode 100644 index 0000000..c83f69a --- /dev/null +++ b/task-1/assets/light-theme.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/task-1/axe-screenshot.png b/task-1/axe-screenshot.png new file mode 100644 index 0000000..a849725 Binary files /dev/null and b/task-1/axe-screenshot.png differ diff --git a/task-1/index.html b/task-1/index.html index cf3c175..fd5dbee 100644 --- a/task-1/index.html +++ b/task-1/index.html @@ -3,9 +3,104 @@ - Week 2 assignment + + + Jawad Al Bdiwi | Portfolio Page - +
+
+ grinning smiley face with sunglasses giving thumbs up +
+

Jawad Al Bdiwi

+

Hello and welcome to my portolio page!

+
+ +
+ +
+

About Me

+

+ I am an aspriring full-stack developer, currently enrolled in the Hack + Your Future program. +

+

+ Before that, I was working as a project coordinator at an inburgering + school. +

+
+ + + + + +
+

Get in Touch

+
+
+ + +
+ +
+ + +
+ +
+
+ + +
+ + diff --git a/task-1/mobile-screenshot.png b/task-1/mobile-screenshot.png new file mode 100644 index 0000000..fafbd7c Binary files /dev/null and b/task-1/mobile-screenshot.png differ diff --git a/task-1/script.js b/task-1/script.js new file mode 100644 index 0000000..731e3fa --- /dev/null +++ b/task-1/script.js @@ -0,0 +1,22 @@ +const toggleTheme = document.querySelector("#theme-toggle"); +const contactForm = document.querySelector("#contact-form"); +const formMessage = document.querySelector("#form-message"); + +toggleTheme.addEventListener("click", () => { + document.documentElement.classList.toggle("dark-mode"); + updateToggleIcon(); +}); + +function updateToggleIcon() { + const isDarkMode = document.documentElement.classList.contains("dark-mode"); + const icon = toggleTheme.querySelector("img"); + icon.src = isDarkMode ? "assets/light-theme.svg" : "assets/dark-theme.svg"; +} + +contactForm.addEventListener("submit", function (event) { + event.preventDefault(); // Prevent page reload + console.log("Form submitted!"); + contactForm.reset(); + formMessage.textContent = + "Thanks for reaching out! I'll get back to you soon."; +}); diff --git a/task-1/styles.css b/task-1/styles.css new file mode 100644 index 0000000..37d9faa --- /dev/null +++ b/task-1/styles.css @@ -0,0 +1,357 @@ +/* Global Reset */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Font Import */ +@font-face { + font-family: "Syne Variable"; + font-style: normal; + font-display: swap; + font-weight: 400 800; + src: url(https://cdn.jsdelivr.net/fontsource/fonts/syne:vf@latest/latin-wght-normal.woff2) + format("woff2-variations"); + unicode-range: + U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, + U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; +} + +/* CSS Variables */ +:root { + --font-sans: + "Syne Variable", system-ui, -apple-system, "Segoe UI", "Open Sans", + "Helvetica Neue", Roboto, Arial, sans-serif; + + --radius: 16px; + --bg: #f3e4c9; + --fg: #594439; + --alt: #bfa28c; + --accent: #babf94; + --shadow: 10px 10px rgba(125, 93, 77, 0.15); + --focus: 5px 5px rgba(125, 93, 77, 0.15); +} + +/* Dark Mode Colors */ +:root.dark-mode { + --bg: #1a1a1a; + --fg: #e8d4c4; + --alt: #bfa28c; + --accent: #262726; + --shadow: 10px 10px rgba(232, 212, 196, 0.25); + --focus: 5px 5px rgba(232, 212, 196, 0.25); +} + +body { + font-family: var(--font-sans); + background-color: var(--bg); + color: var(--fg); + width: 90%; + max-width: 1200px; + margin: 2rem auto; + min-height: 100vh; +} + +/* Grid Layout */ +.site-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto auto auto auto auto; + grid-template-areas: + "header header" + "about about" + "interests tech" + "contact contact" + "footer footer"; + gap: 1.5rem; +} + +/* Header Area */ +header { + grid-area: header; + display: grid; + grid-template-columns: auto 1fr auto; + gap: 1.5rem; +} + +.profile { + width: 128px; + height: auto; + object-fit: scale-down; + aspect-ratio: 1 / 1; + background-image: url("assets/galaxy.jpg"); + background-size: cover; + border: 4px solid var(--alt); + border-radius: 50%; +} + +header h1 { + margin: 0; + font-weight: 800; +} + +.title { + display: flex; + flex-direction: column; + justify-content: center; +} + +.theme-toggle { + height: 48px; + width: 48px; + color: var(--accent); + background-color: #e8d4c4; + border: 3px solid var(--alt); + border-radius: 50%; + cursor: pointer; + transition: all 0.1s ease; +} + +.theme-toggle:hover { + transform: scale(1.1); +} + +/* Content Area */ +.about { + grid-area: about; +} + +.interests { + grid-area: interests; + color: var(--bg); + background-color: var(--fg); + padding: 1rem; + border: 3px solid var(--alt); + border-radius: var(--radius); + box-shadow: var(--shadow); +} + +.tech { + grid-area: tech; + color: var(--bg); + background-color: var(--fg); + padding: 1rem; + border: 3px solid var(--alt); + border-radius: var(--radius); + box-shadow: var(--shadow); +} + +li { + padding: 0.75rem; + list-style: square; +} + +/* Contact Area */ +.contact { + grid-area: contact; + color: var(--fg); + background-color: var(--accent); + border: 3px solid var(--alt); + padding: 1rem; + border-radius: var(--radius); + box-shadow: var(--shadow); +} + +.contact form { + display: grid; + grid-template-areas: + "name message" + "email message" + ". button"; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto; + padding: 0 1rem 1rem; + gap: 1rem; +} + +label { + display: block; + margin-bottom: 0.5rem; +} + +input { + font-family: "Syne Variable", sans-serif; + background-color: var(--bg); + border: 2px solid var(--alt); + border-radius: var(--radius); + font-size: 1rem; + padding: 0.5rem; + width: 20em; + height: 2em; +} + +input:focus { + outline: none; + border: 3px solid var(--fg); + box-shadow: var(--focus); +} + +textarea { + font-family: "Syne Variable", sans-serif; + font-size: 1rem; + background-color: var(--bg); + color: var(--fg); + border: 2px solid var(--alt); + border-radius: var(--radius); + padding: 0.5rem; + width: 100%; + height: 6em; +} + +textarea:focus { + outline: none; + border: 3px solid var(--fg); + box-shadow: var(--focus); +} + +label { + font-weight: bold; +} + +input::placeholder, +textarea::placeholder { + color: var(--alt); + opacity: 0.75; + font-style: italic; +} + +.name { + grid-area: name; + padding-bottom: 1rem; +} + +.email { + grid-area: email; +} + +.message { + grid-area: message; +} + +.submit-button { + grid-area: button; + font-family: "Syne Variable", sans-serif; + font-size: 1rem; + width: 10em; + height: 3em; + color: var(--fg); + background-color: var(--bg); + border: 3px solid var(--alt); + border-radius: var(--radius); + transition: 0.1s ease-in-out; +} + +.submit-button:hover { + background-color: var(--fg); + color: var(--bg); + border: 3px solid var(--fg); + transform: translateY(-1px); + scale: 1.1; + transition: 0.1s ease-in-out; + box-shadow: var(--focus); +} + +/* Footer */ +footer { + grid-area: footer; + font-size: 0.75rem; + text-align: center; +} + +/* Tablets/Medium Devices - 900px and below */ +@media (max-width: 900px) { + .site-grid { + grid-template-columns: 1fr; + grid-template-areas: + "header" + "about" + "interests" + "tech" + "contact" + "footer"; + } + + .contact form { + grid-template-areas: + "name" + "email" + "message" + "button"; + grid-template-columns: 1fr; + } + + input { + width: 100%; + } +} + +/* Mobile - 600px and below */ +@media (max-width: 600px) { + body { + width: 95%; + margin: 1rem auto; + } + + header { + grid-template-columns: auto 1fr; + gap: 1rem; + } + + .profile { + width: 100px; + } + + header h1 { + font-size: 1.5rem; + } + + .theme-toggle { + grid-column: 2; + grid-row: 1; + justify-self: end; + height: 40px; + width: 40px; + } + + .interests, + .tech { + padding: 0.75rem; + } + + li { + padding: 0.5rem; + } + + input { + width: 100%; + height: 2.5em; + } + + textarea { + height: 5em; + } + + .submit-button { + width: 100%; + height: 2.5em; + } + + .contact form { + padding: 0.75rem; + gap: 0.75rem; + } +} + +/* reduced motion override */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + } +}