jaypalsapara.github.io/index.html at main · jaypalsapara/jaypalsapara.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
<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" type="image/png" href="/me.png" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap"
      rel="stylesheet"
    />
    <title>Jaypal Sapara</title>
    <script type="module" crossorigin src="/assets/index.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index.css">
  </head>
  <body class="bg-zinc-100 text-zinc-900">
    <div id="app">
      <main class="min-h-dvh max-w-xl mx-auto p-4 flex flex-col">
        <!-- Header -->
        <header
          class="flex mt-8 md:mt-24 flex-col items-center justify-center gap-4"
        >
          <img
            src="/me.webp"
            width="128"
            height="128"
            class="drop-shadow-real mb-3 drop-shadow-yellow-700/15 max-w-24 md:max-w-28"
            alt=""
          />
          <h1 class="text-3xl leading-6 font-semibold tracking-tight">
            Jaypal Sapara
          </h1>
          <div class="flex items-baseline tracking-normal gap-2">
            <p class="text-lg">Web Developer</p>
            <a
              href="https://jaypalsapara.in"
              class="inline-flex font-medium items-center gap-1 bg-white border shadow-xs border-zinc-300 px-1.5 rounded-sm"
              target="_blank"
              >Portfolio <i data-lucide="arrow-up-right"></i
            ></a>
          </div>
        </header>
        <!-- Main Content -->
        <section class="mt-4 md:mt-8">
          <p
            class="mt-4 max-w-[50ch] text-pretty text-center mx-auto text-zinc-600"
          >
            I am a full-stack developer with a passion for creating beautiful
            and functional websites. I have experience in various back-end and
            front-end technologies and frameworks, and I love to learn new
            things.
          </p>
        </section>
        <section class="my-8 md:my-16">
          <p class="font-medium mb-4">Products</p>
          <div
            class="*:py-1.5 *:border-b *:border-zinc-300 *:hover:text-zinc-900 *:hover:border-b-zinc-900 text-zinc-600 transition-colors"
          >
            <a
              href="https://jaypalsapara.github.io/encrypto"
              class="flex justify-between items-center gap-1"
              target="_blank"
              >Encrypto <i data-lucide="arrow-up-right"></i
            ></a>
            <a
              href="https://jaypalsapara.github.io/invoiceapp/create"
              class="flex justify-between items-center gap-1"
              target="_blank"
              >Invoice <i data-lucide="arrow-up-right"></i
            ></a>
            <a
              href="https://jaypalsapara.github.io/tool-jsminify/"
              class="flex justify-between items-center gap-1"
              target="_blank"
              >JS-Minifier <i data-lucide="arrow-up-right"></i
            ></a>

            <a
              href="https://jaypalsapara.github.io/nth-child-selector/"
              class="flex justify-between items-center gap-1"
              target="_blank"
              >Nth-Child Selector <i data-lucide="arrow-up-right"></i
            ></a>
            <a
              href="https://jaypalsapara.github.io/dots/"
              class="flex justify-between items-center gap-1"
              target="_blank"
              >Dots <i data-lucide="arrow-up-right"></i
            ></a>
          </div>
        </section>
        <footer
          class="mt-auto flex justify-between items-center border-t border-zinc-300 pt-4 text-zinc-600"
        >
          <p class="text-center">Made with ❤️ by me</p>
          <div class="flex items-center gap-4">
            <a href="https://www.linkedin.com/in/jaypalsapara/" target="_blank">
              <i data-lucide="linkedin" class="size-[18px]"></i>
            </a>
            <a href="https://www.instagram.com/_codeboy/" target="_blank">
              <i data-lucide="instagram" class="size-[18px]"></i>
            </a>
            <a href="https://github.com/jaypalsapara/" target="_blank">
              <i data-lucide="github" class="size-[18px]"></i>
            </a>
          </div>
        </footer>
      </main>
    </div>
  </body>
</html>