25/1/6

docs/about/assets/stylesheets/portfolio.css

@@ -0,0 +1,577 @@
+:root {
+    --header-height: 3rem;
+
+    /*========== Colors ==========*/
+    --first-color: #608DBD;
+    --first-color-second: #608DBD;
+    --first-color-alt: #608DBD;
+    --first-color-lighter: #608DBD;
+
+    --title-color: #608DBD;
+    --text-color: #080505;
+    --text-color-light: #f5ab17;
+
+    --input-color: #F5EEE3;
+    --body-color: #FDFBF8;
+    --container-color: #FFFFFF;
+
+    /*========== Font and typography ==========*/
+    --big-font-size: 2rem;
+    --h1-font-size: 1.5rem;
+    --h2-font-size: 1.25rem;
+    --h3-font-size: 1.125rem;
+    --normal-font-size: .938rem;
+    --small-font-size: .813rem;
+    --smaller-font-size: .75rem;
+
+    /*========== Font weight ==========*/
+    --font-medium: 500;
+    --font-semi-bold: 600;
+
+    /*========== Margenes Bottom ==========*/
+    --mb-0-25: .25rem;
+    --mb-0-5: .5rem;
+    --mb-0-75: .75rem;
+    --mb-1: 1rem;
+    --mb-1-5: 1.5rem;
+    --mb-2: 2rem;
+    --mb-2-5: 2.5rem;
+    --mb-3: 3rem;
+
+    /*========== z index ==========*/
+    --z-tooltip: 10;
+    --z-fixed: 100;
+    --z-modal: 1000;
+}
+
+/* Font size for large devices */
+@media screen and (min-width: 968px) {
+    :root {
+        --big-font-size: 3rem;
+        --h1-font-size: 2.25rem;
+        --h2-font-size: 1.5rem;
+        --h3-font-size: 1.25rem;
+        --normal-font-size: 1rem;
+        --small-font-size: .875rem;
+        --smaller-font-size: .813rem;
+    }
+}
+
+/*==================== BASE ====================*/
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+h1, h2, h3, h4 {
+  color: var(--title-color);
+  font-weight: var(--font-semi-bold);
+}
+
+/*==================== REUSABLE CSS CLASSES ====================*/
+.section__title {
+  font-size: var(--h1-font-size);
+  color: var(--title-color);
+}
+
+.section__subtitle {
+  display: block;
+  font-size: var(--small-font-size);
+  margin-bottom: var(--mb-3);
+}
+
+.section__title,
+.section__subtitle {
+  text-align: center;
+}
+
+/*==================== LAYOUT ====================*/
+.container {
+  max-width: 768px;
+  margin-left: var(--mb-1-5);
+  margin-right: var(--mb-1-5);
+}
+
+.grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.header {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: var(--z-fixed);
+  background-color: var(--body-color);
+}
+
+/*==================== HOME ====================*/
+.home__container {
+  gap: 1rem;
+}
+
+.home__content{
+  grid-template-columns: .5fr 3fr;
+  padding-top: 3.5rem;
+  align-items: center;
+}
+
+.home__social{
+  grid-template-columns: max-content;
+  row-gap: 1rem;
+}
+
+.home__social-icon{
+  font-size: 1.25rem;
+}
+
+.home__social-icon:hover {
+  color: var(--first-color-alt);
+}
+
+.home__title{
+  font-size: var(--big-font-size);
+}
+
+.home__subtitle{
+  margin-bottom: var(--h3-font-size);
+  color: var(--text-color);
+  font-weight: var(--font-medium);
+  margin-bottom: var(--mb-0-75);
+}
+
+.home__description{
+  margin-bottom: var(--mb-2);
+}
+
+/*==================== BUTTONS ====================*/
+.button{
+  display: inline-block;
+  background-color: var(--first-color-alt);
+  color: #fff;
+  padding: 1rem;
+  border-radius: .5rem;
+  font-weight: var(--font-medium);
+}
+
+.button:hover {
+  background-color: var(--first-color-alt);
+}
+
+.button__icon{
+  font-size: 1.25rem;
+  margin-right: var(--mb-0-5);
+  transition: .3s;
+  color: #FFF;
+}
+
+.button--flex{
+  display: inline-flex;
+  align-items: center;
+}
+
+.button--small{
+  padding: .75rem 1rem;
+}
+
+.button--link{
+  padding: 0;
+  background-color: transparent;
+  color: var(--first-color);
+}
+
+.button--link:hover {
+  background-color: transparent;
+  color: var(--first-color-alt);
+}
+
+/*==================== ABOUT ====================*/
+.about__img{
+  width: 400px;
+  border-radius: .5rem;
+  justify-self: center;
+  align-self: center;
+}
+
+.about__description{
+  text-align: center;
+  margin-bottom: var(--mb-2-5);
+}
+
+.about__info{
+  display: flex;
+  justify-content: space-evenly;
+  margin-bottom: var(--mb-2-5);
+}
+
+.about__info-title{
+  font-size: var(--h2-font-size);
+  font-weight: var(--font-semi-bold);
+  color: var(--title-color);
+}
+
+.about__info-name{
+  font-size: var(--smaller-font-size);
+}
+
+.about__info-title,
+.about__info-name{
+  display: block;
+  text-align: center;
+}
+
+.about__buttons{
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/*==================== SKILLS ====================*/
+.skills__container{
+  row-gap: 0;
+}
+
+.skills__header{
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--mb-2-5);
+  cursor: pointer;
+}
+
+.skills__icon,
+.skills__arrow{
+  font-size: 2rem;
+  color: var(--md-primary-fg-color);
+}
+
+.skills__icon{
+  margin-right: var(--mb-0-75);
+}
+
+.skills__title{
+  font-size: var(--h3-font-size);
+}
+
+.skills_subtitle{
+  font-size: var(--small-font-size);
+  color: var(--text-color-light);
+}
+
+.skills__arrow{
+  margin-left: auto;
+  transition: .4s;
+}
+
+.skills__list{
+  row-gap: 1.5rem;
+  padding-left: 2.7rem;
+}
+
+.skills__titles{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--mb-0-5);
+}
+
+.skills__name{
+  font-size: var(--normal-font-size);
+  font-weight: var(--font-medium);
+}
+
+.skills__number{
+  margin-top: var(--mb-2-5);
+}
+
+.skills__bar,
+.skills__percentage{
+  height: 5px;
+  border-radius: .25rem;
+}
+
+.skills__bar{
+  background-color: var(--first-color-lighter);
+}
+
+.skills__percentage{
+  display: block;
+  background-color: var(--first-color);
+}
+
+.skills__fastapi{
+  width: 90%;
+}
+
+.skills__django{
+  width: 85%;
+}
+
+.skills__flask{
+  width: 75%;
+}
+
+.skills__spring{
+  width: 75%;
+}
+
+.skills__androidjava{
+  width: 70%;
+}
+
+.skills__androidkotlin{
+  width: 60%;
+}
+
+.skills__flutter{
+  width: 60%;
+}
+
+.skills__aws{
+  width: 80%;
+}
+
+.skills__azure{
+  width: 75%;
+}
+
+.skills__oc{
+  width: 70%;
+}
+
+.skills__cicd{
+  width: 75%;
+}
+
+.skills__close .skills__list{
+  height: 0;
+  overflow: hidden;
+}
+
+.skills__open .skills__list{
+  height: max-content;
+  margin-bottom: var(--mb-2-5);
+}
+
+.skills__open .skills__arrow{
+  transform: rotate(-180deg);
+}
+
+/*==================== QUALIFICATION ====================*/
+.qualification__tabs{
+  display: flex;
+  justify-content: space-evenly;
+  margin-bottom: var(--mb-2);
+}
+
+.qualification__button{
+  font-size: var(--h3-font-size);
+  font-weight: var(--font-medium);
+  cursor: pointer;
+}
+
+.qualification__button:hover {
+  color: var(--first-color);
+}
+
+.qualification__icon{
+  font-size: 1.8rem;
+  margin-right: var(--mb-0-25);
+}
+
+.qualification__data{
+  display: grid;
+  grid-template-columns: 1.5fr max-content 1.5fr;
+  column-gap: 1.5rem;
+}
+
+.qualification__title{
+  font-size: var(--normal-font-size);
+  font-weight: var(--font-medium);
+}
+
+.qualification__subtitle{
+  display: inline-block;
+  font-size: var(--smaller-font-size);
+  margin-bottom: var(--mb-1);
+}
+
+.qualification__calendar{
+  font-size: var(--smaller-font-size);
+  color: var(--md-primary-fg-color--dark);
+}
+
+.qualification__rounder{
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  background-color: var(--md-primary-fg-color);
+  border-radius: 50%;
+}
+
+.qualification__line{
+  display: block;
+  width: 1px;
+  height: 100%;
+  background-color: var(--md-primary-fg-color);
+  transform: translate(6px, -7px);
+}
+
+.qualification [data-content]{
+  display: none;
+}
+
+.qualification__active[data-content]{
+  display: block;
+}
+
+.qualification__button.qualification__active{
+  color: var(--first-color);
+}
+
+/*==================== MEDIA QUERIES ====================*/
+/* For small devices */
+@media screen and (max-width: 350px){
+  .container{
+    margin-left: var(--mb-1);
+    margin-right: var(--mb-1);
+  }
+
+  .home__content{
+    grid-template-columns: .25fr 3fr;
+  }
+  .home__blob{
+    width: 180px;
+  }
+
+  .skills__title{
+    font-size: var(--normal-font-size);
+  }
+
+  .qualification__data{
+    gap: .5rem;
+  }
+}
+
+/* For medium devices */
+@media screen and (min-width: 568px){
+  .home__content{
+    grid-template-columns: max-content 1fr 1fr;
+  }
+  .home__data{
+    grid-column: initial;
+  }
+  .home__img{
+    order: 1;
+    justify-self: center;
+  }
+
+  .skills__container,
+  .about__container,
+  .portfolio__content,
+  .project__container{
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .qualification__sections{
+    display: grid;
+    grid-template-columns: 6fr;
+    justify-content: center;
+  }
+}
+
+@media screen and (min-width: 768px){
+  .container{
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  body{
+    margin: 0;
+  }
+
+  .section{
+    padding: 6rem 0 2rem;
+  }
+  .section__subtitle{
+    margin-bottom: 4rem;
+  }
+
+  .header{
+    top: 0;
+    bottom: initial;
+  }
+
+  .header,
+  .main{
+    padding: 0 1rem;
+  }
+
+  .home__container{
+    row-gap: 5rem;
+  }
+  .home__content{
+    padding-top: 5.5rem;
+    column-gap: 2rem;
+  }
+  .home__blob{
+    width: 270px;
+  }
+  .home__scroll{
+    display: block;
+  }
+  .home__scroll-button{
+    margin-left: 3rem;
+  }
+
+  .about__container{
+    column-gap: 5rem;
+  }
+  .about__img{
+    width: 350px;
+  }
+  .about__description{
+    text-align: initial;
+  }
+  .about__info{
+    justify-content: space-between;
+  }
+  .about__buttons{
+    justify-content: initial;
+  }
+
+  .qualification__tabs{
+    justify-content: center;
+  }
+  .qualification__button{
+    margin: 0 var(--mb-1);
+  }
+  .qualification__sections{
+    grid-template-columns: .5fr;
+  }
+}
+
+/* For large devices */
+@media screen and (min-width: 1024px){
+  .header,
+  .main{
+    padding: 0;
+  }
+
+  .home__blob{
+    width: 320px;
+  }
+  .home__social{
+    transform: translateX(-6rem);
+  }
+  .qualification__sections{
+    display: grid;
+    grid-template-columns: 6fr;
+    justify-content: center;
+  }
+}

docs/about/geren.md

@@ -3,13 +3,13 @@ hide:
 #   - navigation
   # - toc
   - feedback
+  - footer
 status: new
 ---
 <center>
-<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
+    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
 </center>
 
-
 # <span id="jinrishici-sentence">今日诗词</span>
 
 <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
@@ -18,24 +18,143 @@ status: new
   href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
 />
 
+## 关于我
 
-<!-- <img class="img1" src="https://s2.loli.net/2024/02/01/AgiGpYk38C6ctJV.jpg"> -->
 
+
+<html lang="en">
 <p style="text-align: center; margin: 0px;" markdown>
-  <img src="https://s1.imagehub.cc/images/2024/02/02/79cb7379982d1c7bb0ae7163985609c4.jpeg" alt="arv-anshul" style="width: 300px; border-radius: 50%;" />
+  <img src="https://s1.imagehub.cc/images/2025/01/04/158948b0002cdac6e9ff43986648cb83.png" alt="arv-anshul" style="width: 300px; border-radius: 50%;" />
-  <p style="text-align: center; font-size: 30px; margin: 0px;"><strong>Wcowin</strong></p>
+  <!-- ![image](https://s1.imagehub.cc/images/2025/01/04/158948b0002cdac6e9ff43986648cb83.png) -->
   <p style="text-align: center; font-size: 30px; margin: 0px;"><strong>A college student in Chongqing</strong></p>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
+        <link rel="stylesheet" href="../assets/stylesheets/portfolio.css">
+    </head>
+    <body>
+        <main class="main">
+            <section class="about section" id="about">
+                <div class="about__container container">
+                    <div class="about__data">
+                            <p style="text-align: center; margin: 0px;" markdown></p>
+                        <div class="about__info">
+                            <div>
+                                <span class="about__info-title">01+</span>
+                                <span class="about__info-name">工作经验</span>
+                            </div>
+                            <div>
+                                <span class="about__info-title">03+</span>
+                                <span class="about__info-name">已经完成的项目</span>
+                            </div>
+                            <div>
+                                <span class="about__info-title">02+</span>
+                                <span class="about__info-name">贡献的开源</span>
+                            </div>
+                        </div>
+            </section>
+                </body>
+</html>
+<center>[下载简历 :fontawesome-solid-download:](个人简历.pdf){.md-button target=“_blank”}</center>
+
+---
+## 个人履历
+
+<html lang="en">
+<body>
+    <!--==================== QUALIFICATION ====================-->
+    <section class="qualification section">
+        <!-- <h2 class="section__title"></h2> -->
+        <div class="qualification__container container">
+            <div class="qualification__tabs">
+                <div class="qualification__button button--flex qualification__active" data-target='#education'>
+                    <iconify-icon icon="fluent:hat-graduation-12-regular" class="qualification__icon"></iconify-icon>
+                    来时路
+                </div>
+                <!-- <div class="qualification__button button--flex" data-target='#work'>
+                            <iconify-icon icon="uil:briefcase" class="qualification__icon"></iconify-icon>
+                            Work
+                        </div> -->
+            </div>
+            <div class="qualification__sections">
+                <!--==================== QUALIFICATION CONTENT 1 ====================-->
+                <div class="qualification__content qualification__active" data-content id="education">
+                    <!--==================== QUALIFICATION 1 ====================-->
+                    <div class="qualification__data">
+                        <div>
+                            <h3 class="qualification__title">漯河高中</h3>
+                            <span class="qualification__subtitle">平凡的三年</span>
+                            <div class="qualification__calendar">
+                                <iconify-icon icon="tabler:calendar"></iconify-icon>
+                                2018 - 2021
+                            </div>
+                        </div>
+                        <div>
+                            <span class="qualification__rounder"></span>
+                            <span class="qualification__line"></span>
+                        </div>
+                    </div>
+                    <!--==================== QUALIFICATION 2 ====================-->
+                    <div class="qualification__data">
+                        <div></div>
+                        <div>
+                            <span class="qualification__rounder"></span>
+                            <span class="qualification__line"></span>
+                        </div>
+                        <div>
+                            <h3 class="qualification__title">CTBU</h3>
+                            <span class="qualification__subtitle">电子信息工程专业学士</span>
+                            <div class="qualification__calendar">
+                                <iconify-icon icon="tabler:calendar"></iconify-icon>
+                                2021 - 2024
+                            </div>
+                        </div>
+                    </div>
+                    <!--==================== QUALIFICATION 3 ====================-->
+                    <div class="qualification__data">
+                        <div>
+                            <h3 class="qualification__title">西安电子科技大学（待定）</h3>
+                            <span class="qualification__subtitle">网络空间安全专业硕士研究生</span>
+                            <div class="qualification__calendar">
+                                <iconify-icon icon="tabler:calendar"></iconify-icon>
+                                2024 - 2027
+                            </div>
+                        </div>
+                        <div>
+                            <span class="qualification__rounder"></span>
+                            <span class="qualification__line"></span>
+                          </div>
+                        </div>
+                    </div>
+                    <!--==================== QUALIFICATION 4 ====================-->
+                    <div class="qualification__data">
+                        <div></div>
+                        <div>
+                            <span class="qualification__rounder"></span>
+                            <span class="qualification__line"></span>
+                        </div>
+                        <div>
+                            <h3 class="qualification__title">未完待续</h3>
+                            <span class="qualification__subtitle">在路上，永远热泪盈眶</span>
+                            <div class="qualification__calendar">
+                                <iconify-icon icon="tabler:calendar"></iconify-icon>
+                                Before - After
+                            </div>
+                          </div>
+                        </div>
+      </div>
+    </section>
+</body>
+</html>
+
+<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#608DBD,direction:145,strength:15)" width="100%" color=#608DBD SIZE=1>
+
+  <p style="text-align: center; font-size: 25px; margin: 0px;"><strong>𝘿𝙤𝙣'𝙩 𝙘𝙖𝙧𝙚 𝙖𝙗𝙤𝙪𝙩 𝙬𝙤𝙧𝙡𝙙𝙡𝙮 𝙚𝙮𝙚𝙨 𝙩𝙤 𝙥𝙪𝙧𝙨𝙪𝙚 𝙮𝙤𝙪𝙧 𝙤𝙬𝙣 𝙡𝙞𝙜𝙝𝙩</strong></p>
 </p>
+<!-- https://s1.imagehub.cc/images/2024/02/02/79cb7379982d1c7bb0ae7163985609c4.jpeg -->
 
-
+<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#608DBD,direction:145,strength:15)" width="100%" color=#608DBD SIZE=1>
-<!-- <div id="rcorners3" >
-  <img class="img1" src="https://s1.imagehub.cc/images/2024/02/02/79cb7379982d1c7bb0ae7163985609c4.jpeg"  width="170" height="200" alt="个人头像" align="left" style="margin-right: 20px; "/>
-  <div>
-    <p style="font-size: 40px">Wcowin</p>
-    <p style="font-size: 18px">A college student in CQ</p>
-  </div>
-</div> -->
-   
 
 !!! pied-piper1 "About me"
     - [x] Hey, I'm [Wcowin](https://bento.me/wcowin){target=“_blank”}!
@@ -47,50 +166,51 @@ status: new
 
 ## 联系我
 
-<a href="https://muselink.cc/Wcowin" target="_blank">
+<a href="https://s1.imagehub.cc/images/2024/02/02/bb9ee71b03ee7a3b87caad5cc4bcebff.jpeg" target="_blank">
-  <img class="img1" src="https://s1.imagehub.cc/images/2024/02/02/3d5a68d9ca0da9137d927bda1a0b41e7.jpeg"  >
+ <center>
-  <center>
+  <img class="img1" src="https://s1.imagehub.cc/images/2024/02/02/bb9ee71b03ee7a3b87caad5cc4bcebff.jpeg" style="width: 450px; height: auto;">
     <div style="color:orange; 
     color: #999;
-    padding: 2px;">我的名片</div>
+    padding: 2px;">我的Wechat</div>
   </center>  
 </a>
 
-<figure markdown >
+<a href="https://t.me/wecowin" target="_blank">
-  ![Image title](https://s1.imagehub.cc/images/2024/02/02/43c746351261969a02bda7d743199604.jpeg){.img1}
+ <center>
-  <figcaption>公众号</figcaption>
+  <img class="img1" src="https://s1.imagehub.cc/images/2025/01/04/ece1374f25a07c060978165ada287fae.png" style="width: 450px; height: auto;">
-</figure>
+    <div style="color:orange; 
+    color: #999;
+    padding: 2px;">我的TG</div>
+  </center>  
+</a>
 
-## 个人简历
+??? tip "公众号"
-[个人简历(在线)](https://cv.devtool.tech/preview/76751620-faad-4537-bffd-73ced6ee9671)
+    <figure markdown >
+    ![Image title](https://s1.imagehub.cc/images/2025/01/04/ac7fda1814bb1e18714f9dd9f5d87636.png){.img1}
+    <figcaption>公众号</figcaption>
+    </figure>
 
-## 个人技能
+<!-- ## 个人简历
-本人擅长 Ai、Fw、Fl、Br、Ae、Pr、Id、Ps 等软件的安装与卸载。  
+
+<div class="grid cards" markdown>
+
+-   :octicons-bookmark-16:{ .lg .middle } __求实习(25届)__
+
+    ---
+
+    [个人简历(在线)](https://cv.devtool.tech/preview/76751620-faad-4537-bffd-73ced6ee9671){target=“_blank”}
+</div> -->
+
+<!-- ## 个人技能
+**本人擅长 Ai、Fw、Fl、Br、Ae、Pr、Id、Ps 等软件的安装与卸载。  
 精通 CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、Python、Objective-C、ActionScript、Pascal 等单词的拼写。  
-熟悉 Windows、Linux、OS X、Android、iOS、WP8 、harmony、hyper等系统的开关机。
+熟悉 Windows、Linux、OS X、Android、iOS、WP8 、harmony、hyper等系统的开关机。**
+![](https://s3.uuu.ovh/imgs/2024/07/04/82b473abd2059779.png){loading=lazy  class="img1"  width="90%"}   -->
 
-## 个人荣誉
+<!-- ## 个人荣誉
-![IMG_9007.jpeg](https://s2.loli.net/2024/02/03/RH5jOlZqdITAcw8.jpg){loading=lazy  class="img1"  }  
+![IMG_9007.jpeg](https://s2.loli.net/2024/02/03/RH5jOlZqdITAcw8.jpg){loading=lazy  class="img1"  }   -->
 
 
-<head>
-
-<script>
-function _howxm(){_howxmQueue.push(arguments)}
-window._howxmQueue=window._howxmQueue||[];
-_howxm('setAppID','14429fca-cac1-4551-a472-b046a96ebb75');
-(function(){var scriptId='howxm_script';
-if(!document.getElementById(scriptId)){
-var e=document.createElement('script'),
-t=document.getElementsByTagName('script')[0];
-e.setAttribute('id',scriptId);
-e.type='text/javascript';e.async=!0;
-e.src='https://static.howxm.com/sdk.js';
-t.parentNode.insertBefore(e,t)}})();
-</script>
-
-</head>
-
 ## 须知
 如果你在浏览博客的过程中发现了任何问题，欢迎前往 GitHub 的[代码仓库](https://github.com/Wcowin/Wcowin.github.io)提交 [Issues](https://github.com/Wcowin/Wcowin.github.io/issues) 或直接修改相关文件后提交 Pull Requests。如果你有其他事情想要咨询，可以通过下方按钮使用邮件联系我,请不要滥用博客的评论功能发表与主题无关言论。
 
@@ -100,6 +220,4 @@ t.parentNode.insertBefore(e,t)}})();
     [Send Email :fontawesome-solid-paper-plane:](mailto:<wangkewen821@gmail.com>){.md-button}  
 
 
-<!-- <a target="_blank"  href="mailto:wangkewen821@gmail.com""><button class="buttonxuan2" style="vertical-align:middle" ><span>Send Email:fontawesome-solid-paper-plane: </span></button></a> -->
-
 <!-- <chat-bot platform_id="d19a99ed-b684-4d64-8c70-7663d974af17" user_id="325b3ae2-0317-4c5f-9f9b-c4ce0e51e36b" chatbot_id="8eedef48-41ef-4f78-97d9-71e8197a452d"><a href="https://www.chatsimple.ai/?utm_source=widget&utm_medium=referral">[chatbot]</a></chat-bot><script src="https://cdn.chatsimple.ai/chat-bot-loader.js" defer></script> -->

docs/about/link.md

@@ -34,7 +34,7 @@ t.parentNode.insertBefore(e,t)}})();
   <div class="links-content"> 
    <div class="link-navigation"> 
     <div class="card"> 
-     <img class="ava" src="https://s2.loli.net/2024/02/01/gaE47y5fKM6kosV.png" /> 
+     <img class="ava" src="https://s1.imagehub.cc/images/2025/01/05/64eafdf8c27f482c7ecb83003d460d6a.webp" /> 
      <div class="card-header"> 
       <div> 
        <a href="https://wcowin.work/ " target="_blank">Wcowin's Web</a> 

docs/blog/.authors.yml

@@ -2,4 +2,4 @@ authors:
   Wcowin:
     name: Wang Kewen    # Author name
     description: Free and casual # Author description
-    avatar: https://s1.imagehub.cc/images/2024/02/02/79cb7379982d1c7bb0ae7163985609c4.jpeg # Author avatar
+    avatar: https://s1.imagehub.cc/images/2025/01/05/64eafdf8c27f482c7ecb83003d460d6a.webp # Author avatar

docs/blog/Mkdocs/mkdocs1.md

@@ -5,10 +5,10 @@ tags:
 ---
 
 !!! info
-    Material for MkDocs官方网站：[MkDocs](https://www.mkdocs.org/){target=“_blank”}
+    Material for MkDocs官方网站: [Material for MkDocs](https://www.mkdocs.org/)  
-
+    MkDocs中文文档: [MkDocs中文文档](https://hellowac.github.io/mkdocs-docs-zh/)
 ---
-有条件的话，推荐看下这个视频：  
+推荐看下这个视频：  
 :fontawesome-brands-youtube:{ style="color: #EE0F0F" }
 __[How to set up Material for MkDocs]__ by @james-willett – :octicons-clock-24:
 15m – Learn how to create and host a documentation site using Material for
@@ -22,9 +22,7 @@ MkDocs on GitHub Pages in a step-by-step guide.
 
 1.下载[Github Desktop](https://github.com/desktop/desktop){target=“_blank”}
 
-2.一个GitHub账号   
+ 2.有一个GitHub账号​​​​​​​(有手就行)
-
-
 ***
 ## 二、Creating your site
 
@@ -193,7 +191,7 @@ mkdocs serve
 **去仓库的setings/pages选择下图示意的路径**
 ![](https://s1.imagehub.cc/images/2024/02/02/64a25964ef4e99e4b580084daec10662.png)  
 
-等待一会网址就出来了  
+等待一会网址就出来了[^注]  
 
 你的网站网址就是：​
 
@@ -203,6 +201,14 @@ https://你github的名字.github.io/
 ```
 ![img](https://s1.imagehub.cc/images/2024/02/02/7f149d6da7ecc6364d86c9517b2c4624.png)
 
-下次谈谈网站的[mkdocs.yml具体配置](mkdocs2.md)[^注]
+下次谈谈网站的[mkdocs.yml具体配置](mkdocs2.md)
 
 [^注]:于2023.3.24重写此文
+
+## 四、参考资料
+
+1. [MkDocs官网](https://www.mkdocs.org/)
+2. [MkDocs中文文档](https://hellowac.github.io/mkdocs-docs-zh/)
+3. [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/)
+4. [Mkdocs 配置和使用](https://zhuanlan.zhihu.com/p/383582472)
+5. [Deploy MkDocs](https://github.com/marketplace/actions/deploy-mkdocs)

docs/blog/posts/update2025.md

@@ -0,0 +1,17 @@
+---
+title: 2025网站更新记录
+authors: [Wcowin]
+date: 2025-01-01
+categories:
+  - 网站更新记录
+readtime: 2
+---
+
+## </p><h1 id="01" name="01"><strong>2025-01-05</strong></h1><p>
+* 优化网站流畅度（玄学）
+* 重写部分代码
+
+## </p><h1 id="01" name="01"><strong>2025-01-05</strong></h1><p>
+* 优化网站流畅度（玄学）
+* 大幅提升性能，加载速度更快
+  ![image](https://s1.imagehub.cc/images/2025/01/05/7164642e16ff90239bee5c46709ad50f.png)

docs/index.md

@@ -76,71 +76,45 @@ ____    __    ____  ______   ______   ____    __    ____  __  .__   __.
 
 
 <div id="rcorners2" >
-  <div id="rcorners1">
+
-    <!-- <i class="fa fa-calendar" style="font-size:100"></i> -->
+<div id="rcorners1" class="date-display">
-    <body>
+    <p class="p1"></p>
-      <font color="#4351AF">
+</div>
-        <p class="p1"></p>
+
-<script defer>
+<style>
-    //格式：2020年04月12日 10:20:00 星期二
+    .date-display {
-    function format(newDate) {
+        color: #4351AF;
-        var day = newDate.getDay();
-        var y = newDate.getFullYear();
-        var m =
-            newDate.getMonth() + 1 < 10
-                ? "0" + (newDate.getMonth() + 1)
-                : newDate.getMonth() + 1;
-        var d =
-            newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate();
-        var h =
-            newDate.getHours() < 10 ? "0" + newDate.getHours() : newDate.getHours();
-        var min =
-            newDate.getMinutes() < 10
-                ? "0" + newDate.getMinutes()
-                : newDate.getMinutes();
-        var s =
-            newDate.getSeconds() < 10
-                ? "0" + newDate.getSeconds()
-                : newDate.getSeconds();
-        var dict = {
-            1: "一",
-            2: "二",
-            3: "三",
-            4: "四",
-            5: "五",
-            6: "六",
-            0: "天",
-        };
-        //var week=["日","一","二","三","四","五","六"]
-        return (
-            y +
-            "年" +
-            m +
-            "月" +
-            d +
-            "日" +
-            " " +
-            h +
-            ":" +
-            min +
-            ":" +
-            s +
-            " 星期" +
-            dict[day]
-        );
     } 
-    var timerId = setInterval(function () {
+</style>
-        var newDate = new Date();
+
-        var p1 = document.querySelector(".p1");
+<script defer>
-        if (p1) {
+    function format(newDate) {
-            p1.textContent = format(newDate);
+        const options = {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            weekday: 'long',
+            hour12: false
+        };
+        return new Intl.DateTimeFormat('zh-CN', options).format(newDate);
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const p1 = document.querySelector(".p1");
+        function updateTime() {
+            const newDate = new Date();
+            if (p1) {
+                p1.textContent = format(newDate);
+            }
+            requestAnimationFrame(updateTime);
         }
-    }, 1000);
+        updateTime();
+    });
 </script>
-      </font>
+  
-    </body>
-    <!-- <b><span id="time"></span></b> -->
-  </div>
   <ul>
     <li>通过主题和目录以打开文章</li>
     <ul>
@@ -153,7 +127,6 @@ ____    __    ____  ______   ______   ____    __    ____  __  .__   __.
     </li>
   </ul>
 </div> 
-
 <!-- - 基于Material for MkDocs美化
 - 简洁美观，功能多元化
 - 简单易上手，小白配置

docs/liuyanban.md

@@ -17,7 +17,7 @@ comments: true
   </div>
 
 
-<div id="rcorners5" >
+<!-- <div id="rcorners5" >
 <div id="cusdis_thread"
   data-host="https://cusdis.com"
   data-app-id="655cf3bc-734a-4d88-8317-be350621334c"
@@ -27,4 +27,4 @@ comments: true
 ></div>
 <script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
 <script defer src="https://cusdis.com/js/widget/lang/zh-cn.js"></script>
-</div>
+</div> -->

docs/overrides/assets/stylesheets/custom.00c04c01.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/overrides/assets/stylesheets/custom/_typeset.scss","../../../../src/overrides/assets/stylesheets/custom.scss","src/templates/assets/stylesheets/utilities/_break.scss","src/overrides/assets/stylesheets/custom/layout/_banner.scss","src/overrides/assets/stylesheets/custom/layout/_hero.scss","src/overrides/assets/stylesheets/custom/layout/_iconsearch.scss","src/overrides/assets/stylesheets/custom/layout/_sponsorship.scss"],"names":[],"mappings":"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","file":"custom.css"}

docs/stylesheets/extra.css

@@ -239,14 +239,15 @@ width: auto;
 
 /*圆角*/
 #rcorners1 {
-border-radius: 25px;
+  border-radius: 25px;
-background: linear-gradient(to right, rgba(189,224,245),rgba(218,232,241), rgba(238,237,238));
+  background: linear-gradient(to right, rgba(189, 224, 245), rgba(218, 232, 241), rgba(238, 237, 238));
-/* #F0EFEB; F5F4F1*/
+  /* #F0EFEB; F5F4F1*/
-padding: 20px; 
+  padding: 20px;
-width: 100%;
+  width: 100%;
-height: 100px;
+  height: 100px;
-text-align: center;
+  text-align: center;
-font-size:16px;
+  align-items: center; /* 垂直居中 */
+  font-size: 16px;
 }
 
 

docs/stylesheets/portfolio.css

@@ -0,0 +1,577 @@
+:root {
+    --header-height: 3rem;
+
+    /*========== Colors ==========*/
+    --first-color: #608DBD;
+    --first-color-second: #608DBD;
+    --first-color-alt: #608DBD;
+    --first-color-lighter: #608DBD;
+
+    --title-color: #608DBD;
+    --text-color: #080505;
+    --text-color-light: #f5ab17;
+
+    --input-color: #F5EEE3;
+    --body-color: #FDFBF8;
+    --container-color: #FFFFFF;
+
+    /*========== Font and typography ==========*/
+    --big-font-size: 2rem;
+    --h1-font-size: 1.5rem;
+    --h2-font-size: 1.25rem;
+    --h3-font-size: 1.125rem;
+    --normal-font-size: .938rem;
+    --small-font-size: .813rem;
+    --smaller-font-size: .75rem;
+
+    /*========== Font weight ==========*/
+    --font-medium: 500;
+    --font-semi-bold: 600;
+
+    /*========== Margenes Bottom ==========*/
+    --mb-0-25: .25rem;
+    --mb-0-5: .5rem;
+    --mb-0-75: .75rem;
+    --mb-1: 1rem;
+    --mb-1-5: 1.5rem;
+    --mb-2: 2rem;
+    --mb-2-5: 2.5rem;
+    --mb-3: 3rem;
+
+    /*========== z index ==========*/
+    --z-tooltip: 10;
+    --z-fixed: 100;
+    --z-modal: 1000;
+}
+
+/* Font size for large devices */
+@media screen and (min-width: 968px) {
+    :root {
+        --big-font-size: 3rem;
+        --h1-font-size: 2.25rem;
+        --h2-font-size: 1.5rem;
+        --h3-font-size: 1.25rem;
+        --normal-font-size: 1rem;
+        --small-font-size: .875rem;
+        --smaller-font-size: .813rem;
+    }
+}
+
+/*==================== BASE ====================*/
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+h1, h2, h3, h4 {
+  color: var(--title-color);
+  font-weight: var(--font-semi-bold);
+}
+
+/*==================== REUSABLE CSS CLASSES ====================*/
+.section__title {
+  font-size: var(--h1-font-size);
+  color: var(--title-color);
+}
+
+.section__subtitle {
+  display: block;
+  font-size: var(--small-font-size);
+  margin-bottom: var(--mb-3);
+}
+
+.section__title,
+.section__subtitle {
+  text-align: center;
+}
+
+/*==================== LAYOUT ====================*/
+.container {
+  max-width: 768px;
+  margin-left: var(--mb-1-5);
+  margin-right: var(--mb-1-5);
+}
+
+.grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.header {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: var(--z-fixed);
+  background-color: var(--body-color);
+}
+
+/*==================== HOME ====================*/
+.home__container {
+  gap: 1rem;
+}
+
+.home__content{
+  grid-template-columns: .5fr 3fr;
+  padding-top: 3.5rem;
+  align-items: center;
+}
+
+.home__social{
+  grid-template-columns: max-content;
+  row-gap: 1rem;
+}
+
+.home__social-icon{
+  font-size: 1.25rem;
+}
+
+.home__social-icon:hover {
+  color: var(--first-color-alt);
+}
+
+.home__title{
+  font-size: var(--big-font-size);
+}
+
+.home__subtitle{
+  margin-bottom: var(--h3-font-size);
+  color: var(--text-color);
+  font-weight: var(--font-medium);
+  margin-bottom: var(--mb-0-75);
+}
+
+.home__description{
+  margin-bottom: var(--mb-2);
+}
+
+/*==================== BUTTONS ====================*/
+.button{
+  display: inline-block;
+  background-color: var(--first-color-alt);
+  color: #fff;
+  padding: 1rem;
+  border-radius: .5rem;
+  font-weight: var(--font-medium);
+}
+
+.button:hover {
+  background-color: var(--first-color-alt);
+}
+
+.button__icon{
+  font-size: 1.25rem;
+  margin-right: var(--mb-0-5);
+  transition: .3s;
+  color: #FFF;
+}
+
+.button--flex{
+  display: inline-flex;
+  align-items: center;
+}
+
+.button--small{
+  padding: .75rem 1rem;
+}
+
+.button--link{
+  padding: 0;
+  background-color: transparent;
+  color: var(--first-color);
+}
+
+.button--link:hover {
+  background-color: transparent;
+  color: var(--first-color-alt);
+}
+
+/*==================== ABOUT ====================*/
+.about__img{
+  width: 400px;
+  border-radius: .5rem;
+  justify-self: center;
+  align-self: center;
+}
+
+.about__description{
+  text-align: center;
+  margin-bottom: var(--mb-2-5);
+}
+
+.about__info{
+  display: flex;
+  justify-content: space-evenly;
+  margin-bottom: var(--mb-2-5);
+}
+
+.about__info-title{
+  font-size: var(--h2-font-size);
+  font-weight: var(--font-semi-bold);
+  color: var(--title-color);
+}
+
+.about__info-name{
+  font-size: var(--smaller-font-size);
+}
+
+.about__info-title,
+.about__info-name{
+  display: block;
+  text-align: center;
+}
+
+.about__buttons{
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/*==================== SKILLS ====================*/
+.skills__container{
+  row-gap: 0;
+}
+
+.skills__header{
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--mb-2-5);
+  cursor: pointer;
+}
+
+.skills__icon,
+.skills__arrow{
+  font-size: 2rem;
+  color: var(--md-primary-fg-color);
+}
+
+.skills__icon{
+  margin-right: var(--mb-0-75);
+}
+
+.skills__title{
+  font-size: var(--h3-font-size);
+}
+
+.skills_subtitle{
+  font-size: var(--small-font-size);
+  color: var(--text-color-light);
+}
+
+.skills__arrow{
+  margin-left: auto;
+  transition: .4s;
+}
+
+.skills__list{
+  row-gap: 1.5rem;
+  padding-left: 2.7rem;
+}
+
+.skills__titles{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--mb-0-5);
+}
+
+.skills__name{
+  font-size: var(--normal-font-size);
+  font-weight: var(--font-medium);
+}
+
+.skills__number{
+  margin-top: var(--mb-2-5);
+}
+
+.skills__bar,
+.skills__percentage{
+  height: 5px;
+  border-radius: .25rem;
+}
+
+.skills__bar{
+  background-color: var(--first-color-lighter);
+}
+
+.skills__percentage{
+  display: block;
+  background-color: var(--first-color);
+}
+
+.skills__fastapi{
+  width: 90%;
+}
+
+.skills__django{
+  width: 85%;
+}
+
+.skills__flask{
+  width: 75%;
+}
+
+.skills__spring{
+  width: 75%;
+}
+
+.skills__androidjava{
+  width: 70%;
+}
+
+.skills__androidkotlin{
+  width: 60%;
+}
+
+.skills__flutter{
+  width: 60%;
+}
+
+.skills__aws{
+  width: 80%;
+}
+
+.skills__azure{
+  width: 75%;
+}
+
+.skills__oc{
+  width: 70%;
+}
+
+.skills__cicd{
+  width: 75%;
+}
+
+.skills__close .skills__list{
+  height: 0;
+  overflow: hidden;
+}
+
+.skills__open .skills__list{
+  height: max-content;
+  margin-bottom: var(--mb-2-5);
+}
+
+.skills__open .skills__arrow{
+  transform: rotate(-180deg);
+}
+
+/*==================== QUALIFICATION ====================*/
+.qualification__tabs{
+  display: flex;
+  justify-content: space-evenly;
+  margin-bottom: var(--mb-2);
+}
+
+.qualification__button{
+  font-size: var(--h3-font-size);
+  font-weight: var(--font-medium);
+  cursor: pointer;
+}
+
+.qualification__button:hover {
+  color: var(--first-color);
+}
+
+.qualification__icon{
+  font-size: 1.8rem;
+  margin-right: var(--mb-0-25);
+}
+
+.qualification__data{
+  display: grid;
+  grid-template-columns: 1.5fr max-content 1.5fr;
+  column-gap: 1.5rem;
+}
+
+.qualification__title{
+  font-size: var(--normal-font-size);
+  font-weight: var(--font-medium);
+}
+
+.qualification__subtitle{
+  display: inline-block;
+  font-size: var(--smaller-font-size);
+  margin-bottom: var(--mb-1);
+}
+
+.qualification__calendar{
+  font-size: var(--smaller-font-size);
+  color: var(--md-primary-fg-color--dark);
+}
+
+.qualification__rounder{
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  background-color: var(--md-primary-fg-color);
+  border-radius: 50%;
+}
+
+.qualification__line{
+  display: block;
+  width: 1px;
+  height: 100%;
+  background-color: var(--md-primary-fg-color);
+  transform: translate(6px, -7px);
+}
+
+.qualification [data-content]{
+  display: none;
+}
+
+.qualification__active[data-content]{
+  display: block;
+}
+
+.qualification__button.qualification__active{
+  color: var(--first-color);
+}
+
+/*==================== MEDIA QUERIES ====================*/
+/* For small devices */
+@media screen and (max-width: 350px){
+  .container{
+    margin-left: var(--mb-1);
+    margin-right: var(--mb-1);
+  }
+
+  .home__content{
+    grid-template-columns: .25fr 3fr;
+  }
+  .home__blob{
+    width: 180px;
+  }
+
+  .skills__title{
+    font-size: var(--normal-font-size);
+  }
+
+  .qualification__data{
+    gap: .5rem;
+  }
+}
+
+/* For medium devices */
+@media screen and (min-width: 568px){
+  .home__content{
+    grid-template-columns: max-content 1fr 1fr;
+  }
+  .home__data{
+    grid-column: initial;
+  }
+  .home__img{
+    order: 1;
+    justify-self: center;
+  }
+
+  .skills__container,
+  .about__container,
+  .portfolio__content,
+  .project__container{
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .qualification__sections{
+    display: grid;
+    grid-template-columns: 6fr;
+    justify-content: center;
+  }
+}
+
+@media screen and (min-width: 768px){
+  .container{
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  body{
+    margin: 0;
+  }
+
+  .section{
+    padding: 6rem 0 2rem;
+  }
+  .section__subtitle{
+    margin-bottom: 4rem;
+  }
+
+  .header{
+    top: 0;
+    bottom: initial;
+  }
+
+  .header,
+  .main{
+    padding: 0 1rem;
+  }
+
+  .home__container{
+    row-gap: 5rem;
+  }
+  .home__content{
+    padding-top: 5.5rem;
+    column-gap: 2rem;
+  }
+  .home__blob{
+    width: 270px;
+  }
+  .home__scroll{
+    display: block;
+  }
+  .home__scroll-button{
+    margin-left: 3rem;
+  }
+
+  .about__container{
+    column-gap: 5rem;
+  }
+  .about__img{
+    width: 350px;
+  }
+  .about__description{
+    text-align: initial;
+  }
+  .about__info{
+    justify-content: space-between;
+  }
+  .about__buttons{
+    justify-content: initial;
+  }
+
+  .qualification__tabs{
+    justify-content: center;
+  }
+  .qualification__button{
+    margin: 0 var(--mb-1);
+  }
+  .qualification__sections{
+    grid-template-columns: .5fr;
+  }
+}
+
+/* For large devices */
+@media screen and (min-width: 1024px){
+  .header,
+  .main{
+    padding: 0;
+  }
+
+  .home__blob{
+    width: 320px;
+  }
+  .home__social{
+    transform: translateX(-6rem);
+  }
+  .qualification__sections{
+    display: grid;
+    grid-template-columns: 6fr;
+    justify-content: center;
+  }
+}

mkdocs.yml

@@ -259,11 +259,11 @@ extra_css:
   - stylesheets/extra.css # 自定义CSS
   - stylesheets/link.css #友链配置
   - stylesheets/customize.css # 搜索圆角优化
-
+  # - assets/stylesheets/portfolio.css
   # - stylesheets/video.css #播放器可选配置
   # - https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.css #gitalk支持
   # - ckplayer/css/ckplayer.css   #播放器配置
-  - https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css # font-awesome表情支持
+  # - https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css # font-awesome表情支持
   # - https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css  #分享支持
 
   - https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css #字体