diff --git a/css/style.scss b/css/style.scss index 81776ed..3907616 100644 --- a/css/style.scss +++ b/css/style.scss @@ -1,11 +1,24 @@ -$background-color: #c7c7c7; -$primary-color: #333; -$secondary-color: #d11414; -$text-color: #123455; +$bg-dark: #121510; +$bg-card: rgba(20, 26, 18, 0.85); +$border-color: rgba(60, 72, 62, 0.7); +$accent: #d48a9a; +$accent-hover: #e4aab8; +$text-primary: #e5e0da; +$text-secondary: #8a9285; +$font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', 'SF Mono', 'Monaco', 'Menlo', monospace; +$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + +*, *::before, *::after { + box-sizing: border-box; +} body { - font-family: sans-serif; - background-color: $background-color; + font-family: $font-sans; + background-color: $bg-dark; + color: $text-primary; + margin: 0; + min-height: 100vh; + line-height: 1.6; header { nav { @@ -13,12 +26,16 @@ body { display: flex; list-style: none; gap: 1em; - - li {} } a { - &:hover {} + color: $accent; + text-decoration: none; + transition: color 0.2s ease; + + &:hover { + color: $accent-hover; + } } } } @@ -37,34 +54,92 @@ body { text-align: center; justify-content: center; align-items: center; + padding: 2em 1em; img.icon { width: 1.5em; + filter: brightness(0) saturate(100%) invert(65%) sepia(15%) saturate(500%) hue-rotate(176deg) brightness(95%) contrast(90%); + transition: filter 0.2s ease; } - h1 {} + h1 { + font-family: $font-mono; + font-weight: 700; + font-size: 2.4em; + letter-spacing: -0.02em; + margin-bottom: 0.3em; + background: linear-gradient(135deg, #d48a9a, #7ec9a0); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } - h2 {} + h2 { + font-family: $font-mono; + font-weight: 500; + font-size: 1.5em; + color: $text-primary; + margin-top: 2em; + margin-bottom: 0.8em; + letter-spacing: -0.01em; - h3 {} + &::before { + content: '> '; + color: $accent; + font-weight: 400; + } + } + + h3 { + font-family: $font-mono; + font-weight: 500; + font-size: 1.05em; + color: $text-primary; + margin: 0.3em 0; + } p { display: flex; margin-block-start: unset; margin-block-end: unset; + color: $text-secondary; + font-size: 0.95em; + } + + a { + color: $accent; + text-decoration: none; + transition: color 0.2s ease; + + &:hover { + color: $accent-hover; + } } div.feature { flex-direction: row; - background-color: white; + background-color: $bg-card; + border: 1px solid $border-color; border-radius: 1em; - gap: 1em; + gap: 1.5em; margin: auto; - padding: 1.5em; + padding: 2em; + backdrop-filter: blur(12px); + transition: border-color 0.3s ease; + + &:hover { + border-color: rgba($accent, 0.3); + } img.portriat { - width: 15em; + width: 14em; border-radius: 50%; + border: 3px solid $border-color; + transition: border-color 0.3s ease; + + &:hover { + border-color: $accent; + } } div.summary { @@ -73,19 +148,24 @@ body { div.row { flex-direction: row; - gap: 0.5em; + gap: 0.6em; + align-items: center; + transition: transform 0.15s ease; + &:hover { + transform: translateX(3px); + img.icon { + filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(600%) hue-rotate(180deg) brightness(105%) contrast(95%); + } + } } - - } } div.content-container { - max-width: 50em; - - // margin: auto; + max-width: 52em; + width: 100%; div.content-section { @@ -95,32 +175,69 @@ body { align-items: stretch; div.project { - background-color: white; - border-radius: 1em; + background-color: $bg-card; + border: 1px solid $border-color; + border-radius: 0.75em; flex-wrap: wrap; flex: 1 0 30%; - padding: 0.5em; + padding: 1em; align-content: flex-start; justify-content: space-between; + transition: border-color 0.3s ease, transform 0.2s ease; + + &:hover { + border-color: rgba($accent, 0.4); + transform: translateY(-2px); + } div.icons { padding-top: 0.5em; display: flex; flex-direction: row; gap: 0.75em; - } + a:hover img.icon { + filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(600%) hue-rotate(180deg) brightness(105%) contrast(95%); + } + } + } + + img { + border-radius: 0.5em; + max-width: 100%; } } } } - } - footer { text-align: center; - // background: #eee; - padding: 1em; + padding: 2em 1em; + color: $text-secondary; + font-size: 0.85em; + border-top: 1px solid $border-color; + margin-top: 3em; } -} \ No newline at end of file +} + +@media (max-width: 700px) { + body main { + div.feature { + flex-direction: column; + padding: 1.5em; + + img.portriat { + width: 10em; + } + + div.summary { + align-items: center; + } + } + + div.content-container div.content-section div.content-inner div.project { + flex: 1 0 100%; + } + } +} diff --git a/favicon.ico b/favicon.ico index 5bab89e..05658d6 100644 Binary files a/favicon.ico and b/favicon.ico differ diff --git a/index.html b/index.html index 1a1c19a..27b1882 100644 --- a/index.html +++ b/index.html @@ -122,7 +122,7 @@ diff --git a/start.sh b/start.sh index cda708d..0b16ab5 100755 --- a/start.sh +++ b/start.sh @@ -1,13 +1,13 @@ #!/bin/bash sassc css/style.scss css/style.css -python3 -m http.server 8080 & +python3 -m http.server 8080 # Keypress loop -while true; do - read -n 1 -s key - if [[ $key == "r" ]]; then - echo -e "\nRecompiling SCSS..." - sassc css/style.scss css/style.css && echo "Done." - fi -done +# while true; do +# read -n 1 -s key +# if [[ $key == "r" ]]; then +# echo -e "\nRecompiling SCSS..." +# sassc css/style.scss css/style.css && echo "Done." +# fi +# done