From 43a5ba80fbf006a969cc8f6218e0aedd9a0551ff Mon Sep 17 00:00:00 2001 From: ValKozz Date: Tue, 2 Apr 2024 14:15:59 +0300 Subject: [PATCH] Mobile version updates, media queries and card formatting --- src/App.css | 113 +++++++++++------- src/assets/react.svg | 1 + src/components/Contact/contact.css | 51 +++++--- src/components/Footer/footer.css | 62 +++++++++- src/components/Projects/ProjectCards/Card.jsx | 2 +- .../Projects/ProjectCards/ProjectCards.jsx | 1 + src/components/Projects/ProjectCards/card.css | 16 +-- .../Projects/ProjectCards/data.json | 15 ++- src/components/Projects/Projects.jsx | 2 +- src/components/Projects/projects.css | 112 ++++++++++++----- src/components/Title/pagetitle.css | 14 ++- src/index.css | 6 +- 12 files changed, 283 insertions(+), 112 deletions(-) create mode 100644 src/assets/react.svg diff --git a/src/App.css b/src/App.css index 804750c..e9edc12 100644 --- a/src/App.css +++ b/src/App.css @@ -1,18 +1,77 @@ -#root { - /* max-width: 1280px; */ - margin: 0 auto; - text-align: center; - display: flex; +@media (min-width: 481px) { + /* This stays here or we get borders when moving troughs */ + .light { + background: radial-gradient( + circle at calc(var(--x) * 1px) calc(var(--y) * 1px), + hsl(0 0% 80% / 0.2), + transparent 10% + ); + background-attachment: fixed; + } + + #root { + margin: 0 auto; + text-align: center; + display: flex; + justify-items: center; + } + .main { + background-color: var(--dark); + height: 100vh; + width: 100%; + } + + .half { + padding-left: 5%; + padding-right: 5%; + background-color: var(--dark); + display: flex; + justify-content: center; + align-items: center; + text-align: center; + width: 40%; + height: 100%; + float: left; + } + + .sectionTitle { + display: flex; + align-items: center; + text-align: center; + justify-content: center; + font-size: 4.8rem; + line-height: 1.1; + } } -/* This stays here or we get borders when moving troughs */ -.light { - background: radial-gradient( - circle at calc(var(--x) * 1px) calc(var(--y) * 1px), - hsl(0 0% 40% / 0.2), - transparent 10% - ); - background-attachment: fixed; +@media (max-width: 481px) { + .main { + background-color: var(--dark); + height: 100vh; + width: 100vw; + } + + .half { + padding-left: 5%; + padding-right: 5%; + background-color: var(--dark); + display: flex; + justify-content: center; + align-items: center; + text-align: center; + width: 90%; + height: 50%; + float: left; + } + + .sectionTitle { + display: flex; + align-items: center; + text-align: center; + justify-content: center; + font-size: 2.8rem; + line-height: 1.1; + } } #scroll-container { @@ -23,21 +82,6 @@ overflow-x: hidden; } -.main { - background-color: var(--dark); - height: 100vh; - width: 100%; -} - -.sectionTitle { - display: flex; - align-items: center; - text-align: center; - justify-content: center; - font-size: 4.8rem; - line-height: 1.1; -} - #page-title:hover { filter: drop-shadow(0 0 10em #646cffaa); } @@ -54,16 +98,3 @@ display: flex; text-wrap: wrap; } - -.half { - padding-left: 5%; - padding-right: 5%; - background-color: var(--dark); - display: flex; - justify-content: center; - align-items: center; - text-align: center; - width: 40%; - height: 100%; - float: left; -} diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Contact/contact.css b/src/components/Contact/contact.css index 717152a..dd8c2f6 100644 --- a/src/components/Contact/contact.css +++ b/src/components/Contact/contact.css @@ -15,32 +15,47 @@ flex-direction: column; } -.input-field { - transition: all 0.3s ease-in-out; - outline: 0; - border-width: 0 0 2px; - border-color: var(--med-light); - padding-top: 2rem; - padding-bottom: 2rem; - font-size: 1rem; - line-height: 1.2rem; - width: 40%; - background-color: var(--med-dark); - color: var(--med-light); +@media (min-width: 481px) { + .input-field { + transition: all 0.3s ease-in-out; + outline: 0; + border-width: 0 0 2px; + border-color: var(--med-light); + padding-top: 2rem; + padding-bottom: 2rem; + font-size: 1rem; + line-height: 1.2rem; + width: 40%; + background-color: var(--med-dark); + color: var(--med-light); + } +} + +@media (max-width: 480px) { + .input-field { + transition: all 0.3s ease-in-out; + outline: 0; + border-width: 0 0 2px; + border-color: var(--med-light); + padding-top: 2rem; + padding-bottom: 2rem; + font-size: 1rem; + line-height: 1.2rem; + width: 80%; + background-color: var(--med-dark); + color: var(--med-light); + } } /* Maybe not */ -.input-field:hover { +.input-field:hover, +.input-field:focus, +.input-field:active { color: var(--dark); background-color: var(--med-light); filter: drop-shadow(0 0 10em #646cffaa); } -.input-field:focus { - filter: drop-shadow(0 0 10em #646cffaa); - color: var(--light); -} - #contact-form { height: 50%; width: 100vw; diff --git a/src/components/Footer/footer.css b/src/components/Footer/footer.css index 23dba43..c2290c0 100644 --- a/src/components/Footer/footer.css +++ b/src/components/Footer/footer.css @@ -1,10 +1,68 @@ +@media (max-width: 480px) { + #end-comparment { + width: 100vw; + } + + #footer { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + } + + #icon-list { + display: flex; + flex-direction: row; + list-style: none; + } + + .icon { + fill: var(--med-light); + } + + .icon:hover { + fill: var(--light); + filter: drop-shadow(0 0 10em #646cffaa); + } +} + +@media (min-width: 481px) { + #end-comparment { + margin-top: 10%; + width: 100vw; + height: 20vh; + } + + #footer { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + } + + #icon-list { + display: flex; + flex-direction: row; + list-style: none; + } + + .icon { + fill: var(--med-light); + } + + .icon:hover { + fill: var(--light); + filter: drop-shadow(0 0 10em #646cffaa); + } +} + #end-comparment { - margin-top: 15%; width: 100vw; - height: 20vh; + height: 10vh; } #footer { + margin-top: 5%; clear: both; width: 100%; height: 100%; diff --git a/src/components/Projects/ProjectCards/Card.jsx b/src/components/Projects/ProjectCards/Card.jsx index 49cbef3..ca1be5a 100644 --- a/src/components/Projects/ProjectCards/Card.jsx +++ b/src/components/Projects/ProjectCards/Card.jsx @@ -5,7 +5,7 @@ export default function Card({ title, text, img_source, link }) {
-

