index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Ilham Ifham</title>
    <meta
      name="description"
      content="Meta certified front-end developer with hands-on experience building responsive, accessible, scalable and seo optimized web applications."
    />
  </head>

  <body>
    <main>
      <section class="page">
        <div>
          <h1>Ilham Ifham</h1>
          <div>
            <a href="https://www.linkedin.com/in/ilhamifham" target="_blank"
              >LinkedIn</a
            >
            <a href="https://www.github.com/ilhamifham" target="_blank"
              >GitHub</a
            >
          </div>
        </div>
        <section class="about card">
          <h2>About</h2>
          <p>
            Meta certified front-end developer with hands-on experience building
            responsive, accessible, scalable and seo optimized web applications.
          </p>
        </section>
        <section class="skills card">
          <h2>Skills</h2>
          <article>
            <h3>Industry Knowledge</h3>
            <ul>
              <li>Accessibility</li>
              <li>SEO</li>
              <li>Responsive Web Applications</li>
              <li>Scalable Web Applications</li>
              <li>Front-End Development</li>
              <li>Back-End Development</li>
              <li>Full-Stack Development</li>
            </ul>
          </article>
          <article>
            <h3>Tools & Technologies</h3>
            <ul>
              <li class="">Figma</li>
              <li class="html">HTML</li>
              <li class="css">CSS</li>
              <li class="sass">SASS</li>
              <li class="tailwindcss">Tailwind CSS</li>
              <li class="javascript">JavaScript</li>
              <li class="typescript">TypeScript</li>
              <li class="react">React</li>
              <li class="nextjs">Next.js</li>
              <li class="">React Router</li>
              <li class="">React Hook Form</li>
              <li class="">Zustand</li>
              <li class="">Axios</li>
              <li class="">REST API</li>
              <li class="">Prismic</li>
              <li class="nodejs">Node.js</li>
              <li class="">Bun</li>
              <li class="expressjs">Express.js</li>
              <li class="">Hono</li>
              <li class="">SQL</li>
              <li class="">SQLite</li>
              <li class="mysql">MySQL</li>
              <li class="">Prisma</li>
              <li class="">Supabase</li>
              <li class="git">Git</li>
              <li class="github">GitHub</li>
              <li class="github">Bitbucket</li>
              <li class="parceljs">Parcel.js</li>
              <li class="vite">Vite</li>
              <li class="netlify">Netlify</li>
              <li class="">Vercel</li>
              <li class="">Python</li>
              <li class="">Shopify</li>
            </ul>
          </article>
        </section>
        <section class="experience card">
          <h2>Experience</h2>
          <article>
            <h3>Front-End Developer</h3>
            <div>
              <a href="https://atdigital.io/" target="_blank" class="bold"
                >AT Digital</a
              >
              - Internship
            </div>
            <div>August 2025 - Present</div>
            <address>Sydney, New South Wales, Australia • Hybrid</address>
            <!-- <ul>
              <li>Rebuilt Wix based web app with significantly improving SEO and lighthouse performance scores.</li>
              <li>Ensured mobile-first, fully responsive design with a focus on accessibility across devices.</li>
              <li>Improved load time by using server-side rendering, reducing load time and boosting overall performance.</li>
            </ul> -->
          </article>
          <article>
            <h3>Web Developer</h3>
            <div>
              <a href="https://www.jadetimes.com" target="_blank" class="bold"
                >Jadetimes Media</a
              >
              - Internship
            </div>
            <div>August 2024 - March 2025 • 8 months</div>
            <address>Albuquerque, New Mexico, United States • Remote</address>
            <ul>
              <li>
                Rebuilt a Wix-based web app with React, Next.js, and Vercel,
                achieving major improvements in SEO and Lighthouse performance
                scores.
              </li>
              <li>
                Designed and delivered a mobile-first, responsive, and
                accessible UI using HTML, CSS, Tailwind CSS, ensuring seamless
                cross-device experiences.
              </li>
              <li>
                Boosted performance by implementing server-side rendering,
                reducing load times and enhancing overall user experience.
              </li>
            </ul>
          </article>
        </section>
        <section class="projects card">
          <h2>Personal projects</h2>
          <!-- <article>
            <h3>Jadetimes</h3>
            <ul>
              <li class="html">HTML</li>
              <li class="css">CSS</li>
              <li class="tailwindcss">Tailwind CSS</li>
              <li class="javascript">JavaScript</li>
              <li class="typescript">TypeScript</li>
              <li class="react">React</li>
              <li class="nextjs">Next.js</li>
            </ul>
            <ul>
              <li>
                Built a responsive news blog web app with an admin dashboard for
                content creation and publishing.
              </li>
              <li>
                Integrated the YouTube API to dynamically display shorts and the
                top 10 playlists.
              </li>
              <li>
                Used TipTap rich text editor to enable rich-format content
                creation within the dashboard.
              </li>
            </ul>
            <a
              href="https://jadetimes.vercel.app"
              target="_blank"
              class="button"
              >View</a
            >
          </article> -->
          <article>
            <h3>The Lucky Lemon</h3>
            <ul>
              <li class="html">HTML</li>
              <li class="css">CSS</li>
              <li class="javascript">JavaScript</li>
              <li class="react">React</li>
              <li class="vite">Vite</li>
              <li class="netlify">Netlify</li>
            </ul>
            <ul>
              <li>
                Built a responsive restaurant web app add to cart functionality
                and table reservation form.
              </li>
              <li>
                Used localStorage as persist cart items when user visits again.
              </li>
              <li>Added validation for table reservation form.</li>
            </ul>
            <a
              href="https://luckylemon.netlify.app"
              target="_blank"
              class="button"
              >View</a
            >
          </article>
          <article>
            <h3>MacBook Air Clone</h3>
            <ul>
              <li class="html">HTML</li>
              <li class="sass">SASS</li>
              <li class="javascript">JavaScript</li>
              <li class="parceljs">Parcel.js</li>
              <li class="netlify">Netlify</li>
            </ul>
            <ul>
              <li>
                Built a responsive Apple Macbook Air website replicating it's
                design and interactive user experience.
              </li>
              <li>
                Implemented interactive sliders and MacBook color selection
                options to enhance user engagement.
              </li>
              <li>Utilized build tool for optimization.</li>
            </ul>
            <a
              href="https://macbookairclone.netlify.app"
              target="_blank"
              class="button"
              >View</a
            >
          </article>
          <article>
            <h3>Shokunami</h3>
            <ul>
              <li class="html">HTML</li>
              <li class="css">CSS</li>
              <li class="parceljs">Parcel.js</li>
              <li class="netlify">Netlify</li>
            </ul>
            <ul>
              <li>
                Built a responsive restaurant menu website with menu items and
                their prices.
              </li>
              <li>Added interactive collapsible navigation menu for mobile.</li>
              <li>Utilized build tool for optimization.</li>
            </ul>
            <a
              href="https://shokunami.netlify.app"
              target="_blank"
              class="button"
              >View</a
            >
          </article>
        </section>
        <section class="education card">
          <h2>Education</h2>
          <article>
            <h3>
              <a href="https://pll.harvard.edu">Harvard University</a>
            </h3>
            <div class="bold">CS50 Introduction to Computer Science</div>
            <div>January 2025 - December 2025</div>
            <ul>
              <li>Scratch</li>
              <li>C</li>
              <li>Arrays</li>
              <li>Algorithms</li>
              <li>Memory</li>
              <li>Data Structures</li>
              <li>Python</li>
              <li>SQL</li>
              <li>HTML</li>
              <li>CSS</li>
              <li>JavaScript</li>
              <li>Flask</li>
            </ul>
          </article>
          <article>
            <h3>
              <a href="https://www.coursera.org">Coursera</a>
            </h3>
            <div class="bold">
              Meta Front-End Developer Professional Certificate
            </div>
            <div>January 2024 - June 2024</div>
            <ul>
              <li>Introduction to Frontend Development</li>
              <li>Principles of UI/UX Design</li>
              <li>Programming with JavaScript</li>
              <li>Version Control</li>
              <li>HTML and CSS in depth</li>
              <li>React Basics</li>
              <li>Advanced React</li>
              <li>Front-End Developer Capstone</li>
              <li>Coding Interview Preparation</li>
            </ul>
          </article>
        </section>
        <section class="certificates card">
          <h2>Licenses & certifications</h2>
          <article>
            <h3>Front-End Developer Professional Certificate</h3>
            <a href="https://www.meta.com" class="bold">Meta</a>
            <div>Issued June 2024</div>
            <div>Credential ID 5NUV5BW7GCGP</div>
            <a
              href="https://www.coursera.org/account/accomplishments/professional-cert/5NUV5BW7GCGP"
              target="_blank"
              class="button"
              >Show Credential</a
            >
          </article>
        </section>
      </section>
    </main>
  </body>
</html>