From bb17162228734001c398cf5357d2067009b78bda Mon Sep 17 00:00:00 2001 From: Lucas Maximiliano Marino Date: Sat, 20 Jun 2026 23:29:30 +0200 Subject: [PATCH] Revert "feat: modern minimalist redesign" --- css/style.css | 576 ++++++++++++------------------------------------- index.html | 309 +++++++++++++------------- manifesto.html | 69 +++--- 3 files changed, 328 insertions(+), 626 deletions(-) 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 -

Lucas Maximiliano Marino

-

developer, coffee addict, and hackathon lover

- -
- -
-

projects

-
    -
  • - Navigator Framework -

    A highly opinionated Telegram bot framework for .NET.

    -
      -
    • .NET
      • -
    • telegram
      • -
    -
    • -
  • - random_color -

    Rust crate for generating random attractive colors.

    -
      -
    • rust
      • -
    • crate
      • -
    -
    • -
  • - Gimme keycodes! -

    Get JavaScript key codes for every key.

    -
      -
    • javascript
      • -
    • tool
      • -
    -
    • -
-
- -
-

hackathons

- -
- -
- © 2016–2026 Lucas Maximiliano Marino - view source -
-
+ + + + + + + +
+ Profile Photo +

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! +

+ +
+
+

hackathons

+ +

+ HackJunction 2019 + — + Helsinki, November 2019 + +

+ + +

+ HackJunction 2018 + — + Espoo, November 2018 + + +

+ + +

+ HackUPC 2018 + — + Barcelona, October 2018 + + +

+ + +

+ HackForGood 2017 + — + Cartagena, March 2017 + + +

+ + +

+ HackUPC Winter2017 + — + Barcelona, March 2017 + +

+ + +

+ HackJunction 2016 + — + Helsinki, November 2016 + +

+ + +

+ HackUPC Fall2016 + — + Barcelona, October 2016 + +

+ + +

+ HackUPC 2016 + — + Barcelona, February 2016 + +

+ +
+ - + diff --git a/manifesto.html b/manifesto.html index 6d83a77..579fd66 100644 --- a/manifesto.html +++ b/manifesto.html @@ -3,63 +3,62 @@ - + + Guerilla Open Access Manifesto - - - - + + - - + + - + -
-
- ← back +
-

Guerilla Open Access Manifesto

+

Guerilla Open Access Manifesto

-

Information is power. But like all power, there are those who want to keep it for themselves. The world's entire scientific and cultural heritage, published over centuries in books and journals, is increasingly being digitized and locked up by a - handful of private corporations. Want to read the papers featuring the most famous results of the sciences? You'll need to send enormous amounts to publishers like Reed Elsevier.

+

Information is power. But like all power, there are those who want to keep it for themselves. The world's entire scientific and cultural heritage, published over centuries in books and journals, is increasingly being digitized and locked up by a + handful of private corporations. Want to read the papers featuring the most famous results of the sciences? You'll need to send enormous amounts to publishers like Reed Elsevier.

-

There are those struggling to change this. The Open Access Movement has fought valiantly to ensure that scientists do not sign their copyrights away but instead ensure their work is published on the Internet, under terms that allow anyone to access - it. But even under the best scenarios, their work will only apply to things published in the future. Everything up until now will have been lost.

+

There are those struggling to change this. The Open Access Movement has fought valiantly to ensure that scientists do not sign their copyrights away but instead ensure their work is published on the Internet, under terms that allow anyone to access + it. But even under the best scenarios, their work will only apply to things published in the future. Everything up until now will have been lost.

-

That is too high a price to pay. Forcing academics to pay money to read the work of their colleagues? Scanning entire libraries but only allowing the folks at Google to read them? Providing scientific articles to those at elite universities in the - First World, but not to children in the Global South? It's outrageous and unacceptable.

+

That is too high a price to pay. Forcing academics to pay money to read the work of their colleagues? Scanning entire libraries but only allowing the folks at Google to read them? Providing scientific articles to those at elite universities in the + First World, but not to children in the Global South? It's outrageous and unacceptable.

-

"I agree," many say, "but what can we do? The companies hold the copyrights, they make enormous amounts of money by charging for access, and it's perfectly legal — there's nothing we can do to stop them." But there is something we can, something - that's already being done: we can fight back.

+

"I agree," many say, "but what can we do? The companies hold the copyrights, they make enormous amounts of money by charging for access, and it's perfectly legal — there's nothing we can do to stop them." But there is something we can, something + that's already being done: we can fight back.

-

Those with access to these resources — students, librarians, scientists — you have been given a privilege. You get to feed at this banquet of knowledge while the rest of the world is locked out. But you need not — indeed, morally, you cannot — keep - this privilege for yourselves. You have a duty to share it with the world. And you have: trading passwords with colleagues, filling download requests for friends.

+

Those with access to these resources — students, librarians, scientists — you have been given a privilege. You get to feed at this banquet of knowledge while the rest of the world is locked out. But you need not — indeed, morally, you cannot — keep + this privilege for yourselves. You have a duty to share it with the world. And you have: trading passwords with colleagues, filling download requests for friends.

-

Meanwhile, those who have been locked out are not standing idly by. You have been sneaking through holes and climbing over fences, liberating the information locked up by the publishers and sharing them with your friends.

+
-

But all of this action goes on in the dark, hidden underground. It's called stealing or piracy, as if sharing a wealth of knowledge were the moral equivalent of plundering a ship and murdering its crew. But sharing isn't immoral — it's a moral imperative. - Only those blinded by greed would refuse to let a friend make a copy.

+

Meanwhile, those who have been locked out are not standing idly by. You have been sneaking through holes and climbing over fences, liberating the information locked up by the publishers and sharing them with your friends.

-

Large corporations, of course, are blinded by greed. The laws under which they operate require it — their shareholders would revolt at anything less. And the politicians they have bought off back them, passing laws giving them the exclusive power - to decide who can make copies.

+

But all of this action goes on in the dark, hidden underground. It's called stealing or piracy, as if sharing a wealth of knowledge were the moral equivalent of plundering a ship and murdering its crew. But sharing isn't immoral — it's a moral imperative. + Only those blinded by greed would refuse to let a friend make a copy.

-

There is no justice in following unjust laws. It's time to come into the light and, in the grand tradition of civil disobedience, declare our opposition to this private theft of public culture.

+

Large corporations, of course, are blinded by greed. The laws under which they operate require it — their shareholders would revolt at anything less. And the politicians they have bought off back them, passing laws giving them the exclusive power + to decide who can make copies.

-

We need to take information, wherever it is stored, make our copies and share them with the world. We need to take stuff that's out of copyright and add it to the archive. We need to buy secret databases and put them on the Web. We need to download - scientific journals and upload them to file sharing networks. We need to fight for Guerilla Open Access.

+

There is no justice in following unjust laws. It's time to come into the light and, in the grand tradition of civil disobedience, declare our opposition to this private theft of public culture.

-

With enough of us, around the world, we'll not just send a strong message opposing the privatization of knowledge — we'll make it a thing of the past. Will you join us?

+

We need to take information, wherever it is stored, make our copies and share them with the world. We need to take stuff that's out of copyright and add it to the archive. We need to buy secret databases and put them on the Web. We need to download + scientific journals and upload them to file sharing networks. We need to fight for Guerilla Open Access.

-

Aaron Swartz

-

July 2008, Eremo, Italy

-
-
+

With enough of us, around the world, we'll not just send a strong message opposing the privatization of knowledge — we'll make it a thing of the past. Will you join us?

+ +

Aaron Swartz

+ +

July 2008, Eremo, Italy

+