portfolio/index.html at main · techbire/portfolio · 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ansh Gupta - Portfolio</title>
  <link rel="preload" as="image" href="assets/images/background.jpg" />
  <!-- Primary SEO Meta Tags -->
  <meta name="title" content="Ansh Gupta - Software Developer Portfolio" />
  <meta name="description" content="Ansh Gupta – B.Tech CSE student, full-stack & AI-driven app developer. Top 1% Headstarter Fellow. Open-source contributor (GirlScript Summer of Code). Projects in React, Next.js, TypeScript, Python, and more." />
  <meta name="keywords" content="Ansh Gupta, techbire, Ansh Gupta Ballia, Ansh Gupta LPU, ansh gupta techbire, software developer, full stack developer, React, Next.js, TypeScript, Python, C++, portfolio, open source, Headstarter, GirlScript Summer of Code" />
  <meta name="author" content="Ansh Gupta" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://techbire.github.io/" />
  <meta name="theme-color" content="#0e0e0e" />

  <!-- Favicon & Icons -->
  <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
  <link rel="icon" type="image/png" href="assets/ss.png" sizes="512x512" />
  <link rel="apple-touch-icon" href="assets/ss.png" />

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://techbire.github.io/" />
  <meta property="og:title" content="Ansh Gupta - Software Developer Portfolio" />
  <meta property="og:description" content="Full-stack & AI-focused developer | Top 1% Headstarter Fellow | Open Source Contributor | Building performant, user-focused products." />
  <meta property="og:image" content="assets/ss.png" />

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://techbire.github.io/" />
  <meta property="twitter:title" content="Ansh Gupta - Software Developer Portfolio" />
  <meta property="twitter:description" content="Full-stack & AI-focused developer | Top 1% Headstarter Fellow | Open Source Contributor." />
  <meta property="twitter:image" content="assets/ss.png" />

  <!-- Structured Data (JSON-LD) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Ansh Gupta",
  "alternateName": ["techbire","Ansh Gupta Ballia","Ansh Gupta LPU","ansh gupta techbire"],
    "url": "https://techbire.github.io/",
    "image": "https://techbire.github.io/assets/ss.png",
    "jobTitle": "Software Developer",
    "description": "Full-stack & AI-focused developer. Top 1% Headstarter Fellow. Open source contributor (GirlScript Summer of Code). Projects in React, Next.js, TypeScript, Python, C++.",
    "alumniOf": { "@type": "CollegeOrUniversity", "name": "Lovely Professional University" },
    "sameAs": [
      "https://github.com/techbire",
      "https://www.linkedin.com/in/techbire/",
      "https://x.com/techbire",
      "https://www.techbire.blogspot.com"
    ]
  }
  </script>
  <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=DM+Sans:wght@400;500;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <!-- Font Awesome Icons (no SRI to avoid hash mismatch when opened via file://) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header id="hero" class="hero-section zoom-125">
  <img src="assets/images/background.jpg" alt="Abstract geometric background" class="hero-bg" />
    <div class="resume-btn-wrapper">
  <a href="https://drive.google.com/file/d/16pLPF77arjCOxc8ab0LYKDV2L10G5kv7/view" target="_blank" rel="noopener" class="resume-btn"> <span class="icon">⬇</span> View Resume</a>
    </div>
    <div class="floating-images">
  <img src="assets/images/emojistar.png" alt="Decorative star illustration" class="float star" loading="lazy" />
  <img src="assets/images/pyramid.png" alt="Decorative pyramid graphic" class="float pyramid" loading="lazy" />
  <img src="assets/images/cube-helix.png" alt="Decorative helix graphic" class="float helix" loading="lazy" />
    </div>
    <div class="grid-beam"></div>
  <div class="hero-content">
      <h1 class="title">Ansh Gupta</h1>
      <div class="morphing-text" id="morphing-text">
        <span class="text1"></span>
        <span class="text2"></span>
        <svg id="filters" class="hidden" preserveAspectRatio="xMidYMid slice">
          <defs>
            <filter id="threshold">
              <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 255 -140" />
            </filter>
          </defs>
        </svg>
      </div>
      <div class="socials">
  <a href="https://github.com/techbire" target="_blank" aria-label="GitHub"><i class="fab fa-github" aria-hidden="true"></i><span class="sr-only">GitHub</span></a>
  <a href="https://www.linkedin.com/in/techbire/" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin-in" aria-hidden="true"></i><span class="sr-only">LinkedIn</span></a>
  <a href="mailto:anshtechnical@gmail.com" target="_blank" aria-label="Email"><i class="fas fa-envelope" aria-hidden="true"></i><span class="sr-only">Email</span></a>
      </div>
    </div>
    <a href="#about" class="scroll-down" aria-label="Scroll Down">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" class="bg-neutral-800 rounded-full animate-bounce w-8 h-8 p-2" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
      </svg>
    </a>
  </header>

  <nav class="liquid-nav">
    <button class="nav-toggle" aria-label="Menu" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>
    <div class="nav-container">
      <a href="#hero" class="nav-item">Home</a>
      <a href="#experience" class="nav-item">Experience</a>
      <a href="#projects" class="nav-item">Projects</a>
      <a href="#certifications" class="nav-item">Certifications</a>
      <a href="#publications" class="nav-item">Research</a>
      <a href="#hackathons" class="nav-item">Hackathons</a>
      <a href="#contact" class="nav-item">Contact</a>
      <div class="nav-indicator"></div>
    </div>
  </nav>

  <main>
    <section id="about" class="section about">
      <div class="wobble-card" data-wobble>
        <div class="noise"></div>
        <h2>About Me</h2>
        <p>
          From a young age, I’ve been captivated by technology—curiosity that began in childhood when I started exploring how things work and eventually led me to create my own tech blog, <b>TechBire</b>, in 2017. What started as a hobby quickly grew into a monetized platform with <b>123+ posts</b>, Google AdSense approval, and a thriving reader base. This early passion shaped my journey into computer science and innovation.
          <br><br>
          I am currently Pre-Final Year <b>B.Tech in Computer Science at Lovely Professional University</b>, maintaining a <b>7.7 CGPA</b>. I've developed and shipped full-stack platforms such as <b>FlavorShare</b>, <b>AI Flashcard Wizard SaaS</b>, and <b>Personal Library Tracker</b>, and gained industry experience during my internship at <b>Valnee Solutions LLP</b>, working on live SaaS products like <b>SignalMint</b>, <b>GhostWriter AI</b>, and <b>Valnee.com</b> contributing to features across AI pipelines, RAG systems, carousel generators, billing workflows, dynamic UI/UX, and LinkedIn publishing integrations.
          <br><br>
          Beyond academics, I’ve achieved milestones such as securing a <b>Top 1% rank in the Headstarter Software Engineering Fellowship</b>, building <b>10K+ professional connections on LinkedIn</b>, and producing tech content for <b>Dailyhunt</b>, attracting <b>7,000+ followers</b> in under four months. My participation in events like <b>The Arcade by Google Cloud</b> and <b>Flipkart GRiD 6.0</b> reflects my active engagement in the tech community.
        </p>
      </div>
    </section>

    <section id="skills" class="section skills">
      <div class="skills-container">
        <h2>Skills</h2>
        <div class="skill-badges" id="skill-badges"></div>
      </div>
    </section>

    <section id="experience" class="section experience">
      <h2>Experience</h2>
      <div class="experience-items" id="experience-list"></div>
    </section>

    <section id="projects" class="section projects">
      <h2>Projects</h2>
      <div class="projects-grid" id="projects-grid"></div>
    </section>

    <section id="certifications" class="section certifications">
      <h2>Certifications</h2>
      <div class="certifications-list" id="certifications-list"></div>
    </section>

    <section id="publications" class="section publications">
      <h2>Publications</h2>
      <div class="publications-list" id="publications-list"></div>
    </section>

    <section id="hackathons" class="section hackathons">
      <h2>Hackathons & Contributions</h2>
      <div class="hackathons-list" id="hackathons-list"></div>
    </section>
  </main>

  <footer class="footer" id="contact">
    <div class="footer-inner">
      <h3><span class="link-icon">🔗</span> Connect with me</h3>
      <ul class="social-links" id="footer-links"></ul>
    </div>
  </footer>

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