Website Code

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mein Portfolio | Bewerbung Informatiker bei der AXA</title>
  <link rel="stylesheet" href="stylex.css" />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
  <header class="headerStyle">
    <nav class="navigationbar">
      <div class="logo">MeinPortfolio</div>
      <button class="menu-btn" id="menuBtn">☰</button>
      <ul class="nav-links" id="navLinks">
        <li><a href="#about">Über mich</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projekte</a></li>
        <li><a href="#whyme">Warum ich</a></li>
        <li><a href="#contact">Kontakt</a></li>
      </ul>
    </nav>

    <div class="AnfangContent">
      <p class="tag">Bewerbung um eine Informatiker-Lehrstelle bei der AXA</p>
      <h1>Hallo, ich bin <span>Hamid Fani</span>.</h1>
      <p class="AnfangText">
        Ich interessiere mich seit etwa acht Jahren für Computer und seit eineinhalb Jahren für das Programmieren.
        Mit dieser Website zeige ich, wer ich bin und warum ich gut in die Informatik passe.
      </p>
      <div class="AnfangButtons">
        <a href="#contact" class="btn primary">Kontakt</a>
        <a href="#projects" class="btn secondary">Projekte ansehen</a>
      </div>
    </div>
  </header>

  <main>
    <section id="about" class="section">
      <h2>Über mich</h2>
      <div class="card">
        <p>Ich heisse Hamid Fani und wohne in Winterthur. Seit eineinhalb Jahren interessiere ich mich sehr für Informatik, weil ich fasziniert bin, wie man mit Code Probleme lösen und gleichzeitig neue Ideen bringen kann, wie zum Beispiel eigene Apps machen.</p>

        <p>Ich arbeite gerne genau, da ich Fehler vermeiden will, aber ich weiss, dass Fehler ein grosser Teil der Informatik ist, und dass man sehr oft seinen Code überprüfen muss, und ich bin bereit dafür. Bei schwierigeren Problemen bleibe ich geduldig und motiviert, bis ich ein sehr gutes Ergebnis erreicht habe.</p>

        <p>Diese Ausdauer hilft mir, mich zu verbessern und auch mehr über die Programmiersprache zu lernen. Ich bin sehr lernfähig, und kann schnell neue Themen verstehen und bin bereit, mich weiterzuentwickeln. Ich mag es, ständig zu lernen und mein Wissen zu erweitern, egal ob in der Schule oder in meiner Freizeit. Genau deshalb sehe ich die Lehre als Informatiker als eine perfekte Chance, meine Interessen zu vertiefen und praktische Erfahrungen zu sammeln. Ich bin überzeugt, dass ich mit meiner Motivation, meiner zuverlässigen Arbeitsweise und meiner Begeisterung für Informatik gut in der AXA Versicherungen AG passe und einen positiven Beitrag leisten kann.</p>
      </div>
    </section>

    <section id="skills" class="section">
      <h2>Meine Skills</h2>
      <div class="grid">
        <div class="skill-card">
          <h3>HTML</h3>
          <div class="bar"><span style="width: 75%"></span></div>
        </div>
        <div class="skill-card">
          <h3>CSS</h3>
          <div class="bar"><span style="width: 70%"></span></div>
        </div>
        <div class="skill-card">
          <h3>JavaScript</h3>
          <div class="bar"><span style="width: 10%"></span></div>
        </div>
        <div class="skill-card">
          <h3>Teamwork</h3>
          <div class="bar"><span style="width: 95%"></span></div>
        </div>
      </div>
    </section>

    <section id="projects" class="section">
      <h2>Projekte</h2>
      <div class="grid">
        <a href="../ClickCounterGame/indexClicker.html" class="project-link" target="_blank">
          <div class="project-card">
            <h3>Projekt 1</h3>
            <p>Ein einfaches Clicker-Spiel. </p>
          </div>
        </a>

        <a href="../NumberGuessingGame/indexGuess.html" class="project-link" target="_blank">
          <div class="project-card">
            <h3>Projekt 2</h3>
            <p>Ein kleines Projekt, in dem man die Zahl erraten muss!</p>
          </div>
        </a>

        <a href="../Code.html" class="project-link">Show code</a>
          <div class="project-card">
            <h3>Projekt 3</h3>
            <p>Wie ich diese Website für meine Bewerbung gemacht habe.</p>
          </div>
        </a>
      </div>
    </section>

    <section id="whyme" class="section">
      <h2>Warum ich?</h2>
      <div class="card">
        <ul class="checklist">
          <li>Ich bin motiviert und lerne gerne neue Dinge.</li>
          <li>Ich arbeite sorgfältig und bleibe dran, bis etwas funktioniert.</li>
          <li>Ich interessiere mich seit acht Jahren für Computer und Technik.</li>
          <li>Ich möchte mich in einem Team weiterentwickeln und Verantwortung übernehmen.</li>
        </ul>
      </div>
    </section>

    <section id="contact" class="section">
      <h2>Kontakt</h2>
      <div class="card contact-card">
        <p><strong>Name:</strong> Hamid Fani</p>
        <p><strong>E-Mail:</strong> hamid.fani@winschulen.ch</p>
        <p><strong>Ort:</strong> Winterthur, Schweiz</p>
        <button id="copyEmail" class="btn primary">E-Mail kopieren</button>
        <p id="copyMsg"></p>
      </div>
    </section>
  </main>

  <footer>
    <p>2026 Hamid Fani — Bewerbung als Informatiker bei der AXA Versicherungen AG <br> <br> Auf eine Vorstellungsgespräch würde ich mich sehr freuen!</p>
  </footer>

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

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #f5f7fb;
  color: #0f172a;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

