Deployed 28ba794 with MkDocs version: 1.4.2

AIboy996 · Sep 12, 2023 · f542c31 · f542c31
1 parent 8f306e8
commit f542c31
Show file tree

Hide file tree

Showing 8 changed files with 244 additions and 172 deletions.
diff --git a/About/m.resume.html b/About/m.resume.html
@@ -2,28 +2,8 @@
 
 <head>
     <meta charset="UTF-8">
-    <style type="text/css">
-        body {
-            text-align: left;
-            font-family: "Times New Roman"
-        }
-
-        h2 {
-            text-align: center;
-        }
-
-        a {
-            text-decoration: none
-        }
-
-        a:hover {
-            color: #F00
-        }
-
-        li {
-            margin-top: 3px;
-        }
-    </style>
+    <link rel="stylesheet" href="resume.css">
+    <script src="resume.js"></script>
     <title>Yang Zhang</title>
 </head>
 
@@ -33,47 +13,58 @@
             <!-- 4127 × 3212 -->
             <img src="/assets/images/yangzhang.jpg" width="70%" />
         </div>
-        <br/>
+        <br />
         <div style="text-align: center;">
-            <h1 size="6px">Yang Zhang</h1>
-            <audio id="player" src="/assets/audio/zhangyang_pronounce.mp3"></audio>
-            <button style="font-size: x-large;" onclick="document.getElementById('player').play()">
-                Pronounce Yang Zhang(张杨) in Chinese
+            <h1>Yáng Zhāng</h1>
+            <button onclick="document.getElementById('player').play()">
+                Pronounce Zhāng Yáng(张杨) in Chinese
             </button>
+            <div class="popup" onclick="myFunction()">ⓘ
+                <span class="popuptext" id="myPopup">As you know, Chinese naming conventions arrange the surname
+                    before the firstname</span>
+            </div>
             <br><br>
         </div>
         <div style="padding-top: 10px;">
             <hr>
             <h2>About Me</h2>
-            <ul type="circle">
-                <li>M.Sc Student in <a href="https://sds.fudan.edu.cn/">School of Data Science, Fudan
-                        University</a>(since 2023.09)</li>
-                <li>Freshman in <a href="https://zmiclab.github.io/">Fudan ZMIC Lab</a>, Supervised by Prof. <a
-                        href="https://zmiclab.github.io/zxh/">Xiahai Zhuang</a></li>
-                <li>My Email: yangzhang23 [at] m [dot] fudan [dot] edu [dot] cn</li>
-                <li>My Homepage: <a href="https://yangzhang.site/">yangzhang.site</a> </li>
-            </ul>
+            <div class="left_content">
+                <ul type="circle">
+                    <li>M.Sc Student in <a href="https://sds.fudan.edu.cn/">School of Data Science, Fudan
+                            University</a>(since 2023.09)</li>
+                    <li>Freshman in <a href="https://zmiclab.github.io/">Fudan ZMIC Lab</a>, Supervised by Prof. <a
+                            href="https://zmiclab.github.io/zxh/">Xiahai Zhuang</a></li>
+                    <li>My Email: yangzhang23 [at] m [dot] fudan [dot] edu [dot] cn</li>
+                    <li>My Homepage: <a href="https://yangzhang.site/">yangzhang.site</a> </li>
+                </ul>
+            </div>
         </div>
         <div style="padding-top: 10px;">
             <hr>
             <h2>Research Interests</h2>
-            <p>
-                Machine Learning, Computer Vision, Medical Image Computing
-            </p>
+            <div class="left_content">
+                <p>
+                    Machine Learning, Computer Vision, Medical Image Computing
+                </p>
+            </div>
         </div>
         <div style="padding-top: 10px;">
             <hr>
             <h2>Selected Publications</h2>
-            <p>
-                ...
-            </p>
+            <div class="left_content">
+                <p>
+                    ...
+                </p>
+            </div>
         </div>
         <div style="padding-top: 10px;">
             <hr>
             <h2>Open-source Projects</h2>
-            <p>
-                ...
-            </p>
+            <div class="left_content">
+                <p>
+                    ...
+                </p>
+            </div>
         </div>
         <footer style="text-align: center;">
             <hr>

