<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Nasir Lin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600&family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
  <style>
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    :root {
      --primary-color: #333;
      --secondary-color: #555;
      --accent-color: #ae7d2f;
      --background-color: #f9f9f9;
      --header-height: 70px;
      --transition-speed: 0.3s;
      --font-family-primary: 'Noto Sans TC', sans-serif;
      --font-family-secondary: 'Exo 2', sans-serif;
    }
    body {
      font-family: var(--font-family-primary);
      color: var(--primary-color);
      background-color: #fff;
      line-height: 1.6;
      overflow-x: hidden;
    }
    a {
      color: var(--primary-color);
      text-decoration: none;
      transition: color var(--transition-speed) ease;
    }
    a:hover {
      color: var(--secondary-color);
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
    }
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(255,255,255,0.95);
      padding: 15px 0;
      z-index: 1000;
      transition: background var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    header.scrolled {
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    header h1 {
      font-family: var(--font-family-secondary);
      font-size: 1.8em;
      color: var(--primary-color);
      transition: color var(--transition-speed) ease;
    }
    nav ul {
      list-style: none;
      display: flex;
      gap: 20px;
      align-items: center;
    }
    nav ul li a {
      font-size: 1em;
      font-weight: 600;
      position: relative;
      padding: 5px 0;
      color: var(--primary-color);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    nav ul li a::after {
      content: '';
      position: absolute;
      width: 0%;
      height: 2px;
      background: var(--primary-color);
      left: 0;
      bottom: -2px;
      transition: width var(--transition-speed) ease;
    }
    nav ul li a:hover::after {
      width: 100%;
    }
    .menu-toggle {
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 25px;
      height: 20px;
      cursor: pointer;
    }
    .menu-toggle div {
      width: 100%;
      height: 3px;
      background: var(--primary-color);
      border-radius: 1.5px;
      transition: all var(--transition-speed) ease;
    }
    .menu-toggle.active div:nth-child(1) {
      transform: rotate(45deg) translate(5px,5px);
    }
    .menu-toggle.active div:nth-child(2) {
      opacity: 0;
    }
    .menu-toggle.active div:nth-child(3) {
      transform: rotate(-45deg) translate(5px,-5px);
    }
    section {
      padding: 100px 20px 60px;
      position: relative;
      overflow: hidden;
    }
    .section-title {
      text-align: center;
      margin-bottom: 40px;
    }
    .section-title h2 {
      font-family: var(--font-family-secondary);
      font-size: 2.5em;
      margin-bottom: 10px;
      color: var(--primary-color);
      position: relative;
      display: inline-block;
    }
    .section-title h2::after {
      content: '';
      width: 50px;
      height: 3px;
      background: var(--accent-color);
      display: block;
      margin: 10px auto 0;
      border-radius: 1.5px;
    }
    .section-title p {
      color: #777;
      font-size: 1.1em;
      max-width: 700px;
      margin: 10px auto 0;
    }
    #home {
      height: 100vh;
      background: url('https://i.meee.com.tw/8FQeqHk.gif') no-repeat center center/cover;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      text-align: center;
    }
    #home .content {
      padding: 30px;
      border-radius: 10px;
      max-width: 90%;
      box-shadow: 0 2px 8px rgb(255,255,255);
    }
    #home h1 {
      font-family: var(--font-family-secondary);
      font-size: 3em;
      margin-bottom: 20px;
      color: white;
      text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #home p {
      font-size: 1.2em;
      max-width: 800px;
      margin: 0 auto;
      color: white;
      text-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    #about {
      background: var(--background-color);
    }
    #about .content-inner {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      text-align: left;
      color: var(--primary-color);
    }
    #about h2 {
      font-family: var(--font-family-secondary);
      font-size: 2em;
      margin-bottom: 15px;
      color: var(--primary-color);
    }
    #about p {
      font-size: 1.1em;
      color: var(--secondary-color);
      line-height: 1.8;
      margin-bottom: 15px;
    }
    .coding-skill {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .coding-skill img {
      height: 24px;
      width: auto;
    }
    #certification {
      background: #fff;
    }
    #certification .content-inner {
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
      text-align: left;
      color: var(--primary-color);
    }
    #certification h2 {
      font-family: var(--font-family-secondary);
      font-size: 2em;
      margin-bottom: 15px;
      color: var(--primary-color);
    }
    #certification h3 {
      font-size: 1.4em;
      margin-bottom: 10px;
      color: var(--primary-color);
    }
    #certification p, 
    #certification li {
      font-size: 1.1em;
      line-height: 1.8;
      color: var(--secondary-color);
    }
    .competition-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }
    .competition-item {
      background: #f9f9f9;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    }
    .competition-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .certificate-group {
      margin-top: 30px;
    }
    .certificate-group h4 {
      font-family: var(--font-family-secondary);
      font-size: 1.2em;
      margin-bottom: 8px;
      color: var(--primary-color);
    }
    .certificate-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }
    .certificate-card {
      background: #f9f9f9;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 0.95em;
      line-height: 1.4;
      transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    }
    .certificate-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    }
    [data-aos] {
      opacity: 0;
      transition-property: opacity, transform;
    }
    footer {
      background: var(--primary-color);
      padding: 30px 20px;
      text-align: center;
      color: #fff;
    }
    footer p {
      margin-bottom: 10px;
      font-size: 1em;
    }
    footer a {
      color: #fff;
      margin: 0 10px;
      font-size: 1em;
      transition: color var(--transition-speed) ease;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    footer a:hover {
      color: #ddd;
    }
    @media (max-width:1024px) {
      .menu-toggle {
        display: flex;
      }
      nav ul {
        flex-direction: column;
        align-items: center;
        background: rgba(255,255,255,0.95);
        position: absolute;
        top: var(--header-height);
        right: 0;
        width: 220px;
        display: none;
        padding: 20px 0;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
      nav ul.active {
        display: flex;
      }
      nav ul li {
        margin: 15px 0;
      }
    }
    @media (max-width:768px) {
      #home h1 {
        font-size: 2.5em;
      }
      #home p {
        font-size: 1.1em;
      }
      #about .content-inner, 
      #certification .content-inner {
        padding: 10px;
      }
    }
    @media (min-width:1200px) {
      .container {
        width: 80%;
        max-width: 1100px;
      }
    }
  </style>
