summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--sass/abstracts/_mixins.scss19
-rw-r--r--sass/base/_base.scss5
-rw-r--r--sass/components/_contact-form.scss12
-rw-r--r--sass/components/_project-container.scss2
-rw-r--r--sass/components/_screenshot-container.scss12
-rw-r--r--sass/components/_text-container.scss17
-rw-r--r--sass/layout/_footer.scss40
-rw-r--r--sass/layout/_main-sections.scss39
-rw-r--r--sass/layout/_nav.scss39
-rw-r--r--style.css170
10 files changed, 193 insertions, 162 deletions
diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
index 5a05ec3..3495b1b 100644
--- a/sass/abstracts/_mixins.scss
+++ b/sass/abstracts/_mixins.scss
@@ -42,3 +42,22 @@
margin: 8rem auto;
width: 80%;
}
+
+// media queries
+@mixin responsive($breakpoint) {
+ @if $breakpoint == phone {
+ @media screen and (max-width: 600px) {
+ @content;
+ }
+ }
+ @if $breakpoint == tablet {
+ @media screen and (max-width: 980px) {
+ @content;
+ }
+ }
+ @if $breakpoint == laptop {
+ @media screen and (max-width: 1400px) {
+ @content;
+ }
+ }
+}
diff --git a/sass/base/_base.scss b/sass/base/_base.scss
index 2211bca..545dce7 100644
--- a/sass/base/_base.scss
+++ b/sass/base/_base.scss
@@ -41,3 +41,8 @@ main {
animation: fade-in 2s ease-out;
}
}
+
+::selection {
+ background-color: $text-main;
+ color: $text-dark;
+}
diff --git a/sass/components/_contact-form.scss b/sass/components/_contact-form.scss
index 87b79c1..1195ab7 100644
--- a/sass/components/_contact-form.scss
+++ b/sass/components/_contact-form.scss
@@ -5,6 +5,11 @@
gap: 2rem;
width: 50%;
+ // larger tablet to smaller laptop screen size
+ @include responsive(laptop) {
+ width: 100%;
+ }
+
// container for each label & input
div {
display: flex;
@@ -39,13 +44,6 @@
}
}
-// larger tablet to smaller laptop screen size
-@media screen and (max-width: 1380px) {
- .messenger-form {
- width: 100%;
- }
-}
-
// mobile to smaller tablet screen sizes
@media screen and (max-width: 820px) {
.messenger-form {
diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss
index ed5fb0d..0bb8940 100644
--- a/sass/components/_project-container.scss
+++ b/sass/components/_project-container.scss
@@ -6,7 +6,7 @@
}
// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
+@media screen and (max-width: 1400px) {
.project-container {
@include flex-column-center;
gap: 5rem;
diff --git a/sass/components/_screenshot-container.scss b/sass/components/_screenshot-container.scss
index f3fdf0b..beaa0cd 100644
--- a/sass/components/_screenshot-container.scss
+++ b/sass/components/_screenshot-container.scss
@@ -8,15 +8,13 @@
width: 40%;
transition: transform 0.6s ease;
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
+ width: 80%;
+ }
+
&:hover {
transform: scale(1.2);
z-index: 100;
}
}
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
- .project-screenshot {
- width: 80%;
- }
-}
diff --git a/sass/components/_text-container.scss b/sass/components/_text-container.scss
index 95d2944..6cd1457 100644
--- a/sass/components/_text-container.scss
+++ b/sass/components/_text-container.scss
@@ -8,6 +8,12 @@
transform: skewX(-12deg);
width: 50%;
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
+ transform: skewX(0);
+ width: auto;
+ }
+
// margin between paragraphs but not below the last paragraph
& p:not(:last-child) {
margin-bottom: 1.5rem;
@@ -17,16 +23,9 @@
.text-about {
animation: moveInRight 2s ease-out;
backface-visibility: hidden;
-}
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
- .text-container {
- transform: skewX(0);
- width: auto;
- }
- .text-about {
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
animation: moveInRightMobile 2s ease-out;
margin-top: 5rem;
}
diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
index 0fa9cc4..a637329 100644
--- a/sass/layout/_footer.scss
+++ b/sass/layout/_footer.scss
@@ -2,14 +2,15 @@
footer {
background-color: $bg-text-container;
- // delete positioning to make grid footer from body work
- // position: absolute;
- // bottom: 0;
- // left: 0;
width: 100vw;
& * {
margin: $margin-main;
+
+ // mobile
+ @include responsive(phone) {
+ margin: $margin-mobile;
+ }
}
dl {
@@ -18,11 +19,23 @@ footer {
align-items: center;
height: 2rem;
+ // mobile
+ @include responsive(phone) {
+ flex-direction: column;
+ height: max-content;
+ }
+
& * {
color: inherit;
font-size: $medium-text;
margin: 0.5rem;
transition: transform 0.3s;
+
+ // mobile
+ @include responsive(phone) {
+ font-size: $medium-text-mobile;
+ margin: 0.3rem;
+ }
}
& dd i:hover {
@@ -38,22 +51,3 @@ footer {
font-size: $big-text;
}
}
-
-// mobile
-@media screen and (max-width: 520px) {
- footer {
- & * {
- margin: $margin-mobile;
- }
-
- dl {
- flex-direction: column;
- height: max-content;
-
- & * {
- font-size: $medium-text-mobile;
- margin: 0.3rem;
- }
- }
- }
-}
diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss
index 7cb2735..aec49e5 100644
--- a/sass/layout/_main-sections.scss
+++ b/sass/layout/_main-sections.scss
@@ -3,6 +3,12 @@
.about-section {
@include flex-sp-around-center;
@include narrow-container;
+
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
+ @include flex-column-center;
+ @include mobile-container;
+ }
}
.welcome-section {
@@ -11,6 +17,13 @@
@include narrow-container;
width: 60%;
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
+ @include flex-column-center;
+ gap: 4rem;
+ @include mobile-container;
+ }
+
.welcome-intro {
border-radius: $radius-text-container;
outline: 3px solid $text-special-dark;
@@ -21,6 +34,11 @@
.projects-section {
@include wide-container;
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
+ @include mobile-container;
+ }
+
// less margin between h2 and the 2nd child = first project-container
& > div:not(:nth-child(2)) {
margin-top: 10rem;
@@ -29,26 +47,9 @@
.contact-section {
@include wide-container;
-}
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
- .about-section {
- @include flex-column-center;
- @include mobile-container;
- }
-
- .welcome-section {
- @include flex-column-center;
- gap: 4rem;
- @include mobile-container;
- }
-
- .projects-section {
- @include mobile-container;
- }
- .contact-section {
+ // mobile to smaller laptop screen sizes
+ @include responsive(laptop) {
@include mobile-container;
}
}
diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
index 8d03e69..e2d462e 100644
--- a/sass/layout/_nav.scss
+++ b/sass/layout/_nav.scss
@@ -6,6 +6,11 @@ nav {
height: 10vh;
width: 100vw;
+ // tablet & mobile
+ @include responsive(tablet) {
+ height: fit-content;
+ }
+
ul {
display: flex;
align-items: center;
@@ -14,12 +19,25 @@ nav {
list-style-type: none;
padding: 0 3rem;
width: 100%;
+
+ // tablet & mobile
+ @include responsive(tablet) {
+ @include flex-column-center;
+ gap: 1rem;
+ padding: 0;
+ }
}
// logo to the left side of navbar
li:first-child {
text-align: left;
margin-right: auto;
+
+ // tablet & mobile
+ @include responsive(tablet) {
+ text-align: center;
+ margin-right: 1.5rem;
+ }
}
li a {
@@ -35,27 +53,10 @@ nav {
&:hover {
@include main-link-hover;
}
- }
-}
-
-// tablet & mobile
-@media screen and (max-width: 980px) {
- nav {
- height: fit-content;
-
- ul {
- @include flex-column-center;
- gap: 1rem;
- padding: 0;
- }
- li a {
+ // tablet & mobile
+ @include responsive(tablet) {
font-size: $big-text;
}
-
- li:first-child {
- text-align: center;
- margin-right: 1.5rem;
- }
}
}
diff --git a/style.css b/style.css
index 7042fc6..b291c75 100644
--- a/style.css
+++ b/style.css
@@ -6,7 +6,6 @@
opacity: 1;
}
}
-
@keyframes moveInLeft {
0% {
opacity: 0;
@@ -17,7 +16,6 @@
transform: translate(0);
}
}
-
@keyframes moveInRight {
0% {
opacity: 0;
@@ -28,7 +26,6 @@
transform: translate(0) skewX(-12deg);
}
}
-
@keyframes moveInRightMobile {
0% {
opacity: 0;
@@ -55,11 +52,7 @@ body {
}
body {
- background: linear-gradient(
- 45deg,
- rgba(2, 48, 89, 0.89) 0%,
- rgba(9, 61, 94, 0.84) 100%
- );
+ background: linear-gradient(45deg, rgba(2, 48, 89, 0.89) 0%, rgba(9, 61, 94, 0.84) 100%);
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
@@ -79,6 +72,11 @@ main * {
animation: fade-in 2s ease-out;
}
+::selection {
+ background-color: #ececec;
+ color: #252424;
+}
+
.text-link {
color: #e79759;
}
@@ -122,6 +120,11 @@ nav {
height: 10vh;
width: 100vw;
}
+@media screen and (max-width: 980px) {
+ nav {
+ height: fit-content;
+ }
+}
nav ul {
display: flex;
align-items: center;
@@ -131,10 +134,26 @@ nav ul {
padding: 0 3rem;
width: 100%;
}
+@media screen and (max-width: 980px) {
+ nav ul {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+ padding: 0;
+ }
+}
nav li:first-child {
text-align: left;
margin-right: auto;
}
+@media screen and (max-width: 980px) {
+ nav li:first-child {
+ text-align: center;
+ margin-right: 1.5rem;
+ }
+}
nav li a {
display: block;
color: inherit;
@@ -149,33 +168,28 @@ nav li a:hover {
color: #ecbf4b;
transform: translateY(-0.3rem);
}
-
@media screen and (max-width: 980px) {
- nav {
- height: fit-content;
- }
- nav ul {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 1rem;
- padding: 0;
- }
nav li a {
font-size: 2rem;
}
- nav li:first-child {
- text-align: center;
- margin-right: 1.5rem;
- }
}
+
.about-section {
display: flex;
align-items: center;
justify-content: space-around;
margin: 3rem auto;
}
+@media screen and (max-width: 1400px) {
+ .about-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 8rem auto;
+ width: 80%;
+ }
+}
.welcome-section {
display: grid;
@@ -186,6 +200,17 @@ nav li a:hover {
margin: 3rem auto;
width: 60%;
}
+@media screen and (max-width: 1400px) {
+ .welcome-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 4rem;
+ margin: 8rem auto;
+ width: 80%;
+ }
+}
.welcome-section .welcome-intro {
border-radius: 10px;
outline: 3px solid #e79759;
@@ -199,6 +224,12 @@ nav li a:hover {
.projects-section h2 {
margin-bottom: 5rem;
}
+@media screen and (max-width: 1400px) {
+ .projects-section {
+ margin: 8rem auto;
+ width: 80%;
+ }
+}
.projects-section > div:not(:nth-child(2)) {
margin-top: 10rem;
}
@@ -210,34 +241,13 @@ nav li a:hover {
.contact-section h2 {
margin-bottom: 5rem;
}
-
-@media screen and (max-width: 1380px) {
- .about-section {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin: 8rem auto;
- width: 80%;
- }
- .welcome-section {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 4rem;
- margin: 8rem auto;
- width: 80%;
- }
- .projects-section {
- margin: 8rem auto;
- width: 80%;
- }
+@media screen and (max-width: 1400px) {
.contact-section {
margin: 8rem auto;
width: 80%;
}
}
+
footer {
background-color: #173d5a;
width: 100vw;
@@ -245,18 +255,35 @@ footer {
footer * {
margin: 3rem 4rem 2rem 4rem;
}
+@media screen and (max-width: 600px) {
+ footer * {
+ margin: 2rem;
+ }
+}
footer dl {
display: flex;
justify-content: center;
align-items: center;
height: 2rem;
}
+@media screen and (max-width: 600px) {
+ footer dl {
+ flex-direction: column;
+ height: max-content;
+ }
+}
footer dl * {
color: inherit;
font-size: 1.5rem;
margin: 0.5rem;
transition: transform 0.3s;
}
+@media screen and (max-width: 600px) {
+ footer dl * {
+ font-size: 1.3rem;
+ margin: 0.3rem;
+ }
+}
footer dl dd i:hover {
color: #ecbf4b;
transform: translateY(-0.3rem);
@@ -268,19 +295,6 @@ footer .big-icon {
font-size: 2rem;
}
-@media screen and (max-width: 520px) {
- footer * {
- margin: 2rem;
- }
- footer dl {
- flex-direction: column;
- height: max-content;
- }
- footer dl * {
- font-size: 1.3rem;
- margin: 0.3rem;
- }
-}
.text-container {
background-color: #173d5a;
border-radius: 10px;
@@ -289,6 +303,12 @@ footer .big-icon {
transform: skewX(-12deg);
width: 50%;
}
+@media screen and (max-width: 1400px) {
+ .text-container {
+ transform: skewX(0);
+ width: auto;
+ }
+}
.text-container p:not(:last-child) {
margin-bottom: 1.5rem;
}
@@ -297,17 +317,13 @@ footer .big-icon {
animation: moveInRight 2s ease-out;
backface-visibility: hidden;
}
-
-@media screen and (max-width: 1380px) {
- .text-container {
- transform: skewX(0);
- width: auto;
- }
+@media screen and (max-width: 1400px) {
.text-about {
animation: moveInRightMobile 2s ease-out;
margin-top: 5rem;
}
}
+
.portrait-container {
height: 50vh;
width: fit-content;
@@ -328,7 +344,7 @@ footer .big-icon {
gap: 2rem;
}
-@media screen and (max-width: 1380px) {
+@media screen and (max-width: 1400px) {
.project-container {
display: flex;
flex-direction: column;
@@ -348,16 +364,16 @@ footer .big-icon {
width: 40%;
transition: transform 0.6s ease;
}
+@media screen and (max-width: 1400px) {
+ .project-screenshot {
+ width: 80%;
+ }
+}
.project-screenshot:hover {
transform: scale(1.2);
z-index: 100;
}
-@media screen and (max-width: 1380px) {
- .project-screenshot {
- width: 80%;
- }
-}
.messenger-form {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -366,6 +382,11 @@ footer .big-icon {
gap: 2rem;
width: 50%;
}
+@media screen and (max-width: 1400px) {
+ .messenger-form {
+ width: 100%;
+ }
+}
.messenger-form div {
display: flex;
align-items: flex-start;
@@ -394,11 +415,6 @@ footer .big-icon {
outline: 3px solid #e79759;
}
-@media screen and (max-width: 1380px) {
- .messenger-form {
- width: 100%;
- }
-}
@media screen and (max-width: 820px) {
.messenger-form {
display: flex;
generated by cgit v1.2.3 (git 2.39.1) at 2026-08-24 21:30:22 +0000