work/index.html at main · feraio/work · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>feliperamos.work</title>
<meta name="description" content="felipe ramos, product design portfolio. currently in maintenance.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&family=Space+Mono:wght@400;700&display=swap">
<style>
  :root{
    --paper:#f4f5f6;
    --ink:#0e0f11;
    --muted:#9a9ea4;
    --line:#dfe2e5;
    --work:#faaf40;
    --dur:.6s;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"Space Mono",ui-monospace,monospace;
    -webkit-font-smoothing:antialiased;
    min-height:100svh;
    display:flex;flex-direction:column;
    overflow:hidden;
  }
  a{color:inherit;text-decoration:none}
  a:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}

  .topbar{
    flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
    padding:clamp(1rem,2.6vh,1.7rem) clamp(1.2rem,4vw,3rem);
    font-size:.78rem;letter-spacing:.1em;color:var(--muted);text-transform:lowercase;
  }
  .topbar .tag{color:var(--ink)}
  .topbar .ext{color:var(--work)}

  main{
    flex:1 1 auto;min-height:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(1.4rem,4vh,2.4rem);
    padding:0 clamp(1.2rem,5vw,3rem);text-align:center;
  }
  .eyebrow{font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
  .word{
    font-family:"Playfair Display",serif;font-weight:900;line-height:.9;
    font-size:clamp(4rem,18vw,12rem);letter-spacing:-.02em;
  }
  .note{max-width:36ch;color:var(--muted);font-size:.92rem;line-height:1.6}
  .note b{color:var(--ink);font-weight:700}

  .bar{width:min(320px,64vw);height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
  .bar::after{content:"";position:absolute;top:0;left:0;height:100%;width:38%;background:var(--work);border-radius:2px;animation:slide 1.7s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}

  .footer{
    flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
    padding:clamp(1rem,2.6vh,1.7rem) clamp(1.2rem,4vw,3rem);
    font-size:.78rem;letter-spacing:.1em;color:var(--muted);text-transform:lowercase;
  }
  .footer a{color:var(--muted);white-space:nowrap;transition:color .3s ease}
  .footer a .arrow{color:var(--work)}
  .footer a:hover,.footer a:focus-visible{color:var(--ink)}

  /* load reveal */
  main>*{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
  .loaded main>*{opacity:1;transform:none}
  .loaded main>*:nth-child(2){transition-delay:.08s}
  .loaded main>*:nth-child(3){transition-delay:.16s}
  .loaded main>*:nth-child(4){transition-delay:.24s}
  .footer{opacity:0;transition:opacity .6s ease .5s}
  .loaded .footer{opacity:1}

  @media (max-width:600px){
    .footer{flex-direction:column;align-items:flex-start;gap:.5rem}
  }
  @media (prefers-reduced-motion: reduce){
    *{transition:none!important}
    main>*,.footer{opacity:1!important;transform:none!important}
    .bar::after{animation:none;width:46%}
  }
</style>
</head>
<body>
  <header class="topbar">
    <span class="tag">feliperamos<span class="ext">.work</span></span>
  </header>

  <main>
    <h1 class="word">work</h1>
    <span class="eyebrow">in maintenance</span>
  </main>

  <footer class="footer">
    <a href="https://feliperamos.zip">feliperamos.zip</a>
    <!-- <span aria-hidden="true">&empty;</span> -->
  </footer>

  <script>
    requestAnimationFrame(function(){requestAnimationFrame(function(){document.body.classList.add("loaded");});});
  </script>
</body>
</html>