</head>
<body>
  <header data-aos="fade-down">
    <div class="container">
      <h1>Nasir Lin</h1>
      <nav>
        <ul>
          <li><a href="#home">首頁</a></li>
          <li><a href="#about">About 關於我</a></li>
          <li><a href="#certification">證照與競賽</a></li>
        </ul>
      </nav>
      <div class="menu-toggle" id="mobile-menu">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </header>
  <section id="home" data-aos="fade-up">
    <div class="content">
      <img src="source/image/profile.jpg" alt="Profile Picture" style="width:150px; height:150px; border-radius:50%; margin-bottom:20px;">
      <h1>Nasir</h1>
      <p>專長於資訊維護及應用組裝。</p>
    </div>
  </section>
  <section id="about" data-aos="fade-up" data-aos-delay="200">
    <div class="content-inner">
      <div class="section-title">
        <h2>About 關於我</h2>
      </div>
      <p>🌟 <strong>關於我</strong></p>
      <p>🎶 <strong>"Music meets Code"</strong><br>
         琴譜編譜者｜菜鳥程式工程師｜創意構想發想開發者</p>
      <p>🏫 <strong>學歷</strong><br>
         國立臺北商業大學 - 資訊管理系</p>
      <p>💼 <strong>經歷</strong><br>
         曾任服裝公司主管及客服專員<br>
         112年度彰投區學生學習歷程檔案分享會發言人</p>
      <p>🎹 <strong>鋼琴頻道品牌創辦人</strong><br>
         Jimmy’s Piano 鋼琴譜 頻道創辦人，具高達70000瀏覽量，超過1000人以上索取使用</p>
      <p>🔧 <strong>My Coding Skill</strong><br>
         <span class="coding-skill">
           <img src="https://img.shields.io/badge/-Python-3776AB?logo=python&logoColor=white" alt="Python">
           <img src="https://img.shields.io/badge/-Java-007396?logo=java&logoColor=white" alt="Java">
           <img src="https://img.shields.io/badge/-HTML-E34F26?logo=html5&logoColor=white" alt="HTML">
           <img src="https://img.shields.io/badge/-CSS-1572B6?logo=css3&logoColor=white" alt="CSS">
           <img src="https://img.shields.io/badge/-Learning_Always-brightgreen" alt="Learning">
         </span>
      </p>
      <p>📬 <strong>Contact Me</strong><br>
         <a href="mailto:11346061@ntub.edu.tw"><i class="fas fa-envelope"></i> MAIL</a>&nbsp;
         <a href="https://www.instagram.com/hayashiiii__" target="_blank"><i class="fab fa-instagram"></i> IG</a>
      </p>
    </div>
  </section>
  <section id="certification" data-aos="fade-up" data-aos-delay="400">
    <div class="content-inner">
      <div class="section-title">
        <h2>Certificate 證照與競賽</h2>
      </div>
      <h3>🏆 競賽經歷</h3>
      <div class="competition-wrapper" data-aos="fade-up" data-aos-delay="100">
        <div class="competition-item">
          <strong>2024年104學檔徵稿競賽</strong><br>
          高職綜整組 全國佳作（第四名）🔥
        </div>
        <div class="competition-item">
          <strong>2024年104學檔徵稿競賽</strong><br>
          高中自述組 全國佳作（第五名）🔥
        </div>
        <div class="competition-item">
          <strong>2024年「智在生活ABCD應用」競賽</strong><br>
          電腦應用組全國第一名🔥
        </div>
        <div class="competition-item">
          <strong>2024年全民e化資訊運動會（春季賽）</strong><br>
          資訊科技全國第一名🔥
        </div>
        <div class="competition-item">
          <strong>2024年全民e化資訊運動會（春季賽）</strong><br>
          電子商務全國第三名
        </div>
        <div class="competition-item">
          <strong>2023年微軟MOS 世界盃 PowerPoint</strong><br>
          全國總決賽 第三名🔥
        </div>
        <div class="competition-item">
          <strong>2023年全國高中職簡報競賽決賽</strong><br>
          餐飲產業B組 第二名
        </div>
        <div class="competition-item">
          <strong>2023年MARC智慧自走車暨機器人創意競賽</strong><br>
          佳作
        </div>
        <div class="competition-item">
          <strong>2022年GLAD資訊類專業英文詞彙</strong><br>
          中區賽 金腦獎
        </div>
        <div class="competition-item">
          <strong>2022年全民e化資訊運動會（秋季賽）</strong><br>
          App Inventor 第五名
        </div>
      </div>
      <h3 style="margin-top:40px;">📜 專業證照</h3>
      <div class="certificate-group" data-aos="fade-up" data-aos-delay="100">
        <h4>資訊技術與AI</h4>
        <div class="certificate-cards">
          <div class="certificate-card">中華民國丙級電腦硬體裝修國家技術士🔥</div>
          <div class="certificate-card">Microsoft：Azure AI Fundamentals 國際原廠🔥</div>
          <div class="certificate-card">GLAD Artificial Intelligence Literacy 國際認證</div>
          <div class="certificate-card">TQC 雲端技術及網路服務 - 專業級</div>
          <div class="certificate-card">TQC 雲端服務商務人員認證</div>
          <div class="certificate-card">TQC Linux網路管理 - 專業級</div>
          <div class="certificate-card">TQC Linux系統管理 - 專業級</div>
          <div class="certificate-card">TQC 專業Linux 系統管理工程師認證</div>
          <div class="certificate-card">TQC 專業Linux 網路管理工程師認證</div>
          <div class="certificate-card">TQC 專業行動裝置應用工程師認證</div>
          <div class="certificate-card">MOCC information technology (ICT)</div>
        </div>
      </div>
      <div class="certificate-group" data-aos="fade-up" data-aos-delay="200">
        <h4>文書處理及設計</h4>
        <div class="certificate-cards">
          <div class="certificate-card">中華民國乙/丙級電腦軟體應用國家技術士 🔥</div>
          <div class="certificate-card">Microsoft Office Specialist PowerPoint 2016 國際原廠🔥</div>
          <div class="certificate-card">GLAD Business Application Professionals Word 國際</div>
          <div class="certificate-card">GLAD Business Application Professionals PowerPoint 國際</div>
          <div class="certificate-card">Adobe Certified Professional Photoshop 2023 國際原廠🔥</div>
          <div class="certificate-card">TQC PowerPoint 2016 進階級</div>
        </div>
      </div>
      <div class="certificate-group" data-aos="fade-up" data-aos-delay="300">
        <h4>商業處理</h4>
        <div class="certificate-cards">
          <div class="certificate-card">中華民國丙級人工記帳會計國家技術士</div>
          <div class="certificate-card">TQC 電子商務概論-專業級</div>
          <div class="certificate-card">TQC 行動商務人員認證</div>
          <div class="certificate-card">MOCC e-commerce</div>
        </div>
      </div>
      <div class="certificate-group" data-aos="fade-up" data-aos-delay="400">
        <h4>程式類</h4>
        <div class="certificate-cards">
          <div class="certificate-card">MOCC App Inventor</div>
          <div class="certificate-card">TQC + 網頁程式設計 - 專業級</div>
        </div>
      </div>
      
      <div class="certificate-group" data-aos="fade-up" data-aos-delay="500">
        <h4>語言相關</h4>
        <div class="certificate-cards">
          <div class="certificate-card">GLAD Professional Vocabulary Quotient Credential ICT 國際</div>
          <div class="certificate-card">GEPT 全民英檢 初級</div>
          <div class="certificate-card">TQC 中文輸入 進階級 / 英文輸入 實用級</div>
          <div class="certificate-card">MOCC 中文輸入 丙級 / 英文輸入 初級</div>
        </div>
      </div>

      <div class="certificate-group" data-aos="fade-up" data-aos-delay="600">
        <h4>其他認證</h4>
        <div class="certificate-cards">
          <div class="certificate-card">NCC 國家通訊傳播委員會業餘無線電人員</div>
          <div class="certificate-card">AppleTeacher Swift Playground & Portfolio 國際</div>
          <div class="certificate-card">Google Digital Garage Certificate 國際認證</div>
          <div class="certificate-card">Yamaha grade examination 8th grade 鋼琴認證</div>
        </div>
      </div>
      
    </div>
  </section>

  <footer data-aos="fade-up">
    <p>&copy; 2024-2025 Nasir</p>
  </footer>

  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init({
      duration: 800,
      easing: 'ease-out',
      once: true
    });
    const menuToggle = document.getElementById('mobile-menu');
    const navUl = document.querySelector('nav ul');
    menuToggle.addEventListener('click', () => {
      navUl.classList.toggle('active');
      menuToggle.classList.toggle('active');
    });
    window.addEventListener('scroll', () => {
      const header = document.querySelector('header');
      if(window.scrollY > 50){
        header.classList.add('scrolled');
      } else {
        header.classList.remove('scrolled');
      }
    });
  </script>
</body>
</html>
