app.component.html

<a href="#content" class="skip-link">Skip to content</a>
<div class="min-h-screen bg-gradient-to-br from-gray-800 to-gray-950 text-slate-300 leading-relaxed antialiased selection:bg-teal-300 selection:text-teal-900">
  <div class="mx-auto max-w-screen-xl px-6 py-12 font-serif md:px-12 md:py-16 lg:px-20 lg:py-0">
    <div class="lg:flex lg:justify-between lg:gap-16">
      <header class="lg:sticky lg:top-0 lg:flex lg:max-h-screen lg:w-5/12 lg:flex-col lg:justify-between lg:overflow-y-auto lg:py-16">
        <div>
          <p class="text-xs font-semibold uppercase tracking-widest text-amber-300">Java · Spring Boot · AWS</p>
          <h1 class="mt-4 text-5xl font-bold tracking-tight text-indigo-100 sm:text-6xl">Adarsh Kumar</h1>
          <p class="mt-4 text-xl text-slate-100">Backend & Full-Stack Software Engineer</p>
          <p class="mt-4 max-w-sm text-base text-slate-400">I build APIs, cloud applications, and tools that help teams work with data.</p>
          <p class="mt-5 inline-block rounded-full border border-amber-300/20 bg-amber-300/5 px-3 py-1 text-xs text-amber-200">AWS Certified Developer – Associate · Jan 2026</p>
          <p class="mt-4 text-sm text-slate-400">Little Rock, AR · Open to relocation</p>

          <nav class="mt-8" aria-label="In-page navigation">
            <ul class="flex flex-wrap gap-x-6 gap-y-1 lg:block">
              @for(item of navigation; track item.id) {
                <li>
                  <a class="nav-link group inline-flex items-center py-2 text-sm font-semibold text-slate-400 hover:text-amber-300 focus-visible:text-amber-300"
                    [class.active]="activeSection() === item.id" [attr.aria-current]="activeSection() === item.id ? 'location' : null" [href]="'#' + item.id">
                    <span class="nav-indicator mr-3 hidden h-px w-5 bg-slate-600 transition-all lg:inline-block" aria-hidden="true"></span>{{item.label}}
                  </a>
                </li>
              }
            </ul>
          </nav>
        </div>

        <div class="mt-8">
          <a href="mailto:adarshghai6@gmail.com" class="inline-flex rounded-lg border border-amber-300/30 bg-amber-300/10 px-5 py-2 text-sm font-semibold text-amber-200 hover:bg-amber-300/20">Get in touch <span class="ml-2" aria-hidden="true">↗</span></a>
          <ul class="mt-5 flex flex-wrap gap-x-6 gap-y-2 text-sm" aria-label="Professional profiles">
            <li><a class="text-slate-300 hover:text-amber-300" href="https://github.com/Adarsh0311" target="_blank" rel="noopener noreferrer">GitHub <span class="sr-only">(opens in a new tab)</span></a></li>
            <li><a class="text-slate-300 hover:text-amber-300" href="https://www.linkedin.com/in/adarsh-kumar03/" target="_blank" rel="noopener noreferrer">LinkedIn <span class="sr-only">(opens in a new tab)</span></a></li>
            <li><a class="text-slate-300 hover:text-amber-300" href="https://leetcode.com/adarshkumar3" target="_blank" rel="noopener noreferrer">LeetCode <span class="sr-only">(opens in a new tab)</span></a></li>
          </ul>
        </div>
      </header>

      <main id="content" class="min-w-0 pt-16 lg:w-7/12 lg:py-16">
        <section #sections id="about" class="mb-20 scroll-mt-8" aria-labelledby="about-heading">
          <h2 id="about-heading" class="section-heading">About</h2>
          <p class="mt-5">I'm a software engineer with experience building enterprise compliance platforms, university applications, and research tools. My core work spans <strong class="font-semibold text-slate-100">Java/Spring Boot, AWS, and full-stack development</strong> with React and Angular.</p>
          <p class="mt-4">At <strong class="font-semibold text-slate-100">COSMOS Research Center at UA Little Rock</strong>, I work on DataVerse, connecting data collection services through a shared interface. Previously, I built integrations and compliance workflows at qordata and Canvas LMS applications at Northwest Missouri State University.</p>
          <p class="mt-4">I focus on useful APIs, secure access to data, and automated delivery. My current research work explores how to discover better search keywords for social-media data collection.</p>
        </section>

        <section #sections id="projects" class="mb-20 scroll-mt-8" aria-labelledby="projects-heading">
          <h2 id="projects-heading" class="section-heading">Selected projects</h2>
          <p class="mt-3 mb-6 text-sm text-slate-400">A selection of personal, university, and professional work.</p>
          <ul class="space-y-6">
            @for(project of projects; track project.title) {
              <li class="rounded-xl border border-slate-700/70 bg-slate-800/40 p-5 sm:p-6">
                <p class="text-xs text-amber-200">{{project.category}}</p>
                <h3 class="mt-2 text-xl font-semibold text-indigo-100">{{project.title}}</h3>
                <p class="mt-3 text-sm">{{project.description}}</p>
                <ul class="mt-4 list-disc space-y-2 pl-5 text-sm marker:text-slate-500">
                  @for(highlight of project.highlights; track highlight) {
                    <li>{{highlight}}</li>
                  }
                </ul>
                <ul class="mt-4 flex flex-wrap gap-2" [attr.aria-label]="project.title + ' technologies'">
                  @for(tag of project.tags; track tag) {
                    <li class="rounded-full bg-blue-400/10 px-3 py-1 text-xs text-blue-200">{{tag}}</li>
                  }
                </ul>
                <div class="mt-5 flex flex-wrap gap-x-5 gap-y-2 text-sm font-semibold">
                  @if(project.sourceUrl) {
                    <a [href]="project.sourceUrl" target="_blank" rel="noopener noreferrer" class="text-amber-200 hover:text-amber-300" [attr.aria-label]="'View source for ' + project.title + ' (opens in a new tab)'">Source <span aria-hidden="true">↗</span></a>
                  }
                  @if(project.architectureUrl) {
                    <a [href]="project.architectureUrl" target="_blank" rel="noopener noreferrer" class="text-amber-200 hover:text-amber-300" [attr.aria-label]="'View architecture for ' + project.title + ' (opens in a new tab)'">Architecture <span aria-hidden="true">↗</span></a>
                  }
                  @if(project.liveUrl) {
                    <a [href]="project.liveUrl" target="_blank" rel="noopener noreferrer" class="text-amber-200 hover:text-amber-300" [attr.aria-label]="'View demo for ' + project.title + ' (opens in a new tab)'">Live demo <span aria-hidden="true">↗</span></a>
                  }
                  @if(project.detailsUrl) {
                    <a [href]="project.detailsUrl" class="text-amber-200 hover:text-amber-300">Research context <span aria-hidden="true">↓</span></a>
                  }
                </div>
              </li>
            }
          </ul>
          <details class="mt-6 rounded-xl border border-slate-700/70 p-5">
            <summary class="cursor-pointer font-semibold text-indigo-100">More projects</summary>
            <ul class="mt-5 space-y-6">
              @for(project of additionalProjects; track project.title) {
                <li>
                  <h3 class="font-semibold text-slate-100"><a [href]="project.sourceUrl" target="_blank" rel="noopener noreferrer" class="hover:text-amber-300">{{project.title}} <span aria-hidden="true">↗</span><span class="sr-only"> source (opens in a new tab)</span></a></h3>
                  <p class="mt-1 text-xs text-slate-400">{{project.category}}</p>
                  <p class="mt-2 text-sm">{{project.description}}</p>
                  <p class="mt-2 text-xs text-blue-200">{{project.tags.join(' · ')}}</p>
                </li>
              }
            </ul>
          </details>
        </section>

        <section #sections id="experience" class="mb-20 scroll-mt-8" aria-labelledby="experience-heading">
          <h2 id="experience-heading" class="section-heading">Experience</h2>
          <ol class="mt-6 space-y-10">
            @for(exp of experiences; track exp.company + exp.role) {
              <li class="border-l border-slate-700 pl-5">
                <p class="text-xs font-semibold tracking-wide text-slate-400">{{exp.period}}</p>
                <h3 class="mt-2 text-base font-semibold text-indigo-100">{{exp.role}}</h3>
                <p class="mt-1 text-sm text-slate-300">
                  @if(exp.companyUrl) {
                    <a [href]="exp.companyUrl" target="_blank" rel="noopener noreferrer" class="hover:text-amber-300">{{exp.company}} <span aria-hidden="true">↗</span><span class="sr-only">(opens in a new tab)</span></a>
                  } @else {
                    {{exp.company}}
                  }
                </p>
                <ul class="mt-3 list-disc space-y-2 pl-4 text-sm marker:text-slate-500">
                  @for(item of exp.description; track item) {
                    <li>{{item}}</li>
                  }
                </ul>
              </li>
            }
          </ol>
        </section>

        <section #sections id="research" class="mb-20 scroll-mt-8" aria-labelledby="research-heading">
          <h2 id="research-heading" class="section-heading">Research</h2>
          <p class="mt-3 text-sm text-slate-400">Current work at the intersection of software engineering, data collection, and NLP.</p>
          <ul class="mt-6 space-y-7">
            @for(item of research; track item.title) {
              <li>
                <h3 class="text-base font-semibold text-indigo-100">{{item.title}}</h3>
                <p class="mt-2 text-sm">{{item.description}}</p>
                <p class="mt-3 text-xs text-blue-200">{{item.methods.join(' · ')}}</p>
              </li>
            }
          </ul>
        </section>

        <section #sections id="skills" class="mb-20 scroll-mt-8" aria-labelledby="skills-heading">
          <h2 id="skills-heading" class="section-heading">Skills</h2>
          <div class="mt-6 grid grid-cols-1 gap-7 sm:grid-cols-2">
            @for(category of skills; track category.category) {
              <div>
                <h3 class="text-base font-semibold text-indigo-100">{{category.category}}</h3>
                <ul class="mt-3 space-y-2 text-sm text-blue-200">
                  @for(skill of category.technologies; track skill) {
                    <li>{{skill}}</li>
                  }
                </ul>
              </div>
            }
          </div>
        </section>

        <section #sections id="education" class="mb-16 scroll-mt-8" aria-labelledby="education-heading">
          <h2 id="education-heading" class="section-heading">Education</h2>
          <ol class="mt-6 space-y-7">
            @for(edu of education; track edu.institution) {
              <li>
                <p class="text-xs tracking-wide text-slate-400">{{edu.period}}</p>
                <h3 class="mt-2 font-semibold text-indigo-100">{{edu.degree}}</h3>
                <a [href]="edu.link" target="_blank" rel="noopener noreferrer" class="mt-1 inline-block text-sm hover:text-amber-300">{{edu.institution}} <span aria-hidden="true">↗</span><span class="sr-only">(opens in a new tab)</span></a>
              </li>
            }
          </ol>
        </section>

        <footer class="border-t border-slate-700/70 pt-6 pb-8 text-xs text-slate-400">
          <p>Built with Angular and Tailwind CSS. Delivered with AWS S3, CloudFront, and CodePipeline.</p>
          <a href="https://github.com/Adarsh0311/Portfolio" target="_blank" rel="noopener noreferrer" class="mt-2 inline-block text-slate-300 hover:text-amber-300">View this site's source <span aria-hidden="true">↗</span><span class="sr-only">(opens in a new tab)</span></a>
        </footer>
      </main>
    </div>
  </div>
</div>