gardasar-code.github.io/index.html at main · gardasar-code/gardasar-code.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="yandex-verification" content="e7f43b5ac814e6c0">
<title>Sergey Lapshin</title>
<meta name="description" content="Sergey Lapshin — software developer.">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#ffffff">
<link rel="canonical" href="https://gardasar-code.github.io/">
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:#ffffff;color:#10151b;
    min-height:100%;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    perspective:1100px;-webkit-font-smoothing:antialiased;
  }

  .blob{position:fixed;border-radius:50%;filter:blur(70px);opacity:.55;z-index:0;pointer-events:none}
  .b1{width:46vmin;height:46vmin;background:#39b6f5;top:8%;left:10%}
  .b2{width:40vmin;height:40vmin;background:#a06bff;bottom:6%;right:12%}
  .b3{width:34vmin;height:34vmin;background:#27e0c4;top:40%;right:32%}

  .stage{position:relative;z-index:1;transform-style:preserve-3d}

  .glass{
    position:relative;overflow:hidden;
    padding:54px 64px;border-radius:26px;
    background:rgba(255,255,255,.38);
    backdrop-filter:blur(10px) saturate(135%);
    -webkit-backdrop-filter:blur(10px) saturate(135%);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:
      0 40px 80px -28px rgba(20,40,80,.30),
      0 8px 24px -12px rgba(20,40,80,.18),
      inset 0 1px 0 rgba(255,255,255,.9),
      inset 0 -1px 0 rgba(255,255,255,.35);
    transform-style:preserve-3d;
    transform:rotateX(6deg) rotateY(-12deg);
    animation:tilt 11s ease-in-out infinite;
    transition:transform .2s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }

  .glass::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(125deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 62%,rgba(255,255,255,.28) 100%);
  }

  .glass::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(120deg,rgba(57,182,245,.18),rgba(160,107,255,.10) 45%,transparent 70%);
    opacity:.7;
  }
  .glass>*{position:relative;z-index:1;transform:translateZ(28px)}
  h1{font-size:clamp(34px,7vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.04}
  p{margin-top:14px;color:#46586b;font-size:18px;letter-spacing:.01em}
  .meta{margin-top:30px;font-size:13px;color:#8a97a6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}

  @keyframes tilt{
    0%,100%{transform:rotateX(6deg) rotateY(-12deg)}
    25%{transform:rotateX(-5deg) rotateY(9deg)}
    50%{transform:rotateX(9deg) rotateY(15deg)}
    75%{transform:rotateX(-7deg) rotateY(-9deg)}
  }
  @media(prefers-reduced-motion:reduce){
    .glass{animation:none;transform:none}
  }
</style>
</head>
<body>
  <div class="blob b1"></div>
  <div class="blob b2"></div>
  <div class="blob b3"></div>

  <div class="stage">
    <main class="glass">
      <h1>Sergey Lapshin</h1>
      <p>Software developer</p>
      <div class="meta">© 2026</div>
    </main>
  </div>
</body>
</html>