.headerStyle {
  min-height: 100vh;
  padding: 20px 6%;
  background: linear-gradient(180deg, #ffffff, #f5f7fb);
}

.navigationbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 30px;
}

.logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: #00008f;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.nav-links a:hover {
  color: #ff1721;
}

.menu-btn {
  display: none;
  background: transparent;
  color: #00008f;
  font-size: 1.8rem;
  border: none;
  cursor: pointer;
}

.AnfangContent {
  max-width: 800px;
  margin-top: 90px;
}

.tag {
  color: #ff1721;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  margin-bottom: 16px;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.05;
  margin-bottom: 20px;
  color: #00008f;
}

h1 span {
  color: #ff1721;
}

.AnfangText {
  max-width: 680px;
  font-size: 1.1rem;
  color: #475569;
}

.AnfangButtons {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  transition: 0.3s;
  border: 2px solid transparent;
}

.primary {
  background: #ff1721;
  color: white;
}

.primary:hover {
  transform: translateY(-2px);
  background: #d8141d;
}

.secondary {
  border-color: rgba(0, 0, 143, 0.2);
  background: white;
  color: #00008f;
}

.secondary:hover {
  border-color: #ff1721;
  color: #ff1721;
}

.section {
  padding: 80px 6%;
  max-width: 1200px;
  margin: 0 auto;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 24px;
  color: #00008f;
}

.card,
.skill-card,
.project-card,
.contact-card {
  background: white;
  border: 1px solid rgba(0, 0, 143, 0.12);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.skill-card h3,
.project-card h3 {
  margin-bottom: 14px;
  color: #00008f;
}

.bar {
  height: 12px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #00008f, #ff1721);
  border-radius: 999px;
}

.checklist {
  padding-left: 20px;
}

.checklist li {
  margin-bottom: 12px;
}

.contact-card p {
  margin-bottom: 10px;
}

#copyMsg {
  margin-top: 12px;
  color: #16a34a;
  font-weight: 600;
}

footer {
  text-align: center;
  padding: 30px 20px;
  color: #475569;
  border-top: 1px solid rgba(0, 0, 143, 0.12);
  background: white;
}

@media (max-width: 768px) {
  .menu-btn {
    display: block;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 80px;
    right: 6%;
    flex-direction: column;
    background: white;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 143, 0.15);
  }

  .nav-links.active {
    display: flex;
  }
}

.card {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px;
  background: white;
  border: 1px solid rgba(0, 0, 143, 0.12);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.card p {
  font-size: 1rem;
  line-height: 1.9;
  color: #334155;
}

.project-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.project-link:hover .project-card {
  transform: translateY(-4px);
  border-color: #ff1721;
}

.project-card {
  transition: 0.3s;
  cursor: pointer;
}

JavaScript

const menuBtn = document.getElementById("menuBtn");
const navLinks = document.getElementById("navLinks");
const copyEmailBtn = document.getElementById("copyEmail");
const copyMsg = document.getElementById("copyMsg");

menuBtn.addEventListener("click", () => {
  navLinks.classList.toggle("active");
});

copyEmailBtn.addEventListener("click", async () => {
  const email = "hamid.fani@winschulen.ch";
  await navigator.clipboard.writeText(email);
  copyMsg.textContent = "E-Mail wurde kopiert! Danke vielmals!";
});

document.querySelectorAll(".nav-links a").forEach(link => {
  link.addEventListener("click", () => {
    navLinks.classList.remove("active");
  });
});

const originalTitle = document.title;

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    document.title = "We miss you";
  } else {
    document.title = originalTitle;
  }
});

Wie ich dieses Projekt gelernt habe

HTML

CSS

JavaScript