boyuedu.github.io/about.html at main · Boyuedu/boyuedu.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
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Me | Boyue Du</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background: url('about_background.jpg') no-repeat center center/cover;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
      overflow-x: hidden;
    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.65); /* darker for clarity */
      z-index: 0;
    }

    nav {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #007acc;
      color: white;
      padding: 1em 2em;
    }

    nav .name {
      font-weight: bold;
      font-size: 1.2em;
    }

    nav .links a {
      margin-left: 20px;
      color: white;
      text-decoration: none;
    }

    .container {
      position: relative;
      z-index: 1;
      max-width: 1000px;
      margin: auto;
      padding: 3em 2em;
    }

    h2 {
      border-bottom: 2px solid #ccc;
      padding-bottom: 0.2em;
      margin-bottom: 1em;
      color: #fff;
    }

    .intro {
      font-size: 1.1em;
      margin-bottom: 2em;
      line-height: 1.8;
    }

    .photo-grid {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.5em;
      flex-wrap: nowrap;
      margin-top: 2em;
      margin-bottom: 2em;
    }

    .photo-grid img {
      width: 240px;
      height: 150px;
      object-fit: cover;
      border-radius: 10px;
      border: 2px solid #ccc;
    }

    .paragraphs p {
      line-height: 1.8;
      margin-bottom: 1.5em;
      font-size: 1.05em;
    }

    @media (max-width: 750px) {
      .photo-grid {
        flex-wrap: wrap;
      }
    }
  </style>
</head>
<body>
  <div class="overlay"></div>

  <nav>
    <div class="name">Boyue Du</div>
    <div class="links">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="education.html">Education</a>
      <a href="experience.html">Experience</a>
      <a href="projects.html">Projects</a>
      <a href="gallery.html">Gallery</a>
      <a href="contact.html">Contact</a>
    </div>
  </nav>

  <div class="container">
    <h2>About Me</h2>

    <div class="intro">
      <p>I’m Boyue Du, an electrical engineer passionate about intelligent electronics, power systems, and their applications in the automotive industry. I recently earned my B.S. in Electrical Engineering from the University of Wisconsin–Madison, where I developed advanced knowledge and hands-on experience in signal processing, machine learning, and applied physics. In Fall 2025, I will begin my M.S. in Electrical and Computer Engineering at UCLA, focusing on interdisciplinary research in AI, deep learning, power electronics, and autonomous driving systems.</p>
    </div>

    <div class="photo-grid">
      <img src="about_photos/photo1.jpg" alt="Graduation stadium">
      <img src="about_photos/photo2.jpg" alt="Holding diploma">
      <img src="about_photos/photo3.jpg" alt="Make your mark bench">
    </div>

    <div class="paragraphs">
      <p>In my undergraduate life, curiosity led me to find my career path: engineering. Despite the challenging courses and heavy workload, I found joy in this process. Every night, when I walked tiredly to my dorm from Memorial Library, I felt enriched because I had learned something I didn't know before. Whenever I encountered elegant formulas derived by scientists like Fourier and Maxwell, whom I admired in childhood, I realized I was doing something meaningful. When I learned how engine and transmission operate in a car, I felt I moved closer to my goal. Curiosity and interest drove me to go forward.</p>

      <p>In June 2023, during a break from school, I launched my own startup: 从知书院 (Congzhi), a Chinese-style multifunctional space that blends drinks, dining, music, literature, and bar culture together. Designed to attract young urban professionals, the space was more than a café—it was a hub for creativity and conversation. I managed everything from branding and interior design to kitchen operations. This entrepreneurial journey taught me how to transform ideas into real-world value and strengthened my belief in the power of interdisciplinary thinking.</p>

      <p>On my first day as a freshman at UW–Madison, I saw the words engraved on a railing at Alumni Park: “Make your mark on the world.” Four years later, I haven’t changed my goal—only deepened my understanding of what it means. Now, with a foundation built on curiosity, perseverance, and purpose, I’m ready to leave that mark—through engineering, innovation, and impact.</p>
    </div>
  </div>
</body>
</html>