From 591ddf9e42ab49eef2ffe4876e434c841ba4606d Mon Sep 17 00:00:00 2001 From: pedroacamargo Date: Sun, 25 Jun 2023 18:11:50 +0100 Subject: [PATCH] About responsive --- src/App.tsx | 2 +- src/Styles/DangerousButton.scss | 70 +++++++++ src/Styles/about/About.styles.scss | 8 +- src/Styles/about/AboutMe.styles.scss | 135 ++++++++++++++++-- src/Styles/about/Decorations.styles.scss | 3 +- src/Styles/about/Variables/Mixin.styles.scss | 16 +++ src/components/DangerousButton.component.tsx | 13 ++ ...oter.componen.tsx => Footer.component.tsx} | 0 src/components/about/AboutMe.component.tsx | 33 ++++- src/routes/Home.component.tsx | 4 +- src/routes/Navbar.component.tsx | 2 +- 11 files changed, 262 insertions(+), 24 deletions(-) create mode 100644 src/Styles/DangerousButton.scss create mode 100644 src/Styles/about/Variables/Mixin.styles.scss create mode 100644 src/components/DangerousButton.component.tsx rename src/components/{Footer.componen.tsx => Footer.component.tsx} (100%) diff --git a/src/App.tsx b/src/App.tsx index 33f72f3..e572ee3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import About from './routes/About.component'; import Contact from './routes/Contact.component'; import Home from './routes/Home.component'; import { Spacer } from './components/Spacer.component'; -import { Footer } from './components/Footer.componen'; +import { Footer } from './components/Footer.component'; function App() { diff --git a/src/Styles/DangerousButton.scss b/src/Styles/DangerousButton.scss new file mode 100644 index 0000000..c9852bc --- /dev/null +++ b/src/Styles/DangerousButton.scss @@ -0,0 +1,70 @@ +@import 'about/Variables/Variables.styles.scss'; + +.dangerous-btn { + @keyframes flickering { + 0% { + opacity: 1; + color: rgb(185, 185, 23); + border: 1px solid rgb(180, 180, 16); + box-shadow: 0px 0px 30px rgb(180, 180, 16); + } + 100% { + opacity: 1; + color: rgba(192, 19, 19, 0.911); + box-shadow: 0px 0px 30px rgb(143, 17, 17); + + } + + 41.99% { + opacity: 1; + color: rgb(185, 185, 23); + border: 1px solid rgb(180, 180, 16); + box-shadow: 0px 0px 30px rgb(180, 180, 16); + } + + 42% { + opacity: 0; + color: rgba(192, 19, 19, 0.945); + border: 1px solid rgba(192, 19, 19, 0.801); + box-shadow: 0px 0px 30px rgb(197, 12, 12); + } + + 43% { + opacity: 0; + } + + 43.01% { + opacity: 1; + } + + 47.99% { + opacity: 1; + } + + 48% { + opacity: 0; + } + + 49% { + opacity: 0; + } + + 49.01% { + opacity: 1; + } + } + + padding: 15px; + margin: 10px; + border-radius: 10px; + box-shadow: 0px 0px 10px rgb(143, 17, 17); + border: 1px solid rgba(165, 14, 14, 0.801); + color: rgba(192, 19, 19, 0.801); + font-size: 1.5em; + z-index: 10; + position: relative; + font-family: $fontABout; + animation: 2.5s infinite flickering alternate; + background-color: transparent; + cursor: pointer; +} \ No newline at end of file diff --git a/src/Styles/about/About.styles.scss b/src/Styles/about/About.styles.scss index efc49dc..685fcc9 100644 --- a/src/Styles/about/About.styles.scss +++ b/src/Styles/about/About.styles.scss @@ -9,7 +9,13 @@ section.about-container { flex-direction: column; justify-content: center; align-items: center; - z-index: -1; + z-index: 1; position: relative; overflow: hidden; +} + +@media screen and (max-width: 800px) { + section.about-container { + padding-top: 50px; + } } \ No newline at end of file diff --git a/src/Styles/about/AboutMe.styles.scss b/src/Styles/about/AboutMe.styles.scss index 365a49a..b2b9160 100644 --- a/src/Styles/about/AboutMe.styles.scss +++ b/src/Styles/about/AboutMe.styles.scss @@ -1,4 +1,6 @@ @import 'Variables/Variables.styles.scss'; +@import '../navbar/Variables/Variables.styles.scss'; +@import 'Variables/Mixin.styles.scss'; .whoami-container { display: flex; @@ -25,6 +27,13 @@ width: 100%; height: 100%; + h1 { + @include gradientText($backupColorMainName, $gradientLeftMainName, $gradientRightMainName, $fontABout, 2em); + z-index: 10; + position: relative; + padding-left: 20px; + } + p { position: relative; z-index: 10; @@ -32,10 +41,36 @@ line-height: 1.25em; text-align: justify; flex: 1; - font-size: 1.2em; + font-size: 1.1em; color: white; font-family: $fontABout; } + + div { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + padding-left: 10px; + + .github-btn { + animation: none; + color: white; + border: 1px solid white; + transition: .5s; + box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.589); + + &:active { + background-color: white; + color: black; + } + + &:hover { + background-color: white; + color: black; + } + } + } .border { &::before { @@ -87,7 +122,7 @@ .img-about-container { position: relative; background-color: black; - box-shadow: 2px 2px 50px rgba(255, 0, 0, 0.288); + box-shadow: inset 2px 2px 20px rgba(255, 0, 0, 0.288); border-radius: 10px; padding: 20px; margin-left: -20px; @@ -123,12 +158,81 @@ } } +.whoami-container-mobile { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + width: 500px; + padding: 20px; + background-color: black; + border-radius: 10px; + box-shadow: inset 0px 0px 30px rgba(255, 0, 0, 0.452); + position: relative; + + h1 { + //@include gradientText($backupColorMainName, $gradientLeftMainName, $gradientRightMainName, $fontABout, 2em); + color: yellow; + font-family: $fontABout; + padding-top: 5px; + font-size: 1.8em; + } + + .btn-container { + padding-bottom: 30px; + + .github-btn { + animation: none; + color: white; + border: 1px solid white; + transition: 1s; + box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.589); + + &:active { + background-color: white; + color: black; + } + + &:hover { + background-color: white; + color: black; + } + } + } + + p { + font-family: $fontOpenSans; + color: rgb(214, 214, 220); + padding: 20px; + font-size: 1em; + text-align: justify; + z-index: 1; + + span { + line-height: 3.5em; + font-size: 1em; + color: rgb(156, 51, 51); + font-weight: 600; + } + } + + .danger { + color: rgba(255, 255, 0, 0.185); + display: block; + position: absolute; + z-index: 0; + font-size: 10em; + } +} + @media screen and (max-width: 1000px) { .whoami-container { .aboutme-container { font-size: .9em; padding: 10px; + padding-top: 30px; + padding-bottom: 20px; width: 400px; } @@ -143,18 +247,23 @@ @media screen and (max-width: 800px) { .whoami-container { - flex-direction: column; - .aboutme-container { - width: 600px; - margin-bottom: 20px; - padding: 10px; - .border-container { - display: none; - } - } + display: none; + } - .img-about-container { - display: none; + .whoami-container-mobile { + display: flex; + } +} + + +@media screen and (max-width: 520px) { + .whoami-container-mobile { + width: 370px; + + p { + span { + font-size: .7em; + } } } } \ No newline at end of file diff --git a/src/Styles/about/Decorations.styles.scss b/src/Styles/about/Decorations.styles.scss index 8b93908..6ef9668 100644 --- a/src/Styles/about/Decorations.styles.scss +++ b/src/Styles/about/Decorations.styles.scss @@ -3,6 +3,7 @@ .ballblinking { position: absolute; + z-index: -2; border-radius: 100%; top: 50%; left: -300px; @@ -207,7 +208,7 @@ } @media screen and (max-width: 800px) { - .ballblinking, .police1, .police2, .police3, .police4, .police5 { + .ballblinking, .police1, .police2, .police3, .police4, .police5, .section-name-container { display: none; } } \ No newline at end of file diff --git a/src/Styles/about/Variables/Mixin.styles.scss b/src/Styles/about/Variables/Mixin.styles.scss new file mode 100644 index 0000000..cca8c53 --- /dev/null +++ b/src/Styles/about/Variables/Mixin.styles.scss @@ -0,0 +1,16 @@ +@mixin gradientText($backupColor, $gradientLeft, $gradientRight, $font, $size) { + background-color: $backupColor; + background-image: linear-gradient(45deg, $gradientLeft, $gradientRight); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-background-clip: text; + -moz-text-fill-color: transparent; + background-size: 100%; + background-position: left; + background-repeat: repeat; + font-family: $font; + font-size: $size; + padding: 0px 10px; + font-weight: bold; + animation: textGradient 1s ease-in alternate infinite; +} \ No newline at end of file diff --git a/src/components/DangerousButton.component.tsx b/src/components/DangerousButton.component.tsx new file mode 100644 index 0000000..d8f61ee --- /dev/null +++ b/src/components/DangerousButton.component.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import '../Styles/DangerousButton.scss' +import { Link } from 'react-router-dom'; + +interface Props { + message: string; +} + +export const DangerousButton = (props: Props) => { + return ( + ⚠ {props.message} + ) +} diff --git a/src/components/Footer.componen.tsx b/src/components/Footer.component.tsx similarity index 100% rename from src/components/Footer.componen.tsx rename to src/components/Footer.component.tsx diff --git a/src/components/about/AboutMe.component.tsx b/src/components/about/AboutMe.component.tsx index 707dd68..ca74c68 100644 --- a/src/components/about/AboutMe.component.tsx +++ b/src/components/about/AboutMe.component.tsx @@ -1,25 +1,48 @@ import React from 'react' import '../../Styles/about/AboutMe.styles.scss'; +import { faGithub } from '@fortawesome/free-brands-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Link } from 'react-router-dom'; +import { DangerousButton } from '../DangerousButton.component'; export const AboutMe = () => { return ( <>
+
-

I'm a 19 years old programmer studying Computer Science at University of Minho. I've just finished the 1st year of the course. My first contact with programming was when I was 17 years old, while I was at high school (studying economics), I studied by my own web develpment and after that I fell in love with this world. Furthermore, I'm a front-end developer passionate for Cyber Security, an area that I will focus in the future. Nowadays, I'm specialized in developing and designing any kind of website you want with React. If you'd like to check my projects, you can visit my GitHub profile. Also, I'm a Water Polo goalkeeper :)

+

Who Am I?

+

I'm a 19 years old programmer studying Computer Science at University of Minho. I've just finished the 1st year of the course. My first contact with programming was when I was 17 years old, while I was at high school (studying economics), I studied by my own web develpment and after that I fell in love with this world. Furthermore, I'm a front-end developer passionate for Cyber Security, an area that I will focus in the future. Nowadays, I'm specialized in developing and designing any kind of website you want with React. If you'd like to check my projects, you can visit my GitHub profile.

+
+ + +
-
- -
-
+
+ +
+ +
+

Who am I?

+

I'm a 19 years old programmer studying Computer Science at University of Minho. I've just finished the 1st year of the course. I'm a front-end developer passionate for Cyber Security, an area that I will explore in the future.
Nowadays, I'm specialized in developing and designing any kind of website you want with React.
+ You can check my projects in my GitHub profile. +

+ +
+ + +
+ +
⚠
+
) diff --git a/src/routes/Home.component.tsx b/src/routes/Home.component.tsx index 593ce20..abf7d83 100644 --- a/src/routes/Home.component.tsx +++ b/src/routes/Home.component.tsx @@ -4,11 +4,11 @@ import Contact from "./Contact.component"; const Home = () => { return ( -
+ <> -
+ ); } diff --git a/src/routes/Navbar.component.tsx b/src/routes/Navbar.component.tsx index c37d90f..0d1b2a6 100644 --- a/src/routes/Navbar.component.tsx +++ b/src/routes/Navbar.component.tsx @@ -36,7 +36,7 @@ const Navbar = () => { return ( -
+