Compare commits

...

5 Commits

Author SHA1 Message Date
31cab15560 chore: updated README text 2025-07-06 00:04:44 +02:00
e02f1c4bc0 feat: new colors, updated bio, and mode.. 2025-07-06 00:03:07 +02:00
eb66cb1a8b fix: changed file extension 2025-07-06 00:02:00 +02:00
51c7899253 chore: added new CV 2025-07-05 23:52:30 +02:00
6acd12773d chore: new README 2025-07-05 23:51:51 +02:00
4 changed files with 145 additions and 78 deletions

View File

@@ -1 +1,14 @@
# Mike's official /new/ minimalistic website # Mike's Personal Website
A minimalistic, modern personal website.
## Mike around the web
- **Email**: [mike@c2yz.com](mailto:mike@c2yz.com)
- **GitHub**: [@eRgo35](https://github.com/eRgo35)
- **LinkedIn**: [mike-czyz](https://www.linkedin.com/in/mike-czyz)
- **YouTube**: [@eRgo35](https://www.youtube.com/@eRgo35)
---
Built with ❤️ by Michał Czyż

BIN
assets/Michał_Czyż_CV.pdf Normal file

Binary file not shown.

View File

@@ -46,24 +46,33 @@
<body> <body>
<div class="page"> <div class="page">
<h1 class="header"> <h1 class="header coiny-regular">
Hi, I'm Mike 👋🏻 Hi, I'm Mike 👋🏻
</h1> </h1>
<div class="bio"> <div class="bio">
<h4>A Student and a Software Developer</h4> <p class="small-text">I'm currently working on new fascinating projects, so be sure to follow me!</p>
<p>I'm currently working on new fascinating projects, <h2 class="coiny-regular">Student / Software Developer</h2>
so be sure to follow me!</p>
<h4>About Mike</h4> <p>
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.
</p>
<p>
I am also interested in artificial intelligence and machine learning. In addition, I actively create and develop many projects to further enhance my skills.
</p>
<h2 class="coiny-regular">My Projects</h2>
<a class="button" href="https://github.com/eRgo35?tab=repositories">Go to <i>Projects</i></a>
<!--
<ul> <ul>
<li>⚙️ I use daily: <code>.rs</code>, <code>.js</code> <code>.py</code> <code>.sh</code> <code>.cpp</code> <code>.md</code></li> <li>⚙️ I use daily: <code>.rs</code>, <code>.js</code> <code>.py</code> <code>.sh</code> <code>.tex</code> <code>.md</code></li>
<li>🏗️ Developed: <a href="https://github.com/eRgo35/lyra">lyra</a>, <a href="https://github.com/eRgo35/ah">ah</a>, <a href="https://github.com/eRgo35/ti">ti</a>, <a href="https://github.com/eRgo35/ascii">ascii</a>, etc...</li>
<li>🍚 Check out my: <a href="https://github.com/eRgo35/dots">dotfiles</a>, <a href="https://github.com/eRgo35/nix-config">nix flake</a></li> <li>🍚 Check out my: <a href="https://github.com/eRgo35/dots">dotfiles</a>, <a href="https://github.com/eRgo35/nix-config">nix flake</a></li>
</ul> </ul> -->
<h4>Mike around the web</h4> <h2 class="coiny-regular">Mike around the web</h2>
<ul> <ul>
<li>🐙 take a look at my <a href="https://github.com/eRgo35">GitHub</a></li> <li>🐙 take a look at my <a href="https://github.com/eRgo35">GitHub</a></li>
<li>💼 find me on <a href="https://www.linkedin.com/in/mike-czyz">LinkedIn</a></li> <li>💼 find me on <a href="https://www.linkedin.com/in/mike-czyz">LinkedIn</a></li>
@@ -74,10 +83,10 @@
<div class="world"> <div class="world">
<!-- <p>Also, checkout <a href="https://scientia.c2yz.com">this site</a>. You might find it interesting. 👀</p> --> <!-- <p>Also, checkout <a href="https://scientia.c2yz.com">this site</a>. You might find it interesting. 👀</p> -->
<!-- <p>[📎 <a href="assets/resume.pdf"">resume</a>] [📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</p> --> <p>[📎 <a href="assets/Michał_Czyż_CV.pdf"">cv</a>] [📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</p>
<p>[📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</p> <!-- <p>[📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</p> -->
<span class="separator">. . .</span> <!-- <span class="separator">. . .</span> -->
</div> </div>
<div class="aside"> <div class="aside">

View File

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