Spaces:
Running
Running
| <html lang="en" class="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>張老師 | 資訊科技教育專家</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4f46e5', | |
| secondary: '#0d9488', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-16 bg-gradient-to-r from-primary to-purple-600 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">林炳信</h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold mb-8">資訊科技教育專家</h2> | |
| <p class="text-xl max-w-2xl mx-auto">培養學生的數位時代實用科技技能</p> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12">關於我</h2> | |
| <div class="flex flex-col md:flex-row items-center gap-10"> | |
| <div class="md:w-1/3"> | |
| <img src="https://huggingface.co/spaces/hklamsir/tech-edumaster/resolve/main/images/ai_interview_helper.png" alt="頭像" class="rounded-lg shadow-xl w-full h-auto"> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h3 class="text-2xl font-semibold mb-4">您好，我是林老師</h3> | |
| <p class="text-gray-700 mb-4">擁有30年以上資訊科技教學經驗，致力於讓不同程度的學習者都能理解複雜的科技概念。</p> | |
| <p class="text-gray-700 mb-6">專注於課程開發、實作訓練，並創造連結理論與實務的互動學習體驗。</p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="mr-2 text-secondary"></i> | |
| <span>15+ 專業認證</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="mr-2 text-secondary"></i> | |
| <span>500+ 授課學生</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="book" class="mr-2 text-secondary"></i> | |
| <span>8 門開發課程</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="globe" class="mr-2 text-secondary"></i> | |
| <span>國際教學經驗</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12">教學服務</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow"> | |
| <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="code" class="text-primary text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">程式設計教學</h3> | |
| <p class="text-gray-700">Python、JavaScript、Java 及網頁開發基礎課程，針對不同程度學習者調整。</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow"> | |
| <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="server" class="text-primary text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">資訊基礎設施培訓</h3> | |
| <p class="text-gray-700">網路技術、資安防護、雲端運算與系統管理的實務工作坊。</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow"> | |
| <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="book-open" class="text-primary text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">課程開發</h3> | |
| <p class="text-gray-700">為資訊科技課程及訓練營設計客製化教材與學習資源。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Gallery --> | |
| <section id="projects" class="py-16"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12">專案成果展示</h2> | |
| <!-- Filter Buttons --> | |
| <div class="flex flex-wrap justify-center gap-3 mb-8"> | |
| <button class="filter-btn active px-4 py-2 rounded-full bg-primary text-white" data-filter="all">全部</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition" data-filter="course">課程</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition" data-filter="workshop">工作坊</button> | |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition" data-filter="resource">資源</button> | |
| </div> | |
| <!-- Gallery Grid --> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 gallery-container"> | |
| <!-- Project items will be loaded via JavaScript --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-6 max-w-4xl"> | |
| <h2 class="text-3xl font-bold text-center mb-12">聯絡我們</h2> | |
| <form class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="name" class="block mb-2 font-medium">姓名</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2 font-medium">電子郵件</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block mb-2 font-medium">主旨</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block mb-2 font-medium">訊息內容</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary text-white py-3 px-6 rounded-lg hover:bg-primary-600 transition font-medium">送出訊息</button> | |
| </form> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |