index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Mathias Alsos Paulsen - Developer Portfolio & CV">
  <title>Mathias Alsos Paulsen | Developer Portfolio</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/x-icon" href="images/appstore.png">
</head>
<body>
  <!-- NAVIGATION -->
  <nav class="nav" role="navigation" aria-label="Main navigation">
    <div class="nav-container">
      <a href="#hero" class="nav-brand" aria-label="Home">M.A.P</a>

      <button class="mobile-toggle" aria-label="Toggle menu" aria-expanded="false">
        ☰
      </button>

      <ul class="nav-links">
        <li><a href="#about" class="nav-link">About</a></li>
        <li><a href="#projects" class="nav-link">Projects</a></li>
        <li><a href="#skills" class="nav-link">Skills</a></li>
        <li><a href="#experience" class="nav-link">Experience</a></li>
        <li><a href="#education" class="nav-link">Education</a></li>
        <li><a href="#contact" class="nav-link">Contact</a></li>
        <li>
          <button class="theme-toggle" aria-label="Toggle dark mode"></button>
        </li>
      </ul>
    </div>
  </nav>

  <!-- HERO SECTION -->
  <section id="hero">
    <div class="container">
      <h1 class="hero-title">Mathias Alsos Paulsen</h1>
      <p class="hero-subtitle">Developer & Problem Solver</p>
      <div class="hero-buttons">
        <a href="#projects" class="btn btn-primary">View My Work</a>
        <a href="cv/Mathias_Alsos_Paulsen_CV.pdf" download class="btn btn-secondary">Download CV</a>
      </div>
    </div>
  </section>

  <!-- ABOUT SECTION -->
  <section id="about">
    <div class="container">
      <h2 class="section-title">About</h2>
      <div class="about-content">
        <p class="about-text">
          Hi! My name is Mathias Alsos Paulsen, a 22-year-old developer based in Fredrikstad, Norway.
          I'm a motivated and curious individual with a strong passion for technology and programming.
          I hold a Bachelor's degree in IT and Information Systems from Kristiania University College,
          and have experience working with various programming languages and technologies.
        </p>
        <p class="about-text">
          Feel free to get in touch if you'd like to know more about me!
        </p>
      </div>
    </div>
  </section>

  <!-- PROJECTS SECTION -->
  <section id="projects">
    <div class="container">
      <h2 class="section-title">Projects</h2>
      <p class="section-subtitle">Selected work and contributions</p>

      <div class="projects-grid">
        <div class="project-card card">
          <img src="images/Drag&DropTaskListApp.png" alt="Screenshot of Drag & Drop Task List App" class="project-image1">
          <h3 class="project-title">Drag & Drop Task List App</h3>
          <p class="project-description">
            A modern task management application with intuitive drag-and-drop functionality, Google OAuth authentication, and dark mode. Features per-user data isolation and seamless sync across devices.
          </p>
          <div class="project-tags">
            <span class="tag">React 18</span>
            <span class="tag">Node.js</span>
            <span class="tag">Tailwind CSS</span>
            <span class="tag">Google OAuth</span>
            <span class="tag">Vite</span>
          </div>
          <div class="project-links">
            <a href="https://github.com/AlsosCode/Drag-Drop-Task-List-App" target="_blank" rel="noopener noreferrer" class="project-link">GitHub</a>
            <a href="https://drag-drop-task-list-app.vercel.app" target="_blank" rel="noopener noreferrer" class="project-link">Live Demo</a>
          </div>
        </div>

        <!-- Add more project cards as needed -->
        <div class="project-card card">
          <img src="images/PKMN-Binder.png" alt="Screenshot of Pokemon Binder App" class="project-image2">
          <h3 class="project-title">Pokemon Binder - Digital TCG Collection Manager</h3>
          <p class="project-description">
            A microservices-based Pokemon TCG collection manager demonstrating event-driven architecture, service discovery, and API Gateway patterns. Features separate services for catalog management, user collections, and media serving with asynchronous communication via RabbitMQ.
          </p>
          <div class="project-tags">
            <span class="tag">Spring Boot</span>
            <span class="tag">Docker</span>
            <span class="tag">RabbitMQ</span>
            <span class="tag">PostgreSQL</span>
            <span class="tag">Consul</span>
            <span class="tag">Python Flask</span>
          </div>
          <div class="project-links">
            <a href="https://github.com/AlsosCode/PKMN-microservice-exam" target="_blank" rel="noopener noreferrer" class="project-link">GitHub</a>
            <a href="https://pg3402-microservices-exam.vercel.app/" target="_blank" rel="noopener noreferrer" class="project-link">Live Demo</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- SKILLS SECTION -->
  <section id="skills">
    <div class="container">
      <h2 class="section-title">Skills</h2>
      <p class="section-subtitle">Technologies and tools I work with</p>

      <div class="skills-grid">
        <div class="skill-category">
          <h3 class="skill-category-title">Languages</h3>
          <div class="skill-tags">
            <span class="skill-tag">JavaScript</span>
            <span class="skill-tag">Python</span>
            <span class="skill-tag">Java</span>
            <span class="skill-tag">HTML/CSS</span>
          </div>
        </div>

        <div class="skill-category">
          <h3 class="skill-category-title">Frameworks & Libraries</h3>
          <div class="skill-tags">
            <span class="skill-tag">React</span>
            <span class="skill-tag">Node.js</span>
            <span class="skill-tag">Express</span>
          </div>
        </div>

        <div class="skill-category">
          <h3 class="skill-category-title">Tools & Platforms</h3>
          <div class="skill-tags">
            <span class="skill-tag">Git</span>
            <span class="skill-tag">GitHub</span>
            <span class="skill-tag">VS Code</span>
            <span class="skill-tag">Docker</span>
          </div>
        </div>

        <div class="skill-category">
          <h3 class="skill-category-title">Other</h3>
          <div class="skill-tags">
            <span class="skill-tag">REST APIs</span>
            <span class="skill-tag">SQL</span>
            <span class="skill-tag">Responsive Design</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- EXPERIENCE SECTION -->
  <section id="experience">
    <div class="container">
      <h2 class="section-title">Experience</h2>
      <p class="section-subtitle">Professional journey</p>
