From e02f1c4bc036098c0fa76f558983cb13129cda4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Czy=C5=BC?= Date: Sun, 6 Jul 2025 00:03:07 +0200 Subject: [PATCH] feat: new colors, updated bio, and mode.. --- index.html | 31 ++++++---- styles.css | 175 +++++++++++++++++++++++++++++++++-------------------- 2 files changed, 130 insertions(+), 76 deletions(-) diff --git a/index.html b/index.html index 42381a9..45e7963 100644 --- a/index.html +++ b/index.html @@ -46,24 +46,33 @@
-

+

Hi, I'm Mike πŸ‘‹πŸ»

-

A Student and a Software Developer

+

I'm currently working on new fascinating projects, so be sure to follow me!

+ +

Student / Software Developer

-

I'm currently working on new fascinating projects, - so be sure to follow me!

+

+ I am currently pursuing a degree in Computer Science at the Silesian University of Technology in Gliwice. Programming is my passion. I have experience working with a variety of languages. Recently, I have been focusing my attention on Rust and JavaScript. +

+

+ I am also interested in artificial intelligence and machine learning. In addition, I actively create and develop many projects to further enhance my skills. +

-

About Mike

+

My Projects

+ + Go to Projects + + -

Mike around the web

+

Mike around the web

  • πŸ™ take a look at my GitHub
  • πŸ’Ό find me on LinkedIn
    • @@ -74,10 +83,10 @@
    - -

    [πŸ“§ contact]

    +

    [πŸ“Ž cv] [πŸ“§ contact]

    + - . . . +
    diff --git a/styles.css b/styles.css index 0814df5..42b393a 100644 --- a/styles.css +++ b/styles.css @@ -1,70 +1,56 @@ @import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap"); @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); +@import url('https://fonts.googleapis.com/css2?family=Coiny&display=swap'); * { transition: background-color 0.15s ease-in-out; } -html { - --rosewater: #dc8a78; - --flamingo: #dd7878; - --pink: #ea76cb; - --mauve: #8839ef; - --red: #d20f39; - --maroon: #e64553; - --peach: #fe640b; - --yellow: #df8e1d; - --green: #40a02b; - --teal: #179299; - --sky: #04a5e5; - --sapphire: #209fb5; - --blue: #1e66f5; - --lavender: #7287fd; - --text: #434f69; - --subtext1: #5c5f77; - --subtext0: #6c6f85; - --overlay2: #7c7f93; - --overlay1: #8c8fa1; - --overlay0: #9ca0b0; - --surface2: #acb0be; - --surface1: #bcc0cc; - --surface0: #ccd0da; - --base: #eff1f5; - --mantle: #e6e9ef; - --crust: #dce0e8; +:root { + --base: #faf4ed; + --surface: #fffaf3; + --overlay: #f2e9e1; + --muted: #9893a5; + --subtle: #797593; + --text: #575279; + --love: #b4637a; + --gold: #ea9d34; + --rose: #d7827e; + --pine: #286983; + --foam: #56949f; + --iris: #907aa9; + --highlight-low: #f4ede8; + --highlight-med: #dfdad9; + --highlight-high: #cecacd; } .dark { - --rosewater: #f4dbd6; - --flamingo: #f0c6c6; - --pink: #f5bde6; - --mauve: #c6a0f6; - --red: #ed8796; - --maroon: #ee99a0; - --peach: #f5a97f; - --yellow: #eed49f; - --green: #a6da95; - --teal: #8bd5ca; - --sky: #91d7e3; - --sapphire: #7dc4e4; - --blue: #8aadf4; - --lavender: #b7bdf8; - --text: #cad3f5; - --subtext1: #b8c0e0; - --subtext0: #a5adcb; - --overlay2: #939ab7; - --overlay1: #8087a2; - --overlay0: #6e738d; - --surface2: #5b6078; - --surface1: #494d64; - --surface0: #363a4f; - --base: #24273a; - --mantle: #1e2030; - --crust: #181926; + --base: #191724; + --surface: #1f1d2e; + --overlay: #26233a; + --muted: #6e6a86; + --subtle: #908caa; + --text: #e0def4; + --love: #eb6f92; + --gold: #f6c177; + --rose: #ebbcba; + --pine: #31748f; + --foam: #9ccfd8; + --iris: #c4a7e7; + --highlight-low: #21202e; + --highlight-med: #403d52; + --highlight-high: #524f67; } +.coiny-regular { + font-family: "Coiny", system-ui; + font-weight: 400; + font-style: normal; +} + + ::selection { - background-color: var(--overlay0); + background-color: var(--overlay); } @keyframes fadein { @@ -89,7 +75,7 @@ body { width: 100%; min-height: 100vh; /* height: 100vh; */ - background-color: var(--crust); + background-color: var(--base); color: var(--text); display: grid; place-items: center; @@ -108,13 +94,13 @@ body { height: 8in; margin-top: 5px; margin-bottom: 5px; - background-color: var(--base); + background-color: var(--surface); padding: 0.5in; position: relative; animation: 0.5s ease-out 0s 1 fadein; display: grid; grid-template-columns: 1fr 2.5in; - grid-template-rows: 0.85in 0.2fr 0.4fr auto; + grid-template-rows: 1.1in 0.2fr 0.4fr auto; gap: 0px 0px; grid-template-areas: "header header" @@ -126,37 +112,45 @@ body { } a { - color: var(--sapphire); + color: var(--pine); transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out; text-decoration: none; + font-weight: 500; } a:hover, a:active, a:focus { - color: var(--blue); + color: var(--iris); text-decoration: underline; } .header { grid-area: header; + font-size: 3em; } .bio { grid-area: bio; padding: 0 0.5in 0 0; text-align: justify; + overflow-wrap: break-word; + hyphens: auto; +} + +.small-text { + font-style: italic; + font-size: 0.8em; + padding: 0; + margin: 0; } .world { grid-area: world; } -.separator { -} - .aside { grid-area: aside; display: flex; @@ -192,13 +186,64 @@ a:focus { position: relative; } +.button { + display: block; + padding: 1em 2em; + color: var(--text); + z-index: 0; + position: relative; + border-radius: 10px; + cursor: pointer; +} + +.button:hover, .button:active, .button:focus { + text-decoration: unset; +} + +.button:before { + content: ''; + background: linear-gradient(45deg, var(--love), var(--gold), var(--rose), var(--pine), var(--foam), var(--iris), var(--love)); + position: absolute; + top: -1px; + left: -1px; + background-size: 200%; + z-index: -1; + filter: blur(4px); + width: calc(100% + 2px); + height: calc(100% + 2px); + animation: glowing 30s linear infinite; + opacity: 0; + transition: opacity .3s ease-in-out; + border-radius: 10px; + opacity: 1; +} + +.button:after { + z-index: -1; + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: var(--base); + left: 0; + top: 0; + border-radius: 10px; + transition: background 0.1s ease-in-out; +} + +@keyframes glowing { + 0% { background-position: 0 0; } + 50% { background-position: 400% 0; } + 100% { background-position: 0 0; } +} + .theme { position: absolute; bottom: 0.125in; right: 0.125in; - background-color: var(--mantle); - color: var(--yellow); - border: 1px solid var(--overlay0); + background-color: var(--base); + color: var(--gold); + border: 1px solid var(--overlay); border-radius: 10in; margin: 0.125in 0 0; padding: 0.125in;