index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Hareram Ray — Resume</title>
<style>
  :root{
    --accent:#2E86AB;
    --muted:#6c757d;
    --bg:#ffffff;
    --text:#222831;
    --card:#f7fbfd;
    --left-width:32%;
  }
  html,body{height:100%;margin:0;padding:0;font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color:var(--text);background:var(--bg);}
  .container{max-width:1000px;margin:28px auto;padding:26px;background:#fff;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.06);}
  .row{display:flex;gap:24px;}
  .left{width:var(--left-width);padding:18px;background:var(--card);border-radius:8px;}
  .right{flex:1;padding:18px;}
  h1{margin:0;font-size:22px;color:var(--accent);}
  h2{margin:0;font-size:14px;color:#0b2545;margin-top:6px;}
  .role{color:var(--muted);margin-bottom:12px;}
  .contact a{color:var(--accent);text-decoration:none;}
  .section{margin-top:16px;}
  .section h3{font-size:13px;margin-bottom:8px;color:#0b2545;border-bottom:1px dashed #e0e6ea;padding-bottom:6px;}
  ul{margin:0;padding-left:16px;}
  li{margin-bottom:6px;font-size:12.5px;line-height:1.35;}
  .skill-chip{display:inline-block;background:#fff;border:1px solid #e3eef8;color:#123; padding:6px 8px;border-radius:6px;margin:4px 6px 4px 0;font-size:12px;}
  .metric{font-weight:700;color:var(--accent);}
  .projects p,.experience p{margin:6px 0;font-size:13px;}
  .small{font-size:12px;color:var(--muted);}
  .left .section{margin-top:20px;}
  /* print-friendly adjustments */
  @media print{
    .container{box-shadow:none;margin:0;border-radius:0;}
    .left{background:#f6f9fb;}
    a:after{content:" (" attr(href) ")";font-size:10px;color:var(--muted);}
  }
</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <!-- LEFT COLUMN -->
      <aside class="left" aria-label="contact and skills">
        <div style="text-align:center;">
          <h1>Hareram Ray</h1>
          <div class="role">Software Engineer</div>
        </div>

        <div class="section contact">
          <h3>Contact</h3>
          <p class="small">✉️ <a href="mailto:hareramray325@gmail.com">hareramray325@gmail.com</a></p>
          <p class="small">🔗 <a href="https://www.linkedin.com/in/errors-overflow/" target="_blank">linkedin.com/in/errors-overflow</a></p>
          <p class="small">🎥 <a href="https://www.youtube.com/@Errorsoverflow/" target="_blank">youtube.com/@Errorsoverflow</a></p>
        </div>

        <div class="section">
          <h3>Primary Skills</h3>
          <div>
            <span class="skill-chip">Java</span>
            <span class="skill-chip">Spring Boot</span>
            <span class="skill-chip">Angular</span>
            <span class="skill-chip">Vue.js</span>
            <span class="skill-chip">React</span>
            <span class="skill-chip">JavaScript</span>
            <span class="skill-chip">TDD</span>
            <span class="skill-chip">Playwright</span>
            <span class="skill-chip">CI/CD</span>
            <span class="skill-chip">AWS</span>
            <span class="skill-chip">Splunk</span>
            <span class="skill-chip">GitHub Copilot</span>
          </div>
        </div>

        <div class="section">
          <h3>Certifications</h3>
          <ul>
            <li>Best Employee of the Month</li>
            <li>Udemy — Java Masterclass</li>
          </ul>
        </div>

        <div class="section">
          <h3>Education</h3>
          <ul>
            <li><b>B.Tech (CSE)</b> — Academy of Technology, Hooghly (2017–2021)</li>
            <li>Higher Secondary (XII) — Shree Jain Vidyalaya</li>
          </ul>
        </div>

        <div class="section">
          <h3>Languages</h3>
          <ul>
            <li>English — Full Professional Proficiency</li>
            <li>Hindi — Full Professional Proficiency</li>
          </ul>
        </div>
      </aside>

      <!-- RIGHT COLUMN -->
      <main class="right" aria-label="experience and projects">
        <div>
          <div class="section">
            <h3>Profile Summary</h3>
            <p class="small">An innovative and task-driven <strong>Software Engineer</strong> with <span class="metric">3 years and 10 months</span> of experience in developing Web Applications, Chrome Extensions, and Backend APIs. Skilled across Java, Spring Boot, Angular, Vue.js, React and TDD in Agile teams. Experienced in bug-fixing, log monitoring (Splunk/PCF), CI/CD pipelines, and mentoring team members.</p>
          </div>

          <div class="section experience">
            <h3>Work Experience</h3>

            <p><strong>Software Engineer — Clarivate</strong> <span class="small">Mar 2024 – Present</span></p>
            <ul>
              <li>Working on Vue.js applications: features, enhancements and bug-fixes.</li>
              <li>Wrote automated tests and TDD flows using <strong>Playwright</strong>.</li>
              <li>Collaborated in Agile teams (Jira) and improved application UX/performance.</li>
            </ul>

            <p style="margin-top:10px;"><strong>Software Engineer — Ford Motor Company</strong> <span class="small">Oct 2021 – Jul 2023</span></p>
            <ul>
              <li>Developed UI & backend using <strong>Java, Spring Boot, Angular</strong>.</li>
              <li>Designed REST APIs (Swagger, 42Crunch); built webhooks, bots and services in Java 11 & Spring Boot 6.</li>
              <li>Integrated CI/CD, code coverage (Jacoco), SonarQube and monitored logs with Splunk/PCF.</li>
              <li>Implemented multithreading (ExecutorService) for backend batch tasks.</li>
            </ul>
          </div>

          <div class="section projects">
            <h3>Selected Projects</h3>

            <p><strong>Satellite Chrome Extension</strong></p>
            <p class="small">Chrome extension for taking snapshots and saving to server. Built with HTML, CSS, JavaScript and Chrome APIs.</p>

            <p><strong>Trademark & Design Vision</strong></p>
            <p class="small">Image/text-based trademark & design search (Frontend: Vue2/Vue3, Backend: Django).</p>

            <p><strong>Bot Analytics</strong></p>
            <p class="small">Application to monitor usage of various bots/apps — Angular front-end (Chart.js), Spring Boot backend, Splunk integration for log analytics and dashboards.</p>

            <p><strong>Message Export</strong></p>
            <p class="small">Exports messages from spaces as HTML & DOC — Angular + Spring Boot service.</p>

            <p><strong>Space Analytics Portal</strong></p>
            <p class="small">Dashboards, space-property tables and third-party API integrations via RestTemplate.</p>

            <p><strong>BulkBot Enhancement</strong></p>
            <p class="small">Backend service for adding/removing many users at once; optimized using ExecutorService and REST calls.</p>
          </div>

          <div class="section">
            <h3>Core Strengths</h3>
            <ul>
              <li>Test-Driven Development & automation (Playwright)</li>
              <li>API design and integration, REST & webhooks</li>
              <li>CI/CD deployments and monitoring (Splunk, PCF)</li>
              <li>Mentoring, code reviews, and Agile collaboration</li>
            </ul>
          </div>

          <div class="section">
            <h3>Availability</h3>
            <p class="small">Open to new roles — immediately available for interviews. (Total experience: <strong>3y 5m</strong>)</p>
          </div>
        </div>
      </main>
    </div>
  </div>
</body>
</html>