Project Management

项目管理 · GitHub协作开发指南

01

Create a repository

创建GitHub仓库

创建新仓库入口

图片 1-1

填写仓库信息

图片 1-2

配置选项

图片 1-3

This is a personal repository for demonstration purposes; the school provides group repositories.

To start, we need to create a repository to access github.com. Setting the repository name first, and as we continue to create our repository, we need to set our visibility to Public, allowing Internet users to access it. And be sure to include a README file in the repository, as this is where we can provide a comprehensive project description.

步骤4

图片 1-4

步骤5

图片 1-5

步骤6

图片 1-6

步骤7

图片 1-41

Complete creation

02

Member invitation

邀请团队成员

邀请成员步骤1

图片 1-7

邀请成员步骤2

图片 1-8

邀请成员步骤3

图片 1-9

Enter member ID

查看邀请的成员

图片 1-10

You can view invited members

03

Github Settings & Upload web page

GitHub设置与网页上传

设置步骤1

图片 1-11

设置步骤2

图片 1-12

设置步骤3

图片 1-13

设置步骤4

图片 1-14

设置步骤5

图片 1-15

设置步骤6

图片 1-16

You can see him/her on the github web page

查看页面1

图片 1-17

查看页面2

图片 1-18

You can see the uploaded page here

04

Home Page Code

首页代码展示

