refactor: moodify dir arrangment

WCY-dt · Jun 1, 2024 · 560724a · 560724a
1 parent 5804b48
commit 560724a
Show file tree

Hide file tree

Showing 26 changed files with 86 additions and 24 deletions.
diff --git a/assets/noun-ball.svg → assets/_unused/noun-ball.svg b/assets/noun-ball.svg → assets/_unused/noun-ball.svg
diff --git a/assets/noun-circle.svg → assets/_unused/noun-circle.svg b/assets/noun-circle.svg → assets/_unused/noun-circle.svg
diff --git a/assets/noun-lines.svg → assets/_unused/noun-lines.svg b/assets/noun-lines.svg → assets/_unused/noun-lines.svg
diff --git a/assets/noun-mess.svg → assets/_unused/noun-mess.svg b/assets/noun-mess.svg → assets/_unused/noun-mess.svg
diff --git a/assets/noun-waves.svg → assets/_unused/noun-waves.svg b/assets/noun-waves.svg → assets/_unused/noun-waves.svg
diff --git a/icons/asterisk.svg → assets/icons/asterisk.svg b/icons/asterisk.svg → assets/icons/asterisk.svg
diff --git a/icons/bubbles.svg → assets/icons/bubbles.svg b/icons/bubbles.svg → assets/icons/bubbles.svg
diff --git a/icons/email.svg → assets/icons/email.svg b/icons/email.svg → assets/icons/email.svg
diff --git a/icons/github.svg → assets/icons/github.svg b/icons/github.svg → assets/icons/github.svg
diff --git a/icons/hurricane.svg → assets/icons/hurricane.svg b/icons/hurricane.svg → assets/icons/hurricane.svg
diff --git a/icons/smile.svg → assets/icons/smile.svg b/icons/smile.svg → assets/icons/smile.svg
diff --git a/icons/twitter.svg → assets/icons/twitter.svg b/icons/twitter.svg → assets/icons/twitter.svg
diff --git a/img/apple-touch-icon.png → assets/img/apple-touch-icon.png b/img/apple-touch-icon.png → assets/img/apple-touch-icon.png
diff --git a/img/favicon.svg → assets/img/favicon.svg b/img/favicon.svg → assets/img/favicon.svg
diff --git a/img/ogimage.png → assets/img/ogimage.png b/img/ogimage.png → assets/img/ogimage.png
diff --git a/img/twittercard.png → assets/img/twittercard.png b/img/twittercard.png → assets/img/twittercard.png
diff --git a/js/link.js → assets/js/link.js b/js/link.js → assets/js/link.js
diff --git a/js/skill.js → assets/js/skill.js b/js/skill.js → assets/js/skill.js
@@ -40,6 +40,7 @@ skills.forEach(({ category, items }, index) => {
         if (paint_white.includes(item)) {
             img.classList.add('white-img')
         }
+        img.loading = 'lazy'
         li.appendChild(img)
         ul.appendChild(li)
     })

diff --git a/styles/footer.css → assets/styles/footer.css b/styles/footer.css → assets/styles/footer.css
diff --git a/styles/home.css → assets/styles/home.css b/styles/home.css → assets/styles/home.css
diff --git a/styles/index.css → assets/styles/index.css b/styles/index.css → assets/styles/index.css
@@ -4,6 +4,7 @@
 @import url('./info.css');
 @import url('./skill.css');
 @import url('./link.css');