{title}

+

{title}

{img_source ? : ""} diff --git a/src/components/Projects/ProjectCards/ProjectCards.jsx b/src/components/Projects/ProjectCards/ProjectCards.jsx index f7b5ed7..c9697ed 100644 --- a/src/components/Projects/ProjectCards/ProjectCards.jsx +++ b/src/components/Projects/ProjectCards/ProjectCards.jsx @@ -12,6 +12,7 @@ export default function ProjectCards() { title={project.name} link={project.link} text={project.desc} + img_source={project.img_source} /> ); })} diff --git a/src/components/Projects/ProjectCards/card.css b/src/components/Projects/ProjectCards/card.css index 4fe29c1..3f175ff 100644 --- a/src/components/Projects/ProjectCards/card.css +++ b/src/components/Projects/ProjectCards/card.css @@ -9,19 +9,20 @@ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; background-color: white; - width: 5rem; padding: 1rem 2rem; margin: 2rem; display: flex; align-content: center; justify-content: center; flex-direction: column; - min-width: 15rem; + height: 26rem; } -#card-title { +#card-h1 { font-size: 2rem; padding: 1rem; + display: flex; + align-items: center; } .card-title { @@ -30,21 +31,22 @@ font-size: 1rem; } -h1.card-title .card-content { +h1.card-title, +.card-content { display: flex; align-items: center; flex-direction: column; - overflow-y: scroll; + overflow-x: hidden; font-size: 1rem; object-fit: contain; word-break: break-all; white-space: pre-wrap; - overflow: scroll; + overflow-y: scroll; } .card-image { padding: 1rem; - width: 200px; + width: 48px; object-fit: cover; display: flex; align-items: center; diff --git a/src/components/Projects/ProjectCards/data.json b/src/components/Projects/ProjectCards/data.json index 0ecc8cd..d56c480 100644 --- a/src/components/Projects/ProjectCards/data.json +++ b/src/components/Projects/ProjectCards/data.json @@ -2,26 +2,31 @@ { "name": "Personal Website", "link": "https://github.com/ValKozz/2Way-Morse", - "desc": " My very own personal website and first I've ever built using React/Vite." + "desc": " My very own personal website and first I've ever built using React/Vite.", + "img_source": "src/assets/react.svg" }, { "name": "2Way-Morse", "link": "https://github.com/ValKozz/2Way-Morse", - "desc": " Console based Morse code 2-way Translator, fearing audio playback of result using pyttsx3(Text to speech) and pygame(Mixer audio engine) and numpy" + "desc": " Console based Morse code 2-way Translator, fearing audio playback of result using pyttsx3(Text to speech) and pygame(Mixer audio engine) and numpy", + "img_source": "https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" }, { "name": "CondPDA", "link": "https://github.com/ValKozz/CondPDA", - "desc": " Convert PDF files to mp3 Audio Books through the command line terminal. Uses gTTa and tika.\n" + "desc": " Convert PDF files to mp3 Audio Books through the command line terminal. Uses gTTa and tika.\n", + "img_source": "https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" }, { "name": "Cows_and_Bulls", "link": "https://github.com/ValKozz/Cows_and_Bulls", - "desc": " The Cows and Bulls guessing game, with the abilitty to play againts the computer, where it tries to guess your number. Beware, it has a 100% guess rate." + "desc": " The Cows and Bulls guessing game, with the abilitty to play againts the computer, where it tries to guess your number. Beware, it has a 100% guess rate.", + "img_source": "https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" }, { "name": "Watermarker", "link": "https://github.com/ValKozz/Watermarker", - "desc": " A simple Custom Tkinter program to add watermarks to images. Uses the PIL(Python Pillow) library to provide some basic image editing operations. Currently, supports JPEG and PNG." + "desc": " A simple Custom Tkinter program to add watermarks to images. Uses the PIL(Python Pillow) library to provide some basic image editing operations. Currently, supports JPEG and PNG.", + "img_source": "https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" } ] diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx index c071d87..a209a8d 100644 --- a/src/components/Projects/Projects.jsx +++ b/src/components/Projects/Projects.jsx @@ -14,7 +14,7 @@ export default function Projects() { return (
-
+
diff --git a/src/components/Projects/projects.css b/src/components/Projects/projects.css index cf14c43..0e8fd76 100644 --- a/src/components/Projects/projects.css +++ b/src/components/Projects/projects.css @@ -1,38 +1,90 @@ -.animated { - transition: all 0.3s ease-in-out; - position: relative; -} +@media (min-width: 481px) { + .animated { + transition: all 0.3s ease-in-out; + position: relative; + } -#canvas3d-container { - z-index: 1; - background-color: var(--dark); - height: 100%; - width: 100%; - overflow: hidden; -} + #canvas3d-container { + z-index: 1; + background-color: var(--dark); + height: 100%; + width: 100%; + overflow: hidden; + } -#canvas3d { - height: 100%; - width: 100%; -} + #canvas3d { + height: 100%; + width: 100%; + } -#drawer { - z-index: 2; - position: absolute; - width: 100%; - height: 100%; - background-color: var(--dark); - transition: left 0.5s cubic-bezier(0.82, 0.085, 0.395, 0.895); - top: 0; - left: 0; -} + #drawer { + z-index: 2; + position: absolute; + width: 100%; + height: 100%; + background-color: var(--dark); + transition: left 0.5s cubic-bezier(0.82, 0.085, 0.395, 0.895); + top: 0; + left: 0; + } + + #drawer.isOpen { + transition: left 0.5s cubic-bezier(0.82, 0.085, 0.395, 0.895); -#drawer.isOpen { - transition: left 0.5s cubic-bezier(0.82, 0.085, 0.395, 0.895); + width: 100%; + } - width: 100%; + #drawer.isClosed { + left: -50vw; + } } -#drawer.isClosed { - left: -50vw; +/* MOBILE */ +@media (max-width: 480px) { + .projects-container { + position: relative; + } + .animated { + transition: all 0.3s ease-in-out; + position: relative; + } + + #projects-cont { + position: absolute; + bottom: 0; + } + + #canvas3d-container { + z-index: 1; + background-color: var(--dark); + height: 100%; + width: 100%; + overflow: hidden; + position: bottom; + } + + #canvas3d { + height: 100%; + width: 100%; + } + + #drawer { + z-index: 2; + position: absolute; + width: 100%; + height: 100%; + background-color: var(--dark); + transition: left 0.5s cubic-bezier(0.82, 0.085, 0.395, 0.895); + top: 0; + left: -200; + } + + #drawer.isOpen { + transition: left 0.5s cubic-bezier(0.82, 0.085, 0.395, 0.895); + width: 100%; + } + + #drawer.isClosed { + left: -50vw; + } } diff --git a/src/components/Title/pagetitle.css b/src/components/Title/pagetitle.css index d43e035..c76d348 100644 --- a/src/components/Title/pagetitle.css +++ b/src/components/Title/pagetitle.css @@ -4,10 +4,20 @@ align-items: center; height: 100vh; text-align: center; + word-break: break-all; + filter: drop-shadow(0 0 2em #646cffaa); +} + +@media (min-width: 481px) { + #page-title { + font-size: 6rem; + } } -#page-title { - font-size: 6rem; +@media (max-width: 481px) { + #page-title { + font-size: 3rem; + } } #page-title:hover { diff --git a/src/index.css b/src/index.css index 323523b..3054e46 100644 --- a/src/index.css +++ b/src/index.css @@ -16,6 +16,7 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--dark); + padding-bottom: 25px; } a { @@ -39,11 +40,6 @@ body { min-height: 100vh; } -h1 { - font-size: 5.2em; - line-height: 1.1; -} - button { transition: all 0.5s ease-in-out; color: var(--med-light);