wuyue.github.io/index.html at main · bohyy/wuyue.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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="Yue Wu - Graduate student in New Media specializing in VR, Animation, digital design and Filmmaking">
  <meta name="keywords" content="VR, Mixed Reality, Digital Design, Computer Science, AI-driven">
  <meta name="author" content="Yue Wu">
  <title>Yue Wu - Portfolio</title>

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Custom CSS -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="images/favicon.ico">
</head>
<body class="bg-gray-100">
  <!-- Sidebar -->
  <div class="sidebar">
    <img src="image/1.jpg" alt="Yue Wu" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-white shadow-lg">
    <h1 class="text-xl font-bold text-center text-gray-800">Yue Wu</h1>
    <p class="text-center text-gray-700 mb-4 text-sm">Graduate student in New Media at Sichuan Normal University, with a background in Computer Science. Specializing in VR, Mixed Reality, and digital design. 🌟</p>

    <!-- Contact Links -->
    <div class="space-y-2 mb-4">
      <a href="mailto:978294391@qq.com" class="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
        </svg>
        Email
      </a>
      <a href="https://github.com/yourusername" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"></path>
        </svg>
        GitHub
      </a>
    </div>


  <!-- Main Content -->
  <div class="main-content">
    <!-- Navigation -->
    <nav class="bg-gradient-to-r from-amber-100 to-amber-200 shadow-sm rounded-lg p-4 mb-6">
      <div class="flex flex-wrap gap-4">
        <a href="index.html" class="nav-link active">Home</a>
        <a href="cv.html" class="nav-link">CV</a>
        <a href="projects.html" class="nav-link">Projects</a>
        <a href="portfolio.html" class="nav-link">Portfolio</a>
      </div>
    </nav>

    <!-- Welcome Section -->
    <section class="mb-8 bg-white rounded-lg shadow-sm p-6">
      <div class="flex items-center mb-4">
        <h2 class="text-3xl font-bold text-gray-800">Welcome! 👋</h2>
        <div class="ml-4 text-2xl">🌸</div>
      </div>
      <p class="text-lg text-gray-700 leading-relaxed">
        I'm <strong>Yue Wu</strong>, a passionate graduate student pursuing a Master of New Media at Sichuan Normal University in Chengdu, China. 🌺
      </p>
    </section>

    <!-- About Me Section -->
    <section class="mb-8 bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-2xl font-bold mb-4 text-gray-800">About Me 😊</h2>
      <div class="space-y-4 text-gray-700">
        <p>
          With a Bachelor's degree in Computer Sciences from Southwest Petroleum University, I blend technical expertise with creative artistry to explore innovative solutions in Virtual Reality (VR), Mixed Reality (MR), and Extended Reality (XR). 💻🎨
        </p>
        <p>
          My work focuses on creating immersive experiences that address real-world challenges, like reducing stress through VR meditation 🌿 and enhancing classroom engagement with interactive VR avatars 👩‍🏫.
        </p>
        <p>
          I'm skilled in tools like Unity, Unreal Engine 5, and Blender, and I love filmmaking and digital design! 🎥✨
        </p>
      </div>
    </section>

    <!-- Quick Links Section -->
    <section class="mb-8">
      <h2 class="text-2xl font-bold mb-4 text-gray-800">Explore My Work 🚀</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow">
          <h3 class="text-xl font-semibold mb-2 text-gray-800">📄 Curriculum Vitae</h3>
          <p class="text-gray-600 mb-4">View my educational background, skills, and awards.</p>
          <a href="cv.html" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">View CV</a>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow">
          <h3 class="text-xl font-semibold mb-2 text-gray-800">🎯 Projects</h3>
          <p class="text-gray-600 mb-4">Discover my VR and digital design projects.</p>
          <a href="projects.html" class="inline-block bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors">View Projects</a>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow">
          <h3 class="text-xl font-semibold mb-2 text-gray-800">🎨 Portfolio</h3>
          <p class="text-gray-600 mb-4">Explore my creative works and achievements.</p>
          <a href="portfolio.html" class="inline-block bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 transition-colors">View Portfolio</a>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section class="bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-2xl font-bold mb-4 text-gray-800">Get in Touch 📧</h2>
      <p class="text-gray-700 mb-4">
        I'm always excited to connect with fellow researchers, collaborators, and anyone interested in VR and digital design and video generation!
      </p>
      <div class="flex flex-wrap gap-4">
        <a href="mailto:978294391@qq.com" class="inline-block bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition-colors">
          Send Email
        </a>
        <a href="https://github.com/yourusername" target="_blank" class="inline-block bg-gray-800 text-white px-6 py-2 rounded hover:bg-gray-900 transition-colors">
          View GitHub
        </a>
      </div>
    </section>
  </div>

  <!-- Footer -->
  <footer class="text-center py-6 text-gray-600 text-sm">
    <p>&copy; 2025 Yue Wu. All rights reserved.</p>
  </footer>

  <!-- Custom JavaScript -->
  <script src="js/main.js"></script>
</body>
</html>