Here is the code for the home page

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是啥组 - 艺术与科技</title>
    <link rel="stylesheet" href="style.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=Noto+Sans+SC:wght@300;400;700;900&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="index.html" class="nav-logo">这是啥组</a>
            <ul class="nav-menu">
                <li><a href="#home">首页</a></li>
                <li><a href="#members">成员</a></li>
                <li><a href="#works">作业</a></li>
                <li><a href="#final">期末作品</a></li>
            </ul>
        </div>
    </nav>

    <section class="hero" id="home">
        <div class="hero-content">
            <h1 class="hero-title">这是啥组</h1>
            <p class="hero-subtitle">艺术与科技专业</p>
            <div class="hero-line"></div>
            <div class="hero-buttons">
                <a href="#members" class="btn btn-outline">探索团队</a>
                <a href="#works" class="btn btn-outline">查看作品</a>
            </div>
        </div>
        <div class="hero-decoration">
            <div class="geo-cross geo-cross-1"></div>
            <div class="geo-cross geo-cross-2"></div>
            <div class="geo-cross geo-cross-3"></div>
            <div class="geo-diamond geo-diamond-1"></div>
            <div class="geo-diamond geo-diamond-2"></div>
            <div class="geo-diamond geo-diamond-3"></div>
            <div class="geo-circle geo-circle-1"></div>
            <div class="geo-circle geo-circle-2"></div>
            <div class="geo-circle geo-circle-3"></div>
            <div class="geo-square geo-square-1"></div>
            <div class="geo-square geo-square-2"></div>
        </div>
    </section>

    <section class="members" id="members">
        <div class="section-header">
            <span class="section-number">01</span>
            <h2 class="section-title">小组成员</h2>
            <p class="section-desc">艺术与科技 · 四人团队</p>
        </div>
        
        <div class="member-grid">
            <a href="https://clare9901.github.io/Clare111111111new/" target="_blank" class="member-card member-link">
                <div class="member-avatar-wrapper">
                    <img src="images/avatar1.jpg" alt="陈过" class="member-photo">
                    <div class="avatar-frame"></div>
                </div>
                <div class="member-info">
                    <h3 class="member-name">陈过</h3>
                    <p class="member-id">2024014742</p>
                    <p class="member-major">艺术与科技</p>
                </div>
            </a>

            <a href="https://mtttttt12.github.io/Cai-aomi/" target="_blank" class="member-card member-link">
                <div class="member-avatar-wrapper">
                    <img src="images/avatar2.jpg" alt="蔡奥秘" class="member-photo">
                    <div class="avatar-frame"></div>
                </div>
                <div class="member-info">
                    <h3 class="member-name">蔡奥秘</h3>
                    <p class="member-id">2024014745</p>
                    <p class="member-major">艺术与科技</p>
                </div>
            </a>

            <a href="https://2024014735caiyitong.github.io/Cai-Yitong/" target="_blank" class="member-card member-link">
                <div class="member-avatar-wrapper">
                    <img src="images/avatar3.jpg" alt="蔡仪彤" class="member-photo">
                    <div class="avatar-frame"></div>
                </div>
                <div class="member-info">
                    <h3 class="member-name">蔡仪彤</h3>
                    <p class="member-id">2024014735</p>
                    <p class="member-major">艺术与科技</p>
                </div>
            </a>

            <a href="https://2024014747.github.io/wyh-web/" target="_blank" class="member-card member-link">
                <div class="member-avatar-wrapper">
                    <img src="images/avatar4.jpg" alt="王昱涵" class="member-photo">
                    <div class="avatar-frame"></div>
                </div>
                <div class="member-info">
                    <h3 class="member-name">王昱涵</h3>
                    <p class="member-id">2024014747</p>
                    <p class="member-major">艺术与科技</p>
                </div>
            </a>
        </div>
    </section>

    <section class="works" id="works">
        <div class="section-header">
            <span class="section-number">02</span>
            <h2 class="section-title">作业展示</h2>
            <p class="section-desc">课程项目与学习成果</p>
        </div>
        
        <div class="works-list">
            <a href="project-management.html" class="work-item work-link">
                <span class="work-number">01</span>
                <h3 class="work-title">Project Management</h3>
                <p class="work-desc">项目管理</p>
            </a>

            <a href="arduino-output.html" class="work-item work-link">
                <span class="work-number">02</span>
                <h3 class="work-title">Arduino</h3>
                <p class="work-desc">Arduino 输出</p>
            </a>

            <div class="work-item">
                <span class="work-number">03</span>
                <h3 class="work-title">Material</h3>
                <p class="work-desc">材料</p>
            </div>

            <div class="work-item">
                <span class="work-number">04</span>
                <h3 class="work-title">Computer aided design</h3>
                <p class="work-desc">计算机辅助设计</p>
            </div>

            <div class="work-item">
                <span class="work-number">05</span>
                <h3 class="work-title">3D Printer</h3>
                <p class="work-desc">3D 打印</p>
            </div>

            <a href="iot.html" class="work-item work-link">
                <span class="work-number">06</span>
                <h3 class="work-title">Arduino IOT</h3>
                <p class="work-desc">物联网与交互</p>
            </a>

        </div>
    </section>

    <section class="final-work" id="final">
        <div class="section-header">
            <span class="section-number">03</span>
            <h2 class="section-title">Final Work</h2>
            <p class="section-desc">期末综合创作项目</p>
        </div>
        
        <div class="final-grid">
            <div class="final-card">
                <div class="final-image-wrapper">
                    <img src="https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?w=1200&h=600&fit=crop" alt="期末作品主视觉">
                    <div class="final-overlay"></div>
                </div>
                <div class="final-content">
                    <span class="final-category">综合项目</span>
                    <h3 class="final-title">艺术与科技的融合探索</h3>
                    <p class="final-team">团队：陈过 / 蔡奥秘 / 蔡仪彤 / 王昱涵</p>
                    <p class="final-desc">本学期期末综合创作项目，整合艺术与科技专业知识，通过多媒体、交互设计和数字技术，探索当代艺术表达的新可能性。项目融合了视觉艺术、声音设计、互动体验和数字媒体等多种元素。</p>
                    <div class="final-tags">
                        <span class="final-tag">交互设计</span>
                        <span class="final-tag">数字媒体</span>
                        <span class="final-tag">视觉艺术</span>
                        <span class="final-tag">创新实验</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="footer-line"></div>
        <div class="footer-content">
            <p class="footer-text">&copy; 2026 这是啥组</p>
            <p class="footer-subtext">艺术与科技专业</p>
        </div>
    </footer>

    <script>
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.member-card, .work-item, .final-card').forEach(el => {
            observer.observe(el);
        });

        window.addEventListener('scroll', () => {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    </script>
</body>
</html>
NAV

Navigation Bar Creation Process

导航栏创建过程

Tell Lingma we need to divide it into four parts—home page, members, assignments, and the final major project.

Navigation Bar Structure

图片 1-40

Navigation Bar Code

Here is the navigation bar code structure:

<nav class="navbar">
    <div class="nav-container">
        <a href="index.html" class="nav-logo">这是啥组</a>
        <ul class="nav-menu">
            <li><a href="index.html#home">首页</a></li>
            <li><a href="index.html#members">成员</a></li>
            <li><a href="index.html#works">作业</a></li>
            <li><a href="index.html#final">期末作品</a></li>
        </ul>
    </div>
</nav>
05

Personal Introduction

个人介绍（以其中一人为例）

Here is a personal introduction (take one person as an example)

Link: https://2024014735caiyitong.github.io/Cai-Yitong/

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蔡仪彤个人主页</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%23FFA500'/></svg>" type="image/svg+xml">
</head>
<body>
<!-- 背景圆点 -->
<div class="dots-container" id="dotsContainer"></div>

<!-- 主卡片 -->
<div class="card">
<!-- 板块1 基本信息 -->
<div class="info-section">
<div class="label"><span class="name-color">蔡仪彤</span></div>
<div class="content">
艺术与科技在读，专注动态视觉与交互创作，擅长平面设计、简易硬件编程。
</div>
<!-- 个人头像位置 -->
<div class="avatar-box">
<img src="https://picsum.photos/id/65/150/150" alt="个人头像" class="avatar-img">
</div>
</div>

<!-- 板块2 项目作品 -->
<div class="card-wrap">
<div class="section-title">项目实践｜Work Projects</div>
<div class="content-text">
<!-- 项目预览图片区 -->
<div class="project-img-group">
<img src="https://picsum.photos/id/28/220/150" alt="硬件装置作品" class="pro-img">
<img src="https://picsum.photos/id/62/220/150" alt="国风平面作品" class="pro-img">
<img src="https://picsum.photos/id/96/220/150" alt="动态视觉作品" class="pro-img">
</div>

<div class="item-box">
<div class="item-icon">💡</div>
<div class="item-text">
<strong>交互硬件装置</strong><br>基于Arduino开发光影交互装置，实现硬件联动动态灯光视觉
</div>
</div>
<div class="item-box">
<div class="item-icon">🎨</div>
<div class="item-text">
<strong>视觉平面创作</strong><br>国风纹样设计、动态海报、品牌版式视觉等平面类原创设计
</div>
</div>
<div class="item-box">
<div class="item-icon">🎬</div>
<div class="item-text">
<strong>数字动态视觉</strong><br>AE动态插画、短视频视觉包装、个人定制静态网页开发
</div>
</div>
</div>
</div>

<!-- 板块3 专业技能 -->
<div class="card-wrap">
<div class="section-title">专业技能｜Skills</div>
<div class="content-text">
<div class="item-box">
<div class="item-icon">🖼️</div>
<div class="item-text"><strong>视觉设计类</strong><br>PS/AI/AE动态制作、版式排版、传统纹样设计、新媒体视觉</div>
</div>
<div class="item-box">
<div class="item-icon">⚙️</div>
<div class="item-text"><strong>硬件编程类</strong><br>Arduino单片机、基础电路搭建、实物交互作品调试</div>
</div>
<div class="item-box">
<div class="item-icon">💻</div>
<div class="item-text"><strong>前端开发</strong><br>静态网页制作、页面动效、页面自适应布局编写</div>
</div>
</div>
</div>

<!-- 板块4 日常爱好 -->
<div class="card-wrap">
<div class="section-title">日常热爱｜Hobbies</div>
<div class="content-text">
<!-- 爱好配图 -->
<div class="hobby-img-box">
<img src="https://picsum.photos/id/36/180/120" alt="摄影" class="hobby-img">
</div>
<div class="item-box">
<div class="item-icon">📷</div>
<div class="item-text"><strong>摄影创作</strong><br>纪实人像、风光拍摄，钻研数码与胶片摄影、构图光影学习</div>
</div>
<div class="item-box">
<div class="item-icon">🏺</div>
<div class="item-text"><strong>艺术研学</strong><br>文博古迹鉴赏、中外美术赏析、传统非遗纹样考据、舞剧观赏</div>
</div>
<div class="item-box">
<div class="item-icon">📖</div>
<div class="item-text"><strong>课余提升</strong><br>多国语言自学、设计类书籍与艺术文献阅览</div>
</div>
</div>
</div>

<!-- 板块5 学习履历 -->
<div class="card-wrap">
<div class="section-title">学习履历｜About Study</div>
<div class="content-text">
艺术与科技专业在读，研究方向为传统国风文化+数字交互跨界创作，在校持续落地小型交互实物项目与原创视觉作品，不断拓展设计与硬件结合的创作边界。
</div>
</div>

<!-- 板块6 底部联络 -->
<div class="card-wrap">
<div class="section-title">联络我｜Contact Me</div>
<div class="content-text">
合作约稿、设计定制、项目交流均可邮件联系<br>
邮箱：<a href="mailto:xxx_design@outlook.com">xxx_design@outlook.com</a>
</div>
</div>
</div>

<script>
// 生成随机彩色圆点
function createDots() {
const container = document.getElementById('dotsContainer');
const colors = ['#FF1744', '#00E5FF', '#FFD600', '#00E676', '#FF9100', '#D500F9', '#FF4081', '#00B0FF'];
const dotCount = 47; // 圆点数量

for (let i = 0; i < dotCount; i++) {
const dot = document.createElement('div');
dot.className = 'dot';

// 随机大小 (8-30px)
const size = Math.random() * 22 + 8;
dot.style.width = size + 'px';
dot.style.height = size + 'px';

// 随机位置
dot.style.left = Math.random() * 100 + '%';
dot.style.top = Math.random() * 100 + '%';

// 随机颜色
const color = colors[Math.floor(Math.random() * colors.length)];
dot.style.backgroundColor = color;

// 随机动画时长和延迟 (8-15秒)
const duration = Math.random() * 7 + 8;
const delay = Math.random() * 5;
dot.style.animationDuration = duration + 's';
dot.style.animationDelay = delay + 's';

container.appendChild(dot);
}
}

// 页面加载时创建圆点
window.addEventListener('load', createDots);
</script>
</body>
</html>