+@import url('./project.css');
 @import url('./footer.css');
 
 :root {

diff --git a/styles/info.css → assets/styles/info.css b/styles/info.css → assets/styles/info.css
diff --git a/styles/link.css → assets/styles/link.css b/styles/link.css → assets/styles/link.css
diff --git a/assets/styles/project.css b/assets/styles/project.css
@@ -0,0 +1,14 @@
+.project {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.project-desc {
+    display: none;
+}
+
+.project:hover .project-desc {
+    display: block;
+}
diff --git a/styles/skill.css → assets/styles/skill.css b/styles/skill.css → assets/styles/skill.css
diff --git a/index.html b/index.html
@@ -16,17 +16,17 @@
 
     <meta property="og:title" content="Homepage of Ch3nyang">
     <meta property="og:description" content="Portfolio of Ch3nyang">
-    <meta property="og:image" content="./img/ogimage.png">
-    <meta name="twitter:card" content="./img/twittercard.png">
+    <meta property="og:image" content="./assets/img/ogimage.png">
+    <meta name="twitter:card" content="./assets/img/twittercard.png">
 
-    <link rel="icon" type="image/svg+xml" href="./img/favicon.svg">
-    <link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png">
+    <link rel="icon" type="image/svg+xml" href="./assets/img/favicon.svg">
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/img/apple-touch-icon.png">
 
-    <link rel="stylesheet" href="./styles/index.css">
+    <link rel="stylesheet" href="./assets/styles/index.css">
 </head>
 
 <body>
-    <div class="home">
+    <header class="home">
         <div class="left">
             <div class="left-square">
                 <div class="square-content">
@@ -39,64 +39,110 @@
             <div class="right-square">
                 <div class="right-title">yang</div>
                 <div class="star">
-                    <img src="./icons/asterisk.svg" alt="Asterisk">
+                    <img src="./assets/icons/asterisk.svg" alt="Asterisk" loading="lazy">
                 </div>
             </div>
         </div>
-    </div>
-    <div class="info">
+    </header>
+    <main class="info">
         <div class="smile">
-            <img src="./icons/smile.svg" alt="Smile">
+            <img src="./assets/icons/smile.svg" alt="Smile" loading="lazy">
         </div>
         <div class="info-content">
             <div class="info-title">Hi there!</div>
             <div class="info-text">I'm Ch3nyang, a <u>fullstack developer</u> hailing from Southeast University, China, currently pursuing a Master's degree in Cybersecurity. I have a passion for programming, enjoy writing, and love to share.</div>
             <div class="info-text">Hope you enjoy yourself here!</div>
         </div>
-    </div>
-    <div class="skill">
+    </main>
+    <section class="skill">
         <h2>skill</h2>
-    </div>
+    </section>
     <h2>link</h2>
-    <div class="link">
+    <nav class="link">
         <a class="link-cluster cluster1" href="https://blog.ch3nyang.top">
             <div class="img">
-                <img src="./icons/hurricane.svg" alt="Hurricane">
+                <img src="./assets/icons/hurricane.svg" alt="Hurricane" loading="lazy">
             </div>
             <div class="link-title">blog</div>
             <div class="link-text">I have written blogs for years. Here you can find my notes on programming, cybersecurity, mathematics, signal processing, and life. Enjoy!</div>
         </a>
         <a class="link-cluster cluster2" href="https://mind.ch3nyang.top">
             <div class="img">
-                <img src="./icons/bubbles.svg" alt="Bubbles">
+                <img src="./assets/icons/bubbles.svg" alt="Bubbles" loading="lazy">
             </div>
             <div class="link-title">mindclip</div>
             <div class="link-text">There are so many techical articles, opinions, and thoughts on the Internet. Here I collect some interesting ones to share with you.</div>
         </a>
-    </div>
-    <div class="footer">
+    </nav>
+<!--
+    <section class="project">
+        <h2>project</h2>
+        <div class="project-content">
+            <div class="project-cluster">
+                <div class="project-info">
+                    <span>Project 1</span>
+                    <div class="project-tech">
+                        <span>Python</span>
+                        <span>Flask</span>
+                        <span>MySQL</span>
+                    </div>
+                </div>
+                <p class="project-desc">
+                    A simple blog system based on Flask. It supports markdown and code highlighting. The backend is implemented with MySQL.
+                </p>
+            </div>
+            <div class="project-cluster">
+                <div class="project-info">
+                    <span>Project 2</span>
+                    <div class="project-tech">
+                        <span>Python</span>
+                        <span>Flask</span>
+                        <span>SQLite</span>
+                    </div>
+                </div>
+                <p class="project-desc">
+                    A simple blog system based on Flask. It supports markdown and code highlighting. The backend is implemented with SQLite.
+                </p>
+            </div>
+            <div class="project-cluster">
+                <div class="project-info">
+                    <span>Project 3</span>
+                    <div class="project-tech">
+                        <span>Python</span>
+                        <span>Flask</span>
+                        <span>PostgreSQL</span>
+                    </div>
+                </div>
+                <p class="project-desc">
+                    A simple blog system based on Flask. It supports markdown and code highlighting. The backend is implemented with PostgreSQL.
+                </p>
+            </div>        
+        </div>
+    </section>
+-->
+    <footer class="footer">
         <div class="job">
             available for hire currently!
         </div>
         <ul>
             <li><a href="https://github.com/WCY-dt">
-                <img src="./icons/github.svg" alt="GitHub">
+                <img src="./assets/icons/github.svg" alt="GitHub" loading="lazy">
                 <span>GitHub</span>
             </a></li>
             <li><a href="mailto:[email protected]">
-                <img src="./icons/email.svg" alt="Email">
+                <img src="./assets/icons/email.svg" alt="Email" loading="lazy">
                 <span>Email</span>
             </a></li>
             <li><a href="https://twitter.com/ch3nyang">
-                <img src="./icons/twitter.svg" alt="Twitter">
+                <img src="./assets/icons/twitter.svg" alt="Twitter" loading="lazy">
                 <span>Twitter</span>
             </a></li>
         </ul>
         <div class="footer-text">© 2024 Ch3nyang. All rights reserved.</div>
-    </div>
+    </footer>
 </body>
 
-<script src="./js/skill.js"></script>
-<script src="./js/link.js"></script>
+<script src="./assets/js/skill.js"></script>
+<script src="./assets/js/link.js"></script>
 
 </html>