diff --git a/css/style.css b/css/style.css
index dce9988..932e87b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,7 +3,7 @@
font-style: normal;
font-weight: 300;
font-display: swap;
- src: url(/fonts/Raleway-Light.ttf) format('truetype');
+ src: url(../fonts/Raleway-Light.ttf) format('truetype');
}
@font-face {
@@ -11,486 +11,196 @@
font-style: normal;
font-weight: 400;
font-display: swap;
- src: url(/fonts/Raleway-Regular.ttf) format('truetype');
+ src: url(../fonts/Raleway-Light.ttf) format('truetype');
}
-:root {
- color-scheme: light dark;
-
- --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --font-display: 'Raleway', var(--font-sans);
- --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
-
- --bg: oklch(99.5% 0.002 247);
- --surface: oklch(97.5% 0.004 247);
- --text: oklch(25% 0.02 264);
- --muted: oklch(50% 0.02 264);
- --faint: oklch(66% 0.015 264);
- --accent: oklch(58% 0.211 255);
- --accent-soft: oklch(58% 0.211 255 / 10%);
- --line: oklch(30% 0.02 264 / 12%);
- --maxw: 620px;
- --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --bg: oklch(17% 0.012 264);
- --surface: oklch(21% 0.013 264);
- --text: oklch(96% 0.003 264);
- --muted: oklch(71% 0.012 264);
- --faint: oklch(52% 0.02 264);
- --accent: oklch(72% 0.16 255);
- --accent-soft: oklch(72% 0.16 255 / 14%);
- --line: oklch(80% 0.01 264 / 14%);
- }
-
- body::before {
- background:
- radial-gradient(40vmax 40vmax at 20% 25%, oklch(62% 0.22 255 / 30%), transparent 60%),
- radial-gradient(38vmax 38vmax at 82% 70%, oklch(66% 0.2 300 / 24%), transparent 60%),
- radial-gradient(34vmax 34vmax at 60% 12%, oklch(72% 0.18 200 / 20%), transparent 60%);
- filter: blur(45px) saturate(160%);
- }
-
- body::after {
- mix-blend-mode: plus-lighter;
- opacity: 0.85;
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
+/* HTML & BODY*/
html {
- -webkit-text-size-adjust: 100%;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- scroll-behavior: smooth;
-}
-
-body {
- margin: 0;
- min-height: 100dvh;
- background-color: var(--bg);
- color: var(--text);
- font-family: var(--font-sans);
- font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
- line-height: 1.6;
- font-weight: 400;
- display: flex;
- flex-direction: column;
- overflow-x: hidden;
-}
-
-body::before,
-body::after {
- content: '';
- position: fixed;
- inset: -25vmax;
- z-index: -2;
- pointer-events: none;
- background:
- radial-gradient(40vmax 40vmax at 20% 25%, oklch(58% 0.211 255 / 22%), transparent 60%),
- radial-gradient(38vmax 38vmax at 82% 70%, oklch(62% 0.18 300 / 16%), transparent 60%),
- radial-gradient(34vmax 34vmax at 60% 12%, oklch(70% 0.16 200 / 14%), transparent 60%);
- filter: blur(40px) saturate(140%);
- will-change: transform;
- animation: drift-a 28s var(--ease) infinite alternate;
-}
-
-body::after {
- inset: -30vmax;
- background:
- radial-gradient(30vmax 30vmax at 75% 30%, oklch(64% 0.2 270 / 14%), transparent 60%),
- radial-gradient(32vmax 32vmax at 15% 80%, oklch(60% 0.19 220 / 14%), transparent 60%);
- filter: blur(50px) saturate(130%);
- animation: drift-b 36s var(--ease) infinite alternate;
- mix-blend-mode: screen;
-}
-
-@keyframes drift-a {
- 0% { transform: translate3d(0, 0, 0) scale(1); }
- 50% { transform: translate3d(4vmax, -3vmax, 0) scale(1.08); }
- 100% { transform: translate3d(-3vmax, 4vmax, 0) scale(1.04); }
-}
-
-@keyframes drift-b {
- 0% { transform: translate3d(0, 0, 0) scale(1.05); }
- 50% { transform: translate3d(-5vmax, 3vmax, 0) scale(1); }
- 100% { transform: translate3d(3vmax, -4vmax, 0) scale(1.1); }
-}
-
-::selection {
- background: var(--accent-soft);
- color: var(--text);
-}
-
-:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 3px;
- border-radius: 3px;
-}
-
-a {
- color: var(--accent);
- text-decoration: none;
-}
-
-main {
width: 100%;
- max-width: var(--maxw);
- margin-inline: auto;
- padding-inline: clamp(1.25rem, 5vw, 2rem);
- padding-block: clamp(4rem, 12vh, 8rem) clamp(3rem, 8vh, 5rem);
-}
-
-.hero {
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 1.1rem;
- margin-bottom: clamp(3.5rem, 10vh, 5.5rem);
-}
-
-.avatar {
- width: clamp(8rem, 26vw, 10rem);
- height: clamp(8rem, 26vw, 10rem);
- object-fit: cover;
- border-radius: 50%;
- box-shadow: 0 0 0 1px var(--line), 0 8px 30px -12px oklch(20% 0.02 264 / 40%);
- transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
+ height: 100%;
+ background-image: linear-gradient(to top, hsla(0, 0%, 96%, 1) 0%, hsla(40, 4%, 95%, 1) 100%);
}
-
-.avatar:hover {
- transform: scale(1.04);
- box-shadow: 0 0 0 2px var(--accent), 0 12px 40px -12px var(--accent-soft);
-}
-
-.hero h1 {
- font-family: var(--font-display);
+body{
+ font-family: 'Raleway', sans-serif;
font-weight: 300;
- font-size: clamp(2.25rem, 3.5rem + 4vw, 3.5rem);
- line-height: 1.05;
- letter-spacing: -0.02em;
- margin: 0;
-}
-
-.tagline {
- margin: 0;
- color: var(--muted);
- font-size: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
- font-weight: 400;
- max-width: 36ch;
- text-wrap: balance;
-}
-
-.nav {
+ max-width: 700px;
+ text-align: center;
+ margin: auto;
display: flex;
- gap: 0.6rem;
- margin-top: 0.5rem;
- list-style: none;
- padding: 0;
-}
-
-.nav-link {
- display: grid;
- place-items: center;
- width: 44px;
- height: 44px;
- border-radius: 12px;
- color: var(--muted);
- border: 1px solid var(--line);
- background: color-mix(in oklch, var(--surface), transparent 60%);
- backdrop-filter: blur(8px);
- transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.25s var(--ease);
+ flex-flow: column;
+ color: hsla(0, 0%, 13%, 1);
}
-
-.nav-link svg {
- width: 20px;
- height: 20px;
+.manifesto {
+ text-align: justify;
}
-
-.nav-link:hover {
- color: var(--accent);
- border-color: var(--accent);
- background: var(--accent-soft);
- transform: translateY(-2px);
+.manifesto h1 {
+ text-align: center;
}
-
-.section {
- margin-bottom: clamp(2.75rem, 8vh, 4rem);
+/* HEADER */
+header{
+ order: 1;
+ margin-top: 2rem;
}
-
-.section:last-of-type {
+header h1{
+ color: hsla(203, 100%, 46%, 1);
margin-bottom: 0;
}
-
-.section-label {
- display: flex;
- align-items: center;
- gap: 0.85rem;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- font-weight: 400;
- letter-spacing: 0.14em;
- text-transform: uppercase;
- color: var(--faint);
- margin: 0 0 1.1rem;
-}
-
-.section-label::after {
- content: '';
- flex: 1;
- height: 1px;
- background: var(--line);
+header h1:hover{
+ animation: hue 1.5s linear infinite;
}
-
-.list {
- list-style: none;
- margin: 0;
- padding: 0;
+header h2{
+ font-style: italic;
}
-
-.project {
- display: block;
- padding: 0.85rem 0.75rem;
- margin-inline: -0.75rem;
- border-radius: 0.85rem;
- transition: background-color 0.25s var(--ease);
-}
-
-.project + .project {
- margin-top: 0.1rem;
-}
-
-.project:hover {
- background: var(--accent-soft);
-}
-
-.project-title {
- display: inline-block;
- font-weight: 600;
- color: var(--text);
- background-image: linear-gradient(var(--accent), var(--accent));
- background-size: 0 1px;
- background-repeat: no-repeat;
- background-position: 0 100%;
- transition: color 0.25s var(--ease), background-size 0.3s var(--ease);
-}
-
-.project:hover .project-title {
- color: var(--accent);
- background-size: 100% 1px;
+.avatar{
+ margin: 1rem;
+ width: 15rem;
+ height: 15rem;
+ border-radius: 10%;
}
-
-.project-desc {
- margin: 0.15rem 0 0;
- color: var(--muted);
- font-size: 0.9375rem;
+/* NAV */
+nav{
+ order: 2;
+ color: hsla(203, 100%, 46%, 1);
}
-
-.project-tags {
- display: flex;
- flex-wrap: wrap;
- gap: 0.4rem;
+.contact{
list-style: none;
+ margin: 0;
padding: 0;
- margin: 0.6rem 0 0;
}
-
-.tag {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- letter-spacing: 0.02em;
- color: var(--faint);
- border: 1px solid var(--line);
- padding: 0.18rem 0.5rem;
- border-radius: 999px;
-}
-
-.events {
- display: grid;
-}
-
-.event {
- display: grid;
- grid-template-columns: 3rem 1fr auto;
- align-items: baseline;
- gap: 0.85rem;
- padding: 0.7rem 0;
- border-top: 1px solid var(--line);
+.contact li {
+ margin: 5px;
+ padding: 5px;
+ display: inline;
+ list-style-position: inside;
}
-
-.events .event:last-child {
- border-bottom: 1px solid var(--line);
-}
-
-.event-year {
- font-family: var(--font-mono);
- font-size: 0.8125rem;
- color: var(--faint);
- font-variant-numeric: tabular-nums;
-}
-
-.event-detail {
- display: flex;
- flex-wrap: wrap;
- align-items: baseline;
- gap: 0.5rem;
- min-width: 0;
-}
-
-.event-name {
- color: var(--text);
- font-weight: 500;
- background-image: linear-gradient(var(--accent), var(--accent));
- background-size: 0 1px;
- background-repeat: no-repeat;
- background-position: 0 100%;
- transition: color 0.25s var(--ease), background-size 0.3s var(--ease);
+.contact li a {
+ color: inherit;
+ text-decoration: none;
}
-
-.event-name:hover {
- color: var(--accent);
- background-size: 100% 1px;
+.contact li a:hover i{
+ animation: hue 1.5s linear infinite;
}
-.event-loc {
- color: var(--muted);
- font-size: 0.9em;
+/* SEcTIONS */
+.projects{
+ order: 3;
}
-
-.event-dot {
- color: var(--faint);
- user-select: none;
+.hackathon{
+ order: 4;
}
-.event-award {
- justify-self: end;
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- letter-spacing: 0.03em;
- color: var(--accent);
- background: var(--accent-soft);
- border: 1px solid color-mix(in oklch, var(--accent), transparent 60%);
- padding: 0.2rem 0.55rem;
- border-radius: 999px;
- white-space: nowrap;
+/* FOOTER */
+footer{
+ order: 5;
}
-.footer {
- margin-top: clamp(3.5rem, 10vh, 5rem);
- padding-top: 1.75rem;
- border-top: 1px solid var(--line);
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- gap: 0.5rem;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- color: var(--faint);
-}
-
-.footer a {
- color: var(--muted);
- transition: color 0.25s var(--ease);
-}
-
-.footer a:hover {
- color: var(--accent);
-}
-
-.manifesto {
- max-width: 64ch;
- margin-inline: auto;
- padding-block: clamp(3rem, 9vh, 5.5rem);
- text-align: justify;
+/* LINNKS */
+a {
+ color: hsla(203, 100%, 46%, 1);
+ text-decoration: none;
}
-.back {
- display: inline-block;
- font-family: var(--font-mono);
- font-size: 0.8rem;
- color: var(--muted);
- margin-bottom: 2.5rem;
- transition: color 0.25s var(--ease), transform 0.25s var(--ease);
+a:hover {
+ animation: hue 1.5s linear infinite;
+ text-decoration: underline;
+}
+.location {
+ color: hsla(0, 0%, 13%, 1);
+ font-style: italic;
+}
+.hackathon i{
+ color: hsla(203, 100%, 46%, 1);
+}
+.hackathon i:hover{
+ animation: hue 1.5s linear infinite;
+}
+/* ANIMATIONS */
+@keyframes hue {
+ 0% {color: hsla(0, 50%, 50%, 1);}
+ 10% {color: hsla(30, 50%, 50%, 1);}
+ 20% {color: hsla(60, 50%, 50%, 1);}
+ 30% {color: hsla(90, 50%, 50%, 1);}
+ 40% {color: hsla(120, 50%, 50%, 1);}
+ 50% {color: hsla(150, 50%, 50%, 1);}
+ 60% {color: hsla(180, 50%, 50%, 1);}
+ 70% {color: hsla(210, 50%, 50%, 1);}
+ 80% {color: hsla(240, 50%, 50%, 1);}
+ 90% {color: hsla(270, 50%, 50%, 1);}
+ 100% {color: hsla(0, 50%, 50%, 1);}
+
+}
+@keyframes hue-fill {
+ 0% {fill: hsla(0, 50%, 50%, 1);}
+ 10% {fill: hsla(30, 50%, 50%, 1);}
+ 20% {fill: hsla(60, 50%, 50%, 1);}
+ 30% {fill: hsla(90, 50%, 50%, 1);}
+ 40% {fill: hsla(120, 50%, 50%, 1);}
+ 50% {fill: hsla(150, 50%, 50%, 1);}
+ 60% {fill: hsla(180, 50%, 50%, 1);}
+ 70% {fill: hsla(210, 50%, 50%, 1);}
+ 80% {fill: hsla(240, 50%, 50%, 1);}
+ 90% {fill: hsla(270, 50%, 50%, 1);}
+ 100% {fill: hsla(0, 50%, 50%, 1);}
}
-.back:hover {
- color: var(--accent);
- transform: translateX(-3px);
+@media (prefers-color-scheme: dark) {
+ html {
+ background-image: none;
+ background-color: hsla(0, 0%, 7%, 1)
+ }
+ body {
+ color: hsla(0, 0%, 97%, 1);
+ }
+ .location {
+ color: hsla(0, 0%, 97%, 1);
+ }
}
-.manifesto h1 {
- font-family: var(--font-display);
- font-weight: 300;
- font-size: clamp(1.75rem, 2rem + 3vw, 2.75rem);
- line-height: 1.15;
- letter-spacing: -0.02em;
- text-align: center;
- margin: 0 0 2.5rem;
+/* ============= FORK ME ON GITHUB =========== */
+.octicon {
+ color: hsla(0, 0%, 96%, 1);
+ position: fixed;
+ top: 0;
+ border: 0;
+ right: 0;
+ fill:hsla(203, 100%, 46%, 1);
}
-
-.manifesto p {
- margin: 0 0 1.25rem;
- line-height: 1.8;
- color: var(--muted);
- hyphens: auto;
+.github-corner:hover .octo-arm {
+ animation: octocat-wave 560ms ease-in-out;
}
-
-.manifesto p:last-of-type {
- color: var(--text);
- font-weight: 500;
+.github-corner:hover .octicon {
+ animation: hue-fill 1.5s linear infinite;
}
-
-@keyframes rise {
- from {
- opacity: 0;
- transform: translateY(14px);
- }
- to {
- opacity: 1;
- transform: none;
+@keyframes octocat-wave {
+ 0%,
+ 100% {
+ transform: rotate(0);
}
-}
-@media (prefers-reduced-motion: no-preference) {
- .reveal {
- opacity: 0;
- animation: rise 0.85s var(--ease) forwards;
- animation-delay: calc(var(--d, 0) * 90ms);
+ 20%,
+ 60% {
+ transform: rotate(-25deg);
}
- html {
- scroll-behavior: smooth;
+ 40%,
+ 80% {
+ transform: rotate(10deg);
}
}
-
-@media (prefers-reduced-motion: reduce) {
- *,
- *::before,
- *::after {
- animation-duration: 0.001ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.001ms !important;
- scroll-behavior: auto !important;
+@media (max-width:500px) {
+ .github-corner:hover .octo-arm {
+ animation: none;
}
-}
-@media (max-width: 420px) {
- .event {
- grid-template-columns: 2.5rem 1fr;
+ .github-corner .octo-arm {
+ animation: octocat-wave 560ms ease-in-out;
}
+}
- .event-award {
- grid-column: 2;
- justify-self: start;
- margin-top: 0.4rem;
+@media (prefers-color-scheme: dark) {
+ .octicon {
+ color: hsla(0, 0%, 7%, 1);
}
}
+/* =========================================== */
diff --git a/index.html b/index.html
index 9ebc918..71967c6 100644
--- a/index.html
+++ b/index.html
@@ -3,175 +3,168 @@
-
+
+
Lucas Maximiliano Marino
-
-
-
-
+
-
-
+
+
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ Lucas Maximiliano Marino
+ developer, coffee addict, and hackathon lover
+
+
+
+ projects
+
+
+ Navigator Framework
+ — A highly opinionated telegram bot framework for .NET
+
+
+
+
+ Thankifi
+ — A free and open source API that makes it easy for you to express gratitude. Be grateful!
+
+
+
+
+ random_color
+ — Rust crate for generating random attractive colors
+
+
+
+
+ anytype-bin
+ — Mirror of the aur pkgbuild I maintain for Anytype
+
+
+
+
+ Gimme keycodes!
+ — Get javascript keycodes for every key!
+
+
+
+
+
-
+