shivampal-ofc.github.io/index.html at main · ApoloLiv/shivampal-ofc.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
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <!-- =====================================================
       BASIC META
       ===================================================== -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Shivam Pal | Personal Hub</title>

    <!-- =====================================================
       GOOGLE SEO (PRIMARY)
       ===================================================== -->
    <meta
      name="description"
      content="Shivam Pal – Full Stack Developer. Personal hub linking portfolio, GitHub, LinkedIn, and professional contact."
    />
    <meta
      name="keywords"
      content="Shivam Pal, Full Stack Developer, Web Developer, Portfolio, GitHub Pages"
    />
    <meta name="author" content="Shivam Pal" />
    <meta name="robots" content="index, follow" />
    <link rel="canonical" href="https://shivampal-ofc.github.io/" />

    <!-- =====================================================
       OPEN GRAPH (LinkedIn, WhatsApp, Facebook)
       ===================================================== -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Shivam Pal | Personal Hub" />
    <meta
      property="og:description"
      content="Central hub for Shivam Pal's portfolio, projects, and professional links."
    />
    <meta property="og:url" content="https://shivampal-ofc.github.io/" />
    <meta
      property="og:image"
      content="https://shivampal-ofc.github.io/og-image.png"
    />

    <!-- =====================================================
       TWITTER CARD
       ===================================================== -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Shivam Pal | Personal Hub" />
    <meta
      name="twitter:description"
      content="Personal landing page linking portfolio, GitHub, and professional profiles."
    />
    <meta
      name="twitter:image"
      content="https://shivampal-ofc.github.io/og-image.png"
    />

    <!-- =====================================================
       STRUCTURED DATA (GOOGLE UNDERSTANDS THIS)
       ===================================================== -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "Shivam Pal",
        "url": "https://shivampal-ofc.github.io/",
        "email": "mailto:[email protected]",
        "jobTitle": "Full Stack Developer",
        "sameAs": [
          "https://github.com/shivampal-ofc",
          "https://www.linkedin.com/in/shivampal-ofc"
        ]
      }
    </script>

    <link rel="stylesheet" href="style.css" />

    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  </head>

  <body>
    <!-- =====================================================
       THEME TOGGLE
       ===================================================== -->
    <button id="theme-toggle" aria-label="Toggle theme">
      <span class="icon"></span>
    </button>

    <main class="container">
      <!-- PROFILE -->
      <header class="profile-header">
        <img
          src="https://github.com/shivampal-ofc.png"
          alt="Shivam Pal profile photo"
          class="profile-img"
          loading="lazy"
          width="120"
          height="120"
        />

        <h1 class="profile-name">Shivam Pal</h1>

        <p class="profile-bio">
          Full Stack Developer · Open Source Enthusiast ·
          <a href="mailto:[email protected]">
            [email protected]
          </a>
        </p>

        <nav class="social-mini-links" aria-label="Social links">
          <a href="https://github.com/shivampal-ofc" target="_blank">GitHub</a>
          <a href="https://www.linkedin.com/in/shivampal-ofc" target="_blank"
            >LinkedIn</a
          >
          <a href="mailto:[email protected]">Email</a>
        </nav>
      </header>

      <!-- =====================================================
         LINKTREE (COPY ONE BLOCK TO ADD MORE LINKS)
         ===================================================== -->
      <section class="links-list">
        <a
          class="link-card featured"
          href="https://shivampal-ofc.github.io/portfolio/"
          target="_blank"
        >
          <span class="title">Portfolio Website</span>
          <span class="subtitle">Projects, skills, and case studies</span>
        </a>

        <a
          class="link-card"
          href="https://github.com/shivampal-ofc"
          target="_blank"
        >
          <span class="title">GitHub</span>
          <span class="subtitle">Source code and repositories</span>
        </a>

        <a
          class="link-card"
          href="https://www.linkedin.com/in/shivampal-ofc"
          target="_blank"
        >
          <span class="title">LinkedIn</span>
          <span class="subtitle">Professional profile</span>
        </a>
      </section>

      <footer class="footer">
        © Shivam Pal · Built with HTML, CSS & JavaScript
      </footer>
    </main>

    <script src="script.js"></script>
  </body>
</html>