<!--
      <div class="timeline">
        <div class="timeline-item card">
          <div class="timeline-header">
            <h3 class="timeline-title">Your Job Title</h3>
            <span class="timeline-date">2023 - Present</span>
          
          </div>
          <p class="timeline-company">Company Name</p>
          <p class="timeline-description">
            Description of your role, responsibilities, and achievements. Replace this with your actual work experience.
          </p>
        </div>
              -->
        <div class="timeline-item card">
          <div class="timeline-header">
            <h3 class="timeline-title">Store Assistant</h3>
            <span class="timeline-date">2021 - 2026</span>
          </div>
          <p class="timeline-company">Rema 1000 Stadion</p>
          <p class="timeline-description">
            As a store assistant, I have taken on a variety of responsibilities in customer service, 
            inventory management, and daily operations. My duties include operating the checkout, 
            restocking and ordering products, and managing the frozen, refrigerated, and produce departments. 
            I have also been trusted with store closing responsibilities, 
            contributed to reorganizing the store layout for improved efficiency, and trained new colleagues. 
            Additionally, I have provided support to other Rema 1000 stores when extra staff was needed.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- EDUCATION SECTION -->
  <section id="education">
    <div class="container">
      <h2 class="section-title">Education</h2>
      <p class="section-subtitle">Academic background</p>

      <div class="education-grid">
        <div class="education-card card">
          <h3 class="education-degree">Bachelor's Degree in IT and Information Systems</h3>
          <p class="education-school">Kristiania University College</p>
          <p class="education-date">Graduate June 2026</p>
          <p class="education-description">
            Studied various aspects of IT including software development, systems design, and information management.
          </p>
        </div>

        <!-- Add more education entries if needed -->
      </div>
    </div>
  </section>

  <!-- CONTACT SECTION -->
  <section id="contact">
    <div class="container">
      <h2 class="section-title">Contact</h2>
      <p class="section-subtitle">Let's connect</p>

      <div class="contact-content">
        <form class="contact-form" id="contactForm">
          <div class="form-group">
            <label for="name" class="form-label">Name</label>
            <input
              type="text"
              id="name"
              name="name"
              class="form-input"
              required
              placeholder="Your name"
            >
          </div>

          <div class="form-group">
            <label for="email" class="form-label">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              class="form-input"
              required
              placeholder="your.email@example.com"
            >
          </div>

          <div class="form-group">
            <label for="message" class="form-label">Message</label>
            <textarea
              id="message"
              name="message"
              class="form-input form-textarea"
              required
              rows="5"
              placeholder="Your message..."
            ></textarea>
          </div>

          <button type="submit" class="btn btn-primary">Send Message</button>

          <div class="form-status" id="formStatus"></div>
        </form>

        <div class="contact-info">
          <p class="contact-text">
            Or reach out directly:
          </p>
          <a href="mailto:Mathias.Alsos03@gmail.com" class="contact-email-link">
            Mathias.Alsos03@gmail.com
          </a>
        </div>

        <div class="social-links">
          <a href="https://github.com/AlsosCode" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
            GitHub
          </a>
          <a href="https://www.linkedin.com/in/mathias-alsos-paulsen-43108a204/" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
            LinkedIn
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- FOOTER -->
  <footer id="footer">
    <div class="container" style="text-align: center; padding: 40px 0;">
      <p>&copy; 2025 Mathias Alsos Paulsen. All rights reserved.</p>
    </div>
  </footer>

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