huaciii.github.io/index.html at main · huaciii/huaciii.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!doctype html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shu-s</title>
    <link href="./style.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="./img/favicon.png" />
  </head>
  <body>
    <!-- hero -->
    <section class="h-screen w-screen flex flex-col bg-base-bgme">
      <div
        class="w-screen h-full bg-sun bg-contain bg-top bg-no-repeat bg-fixed"
      ></div>
      <!-- footbar -->
      <div
        class="w-[92%] z-50 fixed h-[8%] left-1/2 transform -translate-x-1/2 bottom-8 flex justify-between px-4 items-center text-[14px] bg-base-bgdark rounded-2xl"
      >
        <!-- contact -->
        <div class="flex space-x-6 w-[20%]">
          <p class="text-base-fontdark">CONTACT</p>
          <p class="text-base-fontlight">huaciii.a@gmail.com</p>
        </div>
        <p class="text-base-fontlight text-center w-[40%]">
          Be firm, and just, and true © Asrun Shu 2024
        </p>
        <!-- resume -->
        <div class="w-[20%] h-auto flex justify-end">
          <a onclick="openPDF()"
            href=""
            class="bg-primary-500 flex justify-center items-center rounded-xl px-6 py-2 text-white hover:bg-primary-300"
          >
            RESUME
          </a>
        </div>
      </div>
    </section>
    <!-- bg -->

    <div
    id="content-container"
      class="w-screen h-screen bg-sunturn bg-cover bg-center bg-fixed overflow-scroll "
    >
      <section

        class="w-full h-auto px-[4%] flex flex-col pt-[2%] bg-opacity-100 space-y-40 pb-40 "
      >
        <!-- p1 -->
        <div
          class="w-full h-[80vh] flex justify-center items-center "
        >
        <div class="rounded-2xl flex justify-between items-center bg-base-bgme w-[60%] h-[60%]">
          <button
            onclick="redirecttoPj1()"
            class="w-1/2 h-full rounded-2xl bg-base-bglight"
          >
            <div
              class="w-full h-full  bg-contain bg-center bg-no-repeat bg-portcl"
            ></div>
          </button>
          <!-- title -->
          <div class="flex flex-col justify-between h-full p-4 pl-8 w-1/2  tracking-wider">
            <div class="flex flex-col space-y-2 w-full">
              <div class="px-4 py-1 border border-base-brd rounded-full bg-base-bgdark w-fit text-white text-xs">BtoC,web </div>
              <div class="text-white text-2xl ">
                 Redesigning a Telecommunication Service Platform From Strategy Layer
              </div>
            </div>
            <!-- btn -->
            <button
              onclick="redirecttoPj1()"
              class="w-14 h-14 bg-base-bgdark flex justify-center items-center rounded-2xl hover:bg-primary-500"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="32"
                height="16"
                fill="none"
                viewBox="0 0 12 10"
              >
                <path
                  stroke="#D8D8D8"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                  d="M1.333 5h9.334m0 0-3.5-3.5m3.5 3.5-3.5 3.5"
                />
              </svg>
            </button>
          </div></div>
        </div>
        <!-- p2 -->
        <div
          class="w-full h-[80vh] flex justify-center items-center "
        >
        <div class="rounded-2xl flex justify-between items-center bg-base-bgme w-[60%] h-[60%]">
          <button
            onclick="redirecttoPj2()"
            class="w-1/2 h-full rounded-2xl bg-base-bglight"
          >
          <div
          class=" w-full h-full bg-cover bg-center rounded-2xl bg-wamo "
        ></div>
          </button>
          <!-- title -->
          <div class="flex flex-col justify-between h-full p-4 pl-8 w-1/2  tracking-wider">
            <div class="flex flex-col space-y-2 w-full">
              <div class="px-4 py-1 border border-base-brd rounded-full bg-base-bgdark w-fit text-white text-xs">Dashboard,web,app </div>
              <div class="text-white text-2xl ">
                Building Site Monitoring System: From Requirements to Complete UI Design
              </div>
            </div>
            <!-- btn -->
            <button
              onclick="redirecttoPj2()"
              class="w-14 h-14 bg-base-bgdark flex justify-center items-center rounded-2xl hover:bg-primary-500"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="32"
                height="16"
                fill="none"
                viewBox="0 0 12 10"
              >
                <path
                  stroke="#D8D8D8"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                  d="M1.333 5h9.334m0 0-3.5-3.5m3.5 3.5-3.5 3.5"
                />
              </svg>
            </button>
          </div>
        </div></div>
        <!-- p3 -->
        <div
          class="w-full h-[80vh] flex justify-center items-center "
        >
        <div class="rounded-2xl flex justify-between items-center bg-base-bgme w-[60%] h-[60%]">
          <button
            onclick="redirecttoPj3()"
            class="w-1/2 h-full  "
          >
            <div
              class=" w-full h-full bg-cover bg-center rounded-2xl bg-pj2 "
            ></div>
          </button>
          <!-- title -->
          <div class="flex flex-col justify-between h-full p-4 pl-8 w-1/2  tracking-wider">
            <div class="flex flex-col space-y-2 w-full">
              <div class="px-4 py-1 border border-base-brd rounded-full bg-base-bgdark w-fit text-white text-xs">app,web </div>
              <p class="text-white text-2xl ">
                Pieces of past work from my study time
              </p>
            </div>
            <!-- btn -->
            <button
              onclick="redirecttoPj3()"
              class="w-14 h-14 bg-base-bgdark flex justify-center items-center rounded-2xl hover:bg-primary-500"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="32"
                height="16"
                fill="none"
                viewBox="0 0 12 10"
              >
                <path
                  stroke="#D8D8D8"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                  d="M1.333 5h9.334m0 0-3.5-3.5m3.5 3.5-3.5 3.5"
                />
              </svg>
            </button>
          </div>
        </div></div>
      </section>
    </div>
  </body>
  <script>
function openPDF() {
            const pdfUrl = './resumejp2025.pdf'; // 替换为你的 PDF 文件路径
            window.open(pdfUrl, '_blank');
        }


        function redirecttoPj3() {
            window.open('./pj-3.html', '_blank'); // 在新窗口中打开 pj-2.html
        }

    function redirecttoPj1() {
            window.open('./pj-1.html', '_blank'); // 在新窗口中打开 pj-1.html
        }
        function redirecttoPj2() {
            window.open('./pj-2.html', '_blank'); // 在新窗口中打开 pj-1.html
        }

    const contentContainer = document.getElementById('content-container');
const bgSunturn = document.querySelector('.bg-sunturn');
let allowScroll = false;

window.addEventListener('scroll', function() {
  if (window.pageYOffset >= bgSunturn.offsetHeight) {
    allowScroll = true;
    contentContainer.classList.add('overflow-auto');
  } else {
    allowScroll = false;
    contentContainer.classList.remove('overflow-auto');
  }
});

contentContainer.addEventListener('scroll', function(event) {
  if (!allowScroll) {
    // 当 contentContainer 滚动到顶部之前，禁止其滚动
    if (contentContainer.scrollTop > 0) {
      event.preventDefault();
      contentContainer.scrollTop = 0;
    }
  }
});
  </script>
</html>