salRoid.github.io/index.html at master · salRoid/salRoid.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Salroid | Developer</title>
    <link rel="icon" href="img/android.ico" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            fontFamily: {
              display: ["Syne", "sans-serif"],
              body: ["Space Grotesk", "sans-serif"],
            },
            colors: {
              ink: "#0b0b10",
              surface: "#12131a",
              card: "#161825",
              accent: "#ff7a59",
              accentSoft: "#ffeadf",
              glow: "#35d0ba",
            },
            boxShadow: {
              glow: "0 20px 50px rgba(53, 208, 186, 0.2)",
              soft: "0 30px 80px rgba(10, 12, 20, 0.45)",
            },
            backgroundImage: {
              hero: "radial-gradient(circle at top left, rgba(255, 122, 89, 0.35), transparent 55%), radial-gradient(circle at 20% 20%, rgba(53, 208, 186, 0.25), transparent 50%), linear-gradient(120deg, #0b0b10 0%, #12131a 55%, #0b0b10 100%)",
            },
          },
        },
      };
    </script>
    <script>
      const applyTheme = (theme) => {
        const root = document.documentElement;
        if (theme === "dark") {
          root.classList.add("dark");
        } else {
          root.classList.remove("dark");
        }
      };

      const storedTheme = localStorage.getItem("theme");
      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
      applyTheme(storedTheme || (prefersDark ? "dark" : "light"));
    </script>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body class="bg-white text-slate-900 dark:bg-ink dark:text-white font-body antialiased" data-page="home">

    <div class="min-h-screen relative overflow-hidden bg-hero">
      <div class="vector-layer">
        <div class="vector-grid"></div>
        <svg class="flow-line" style="top: 20%; left: -120px" viewBox="0 0 700 240" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M10 120C120 40 220 200 340 120C450 60 560 180 690 90"
            fill="none"
            stroke="rgba(53, 208, 186, 0.5)"
            stroke-width="3"
            stroke-linecap="round"
          />
          <path
            d="M10 170C160 120 260 220 360 150C470 70 570 210 690 120"
            fill="none"
            stroke="rgba(255, 122, 89, 0.45)"
            stroke-width="2"
            stroke-linecap="round"
            stroke-dasharray="8 10"
          />
        </svg>
        <svg class="blob" style="top: -120px; right: -100px" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
          <path
            fill="#ff7a59"
            d="M414.6,83.9C466.7,136,475.1,214.1,471.1,292.7C467.1,371.3,450.7,450.4,398.7,492.2C346.6,534,259,538.6,185.4,508.6C111.8,478.6,52.1,414,41.6,339.5C31.1,265,69.9,180.6,126.7,120.4C183.6,60.1,258.6,24,336.5,29.6C414.3,35.2,494.9,82.5,414.6,83.9Z"
          />
        </svg>
        <svg class="blob secondary" style="bottom: -160px; left: -120px" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
          <path
            fill="#35d0ba"
            d="M455.5,113.2C506.7,164.6,502.5,252.5,477.2,328.6C452,404.8,405.8,469.3,340.6,502C275.4,534.7,191.2,535.7,128.6,499.9C66,464.2,25,391.7,20.3,316.4C15.5,241.1,47,163.1,104.2,109.3C161.4,55.6,244.4,26.1,328.4,32.6C412.4,39.1,497.3,81.7,455.5,113.2Z"
          />
        </svg>
      </div>
      <div class="relative z-10">
      <div data-component="header"></div>

<main class="px-6 lg:px-12 pb-20">
  <section id="home">
    <section class="home-hero mt-10 relative overflow-hidden rounded-[40px] border border-white/15 bg-slate-950 text-white shadow-soft">
      <div class="absolute inset-0">
        <video class="hero-video" autoplay muted loop playsinline>
          <source src="Videos/evening-drive-and-windmills.3840x2160.mp4" type="video/mp4" />
        </video>
        <div class="hero-overlay"></div>
      </div>
      <div class="relative grid gap-8 lg:grid-cols-[1fr_1fr] min-h-[520px] px-8 py-10">
        <div class="flex flex-col justify-between">
          <div>
            <p class="text-xs uppercase tracking-[0.4em] text-white/70">Delivering</p>
            <h1 class="font-display text-4xl sm:text-5xl leading-tight mt-3 text-white">Scalable<br />Solutions</h1>
            <p class="text-sm text-white/75 mt-4 max-w-sm">Designing resilient architectures, intelligent systems, and product experiences built to perform reliably at scale.</p>
          </div>
        </div>
        <div class="flex flex-col items-end justify-between text-right">
          <a class="text-xs uppercase tracking-[0.3em] text-white/70 hover:text-white transition" href="projects.html">Projects</a>
          <div class="max-w-xs">
            <p class="text-sm text-white/70">Engineered for</p>
            <h2 class="font-display text-3xl sm:text-4xl text-white">Effortless<br />Experience</h2>
          </div>
        </div>
      </div>
      <div class="hero-bottom-row absolute bottom-8 left-8 right-8 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <a class="hero-about-card rounded-2xl backdrop-blur-sm p-2 flex items-center gap-4 text-white/90 hover:text-white transition" href="about.html">
          <div class="h-12 w-12 rounded-full overflow-hidden border border-white/30">
            <img class="h-full w-full object-cover" src="img/profile/profile_salroid.jpg" alt="Sajal Gupta" />
          </div>
          <div>
            <p class="text-sm font-semibold text-white">About salroid !</p>
            <span class="text-xs text-white/70">The one with devil on the other side of the mirror</span>
          </div>
        </a>
        <a class="rounded-[28px] p-2 backdrop-blur-sm flex items-center gap-4 hover:text-white transition" href="https://play.google.com/store/apps/details?id=tech.salroid.filmy&hl=en_IN" target="_blank" rel="noreferrer">
          <div class="h-14 w-14 rounded-[18px] flex items-center justify-center overflow-hidden">
            <img class="h-10 w-10 rounded-[6px]" src="img/logo_filmy.png" alt="Filmy app icon" />
          </div>
          <div>
            <p class="text-sm font-semibold text-white/90 whitespace-nowrap">Filmy - Discover Movies</p>
            <span class="text-xs uppercase tracking-[0.35em] text-white/60">Open in Play Store</span>
          </div>
        </a>
      </div>
    </section>
</main>
    <script src="js/includes.js"></script>
    </div>
  </body>
</html>