diff --git a/About/resume.css b/About/resume.css
@@ -0,0 +1,87 @@
+/* Popup container */
+.popup {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+/* The actual popup (appears on top) */
+.popup .popuptext {
+    visibility: hidden;
+    width: 160px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -80px;
+}
+
+/* Popup arrow */
+.popup .popuptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+/* Toggle this class when clicking on the popup container (hide and show the popup) */
+.popup .show {
+    visibility: visible;
+}
+
+/* Add animation (fade in the popup) */
+@-webkit-keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+body {
+    text-align: center;
+    font-family: "Times New Roman"
+}
+
+a {
+    text-decoration: none;
+    color: cadetblue
+}
+
+a :visited {
+    color: cadetblue
+}
+
+a:hover {
+    color: #F00
+}
+
+/* div{float:left} */
+li {
+    margin-top: 3px;
+}
+
+.left_content {
+    text-align: left;
+}
diff --git a/About/resume.html b/About/resume.html
@@ -3,34 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style type="text/css">
-        body {
-            text-align: center;
-            font-family: "Times New Roman"
-        }
-
-        a {
-            text-decoration: none
-        }
-
-        a:hover {
-            color: #F00
-        }
-
-        /* div{float:left} */
-        li {
-            margin-top: 3px;
-        }
-    </style>
-    <script>
-        var width = ((typeof screen !== 'undefined') ? screen.width : null)
-        || window.innerWidth
-        || document.documentElement.clientWidth
-        || document.body.clientWidth;
-        if (width <= 800) {
-            window.location = "m.resume.html";
-        }
-    </script>
+    <link rel="stylesheet" href="resume.css">
+    <script src="resume.js"></script>
     <title>Yang Zhang</title>
 </head>
 
@@ -41,14 +15,22 @@
                 <!-- 4127 × 3212 -->
                 <img src="/assets/images/yangzhang.jpg" width="400px" />
             </div>
-            <div style="width:700px; height:240px; padding-left: 10px; float: left; text-align: left;">
-                <br/>
-                <h1 size="6px">Yang Zhang</h1>
-                <button onclick="document.getElementById('player').play()">Pronounce Yang Zhang(张杨) in Chinese</button>
+            <div style="width:700px; height:240px; padding-left: 20px; float: left; text-align: left;">
+                <br />
+                <h1>Yáng Zhāng</h1>
+                <button onclick="document.getElementById('player').play()">
+                    Pronounce Zhāng Yáng(张杨) in Chinese
+                </button>
+                <div class="popup" onclick="myFunction()">ⓘ
+                    <span class="popuptext" id="myPopup">As you know, Chinese naming conventions arrange the surname
+                        before the firstname</span>
+                </div>
                 <audio id="player" src="/assets/audio/zhangyang_pronounce.mp3"></audio>
                 <ul type="circle">
-                    <li>M.Sc Student in <a href="https://sds.fudan.edu.cn/">School of Data Science, Fudan University</a>(since 2023.09)</li>
-                    <li>Freshman in <a href="https://zmiclab.github.io/">Fudan ZMIC Lab</a>, Supervised by Prof. <a href="https://zmiclab.github.io/zxh/">Xiahai Zhuang</a></li>
+                    <li>M.Sc Student in <a href="https://sds.fudan.edu.cn/">School of Data Science, Fudan
+                            University</a>(since 2023.09)</li>
+                    <li>Freshman in <a href="https://zmiclab.github.io/">Fudan ZMIC Lab</a>, Supervised by Prof. <a
+                            href="https://zmiclab.github.io/zxh/">Xiahai Zhuang</a></li>
                     <li>My Email: yangzhang23 [at] m [dot] fudan [dot] edu [dot] cn</li>
                     <li>My Homepage: <a href="https://yangzhang.site/">yangzhang.site</a> </li>
                 </ul>

diff --git a/About/resume.js b/About/resume.js
@@ -0,0 +1,12 @@
+// When the user clicks on <div>, open the popup
+function myFunction() {
+    var popup = document.getElementById("myPopup");
+    popup.classList.toggle("show");
+}
+var width = ((typeof screen !== 'undefined') ? screen.width : null)
+    || window.innerWidth
+    || document.documentElement.clientWidth
+    || document.body.clientWidth;
+if (width <= 800) {
+    window.location = "m.resume.html";
+}