个人简介页面更新

个人简介页面更新

关于 | itsNeko「生活日志」 (dyfa.top)

about.ejs

<%- partial('_partial/bg-cover') %>
<style>
  /* don't remove. */
  .about-cover {
    height: 75vh;
  }

  .sitemapss {
    margin: 27px auto;
  }

  @media only screen and (max-width: 601px) {
    #switchspring {
      bottom: 178px !important;
    }
  }

  #sma {
    bottom: 139.25px;
  }

  .comment-scroll {
    bottom: 79.25px;
  }

  .bg-cover::before {
    background-image: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/grid.png);
  }

  .about-cover {
    height: 110vh;
  }

  @media only screen and (max-width: 600px) {
    .about-cover {
      height: 64vh;
    }
  }

  iframe {
    width: 60%;
    margin: 0 auto;
  }

  body.dark iframe {
    opacity: 0.7;
  }
</style>

<style>
  @media only screen and (max-width: 800px) {
    .swbk {
      padding: 26px 2px !important;
      margin: 0 !important;
    }

    .swbk ol {
      padding: 2px 10px;
    }
  }

  .swbk {
    position: relative;
    padding: 26px 20px;
    font-style: italic;
    margin: 10px 0px;
    -webkit-box-shadow: 0 14px 38px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .06);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .06);
    -webkit-transition: all .3s ease 0s, -webkit-transform .6s cubic-bezier(.6, .2, .1, 1) 0s;
    transition: all .3s ease 0s, -webkit-transform .6s cubic-bezier(.6, .2, .1, 1) 0s;
    transition: all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s;
    transition: all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s, -webkit-transform .6s cubic-bezier(.6, .2, .1, 1) 0s;
  }

  .swbk:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-box-shadow: 0 14px 38px rgba(0, 0, 0, .14), 0 3px 8px rgba(0, 0, 0, .12);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .14), 0 3px 8px rgba(0, 0, 0, .12);
  }

  .swbk:before {
    content: " “ ";
    top: 56px;
    left: -14px;
  }

  .swbk:after {
    content: " ” ";
    bottom: 8px;
    right: 5px;
  }

  .swbk:after,
  .swbk:before {
    position: absolute;
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    text-decoration: inherit;
  }

  .biography .swbk:after,
  .biography .swbk:before {
    display: none;
  }

  body.dark .swbk:after,
  body.dark .swbk:before {
    color: #d2c9c9;
  }

  .swbk p {
    font-size: 19px !important;
    line-height: 2.4rem;
    text-indent: 2rem;
    font-style: italic;
    font-family: 'Architects Daughter', cursive !important;
  }

  .swbk .label {
    display: inline-block;
    position: relative;
    margin-bottom: 10px;
    padding: 0 14px 0 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 0 3px 3px 0;
    background-color: currentColor;
  }

  .swbk .label span {
    color: #fff;
  }

  .swbk .label:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    background-color: transparent;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent;
    border-right-color: currentColor;
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
  }

  @media screen and (min-width: 768px) {
    .swbk .label {
      left: -37px;
    }
  }

  @media screen and (max-width: 767px) {
    .swbk .label {
      left: -18px;
    }

    .swbk p {
      padding: 2px 8px;
    }
  }
</style>

<main class="content">
  <div id="aboutme" class="container about-container">
    <div class="card">
      <div class="card-content">
        <div class="row">
          <div class="post-statis col l4 hide-on-med-and-down">
            <%- partial('_partial/post-statis') %>
          </div>
          <div class="col s12 m12 l4">
            <div class="profile center-align">
              <div class="avatar toupic">
                <img src="<%- theme.jsDelivr.url %><%- url_for(theme.profile.avatar) %>" alt="<%- config.author %>"
                  class="circle responsive-img avatar-img">
              </div>
              <div class="author">
                <div class="post-statis hide-on-large-only" data-aos="zoom-in-right">
                  <%- partial('_partial/post-statis') %>
                </div>
                <div class="title"><%- config.author %></div>
                <div class="career"><%- theme.profile.career %></div>
                <div class="social-link hide-on-large-only" data-aos="zoom-in-left">
                  <%- partial('_partial/social-link') %>
                </div>
              </div>
            </div>
          </div>
          <div class="col l4 hide-on-med-and-down">
            <div class="social-link">
              <%- partial('_partial/social-link') %>
            </div>
          </div>
        </div>

        <div class="introduction center-align">
          <%= theme.profile.introduction %>
        </div>

        <div class="biography">
            <div class="aboutlist first_about">
                <h3>🏡 关于我</h3>
                <div class="swbk">
                    <div class="label" style="color: rgb(178, 143, 206);">
                        <span>十万伏特皮卡丘</span>
                    </div>
                    <p>
                    <ol>
                        <li>AKA十万伏特皮卡丘，想要成为优秀的Web Front-end Developer，梦想是世界和平，想要发光发热，不止于此。</li>
                    </ol>
                    </p>
                </div>
        
                <div class="swbk">
                    <p>
                    <ol>
                        <li>关于网站名称，取名为 “ NekoDeng ”，原因是当初注册Google邮箱的时候需要一个英文名，想了好久才取名叫neko，然后再加上我的姓氏，很土啦，就这样。</li>
                    </ol>
                    </p>
                </div>
                <div class="swbk">
                    <p>
                    <ol>
                        <li>天蝎座，喜欢篮球，<a target="_blank" rel="noopener"
                                href="https://nekodeng.gitee.io/lakers-championship/"><code>湖人总冠军</code></a>，从热火时期开始关注Lebron
                            James，<a target="_blank" rel="noopener"
                                href="https://nekodeng.gitee.io/musics/"><code>宝藏歌曲</code></a>《达尔文》，
                            还喜欢好多东西，偶尔会发一些<a target="_blank" rel="noopener"
                                href="https://nekodeng.gitee.io/videos/"><code>vlog</code></a>，
                            或者灵感来了写写<a target="_blank" rel="noopener"
                                href="https://nekodeng.gitee.io/essay/"><code>随笔</code></a>啥的，
                            会用<a target="_blank" rel="noopener"
                                href="https://nekodeng.gitee.io/gallery/"><code>相册</code></a>记录生活，待续...</li>
                        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86"
                            src="//music.163.com/outchain/player?type=2&amp;id=5248060&amp;height=66">博主的宝藏歌曲</iframe>
                    </ol>
                    </p>
                </div>
        
                <div class="swbk">
                    <p>
                    <ol>
                        <li style="font-size: 14px!important;">
                            以前我不懂，种一棵树最好的时间是十年前，其次呢就是现在，就好比纽约的时间，比加州快了3个小时，但加州并没有变慢，每个人都有自己的时区，有些人看似走在你的前面，有些人看似走在你的后面，但是每个人的时区和路程，是相互独立的，所以不用去羡慕或者嫉妒，爱情里面，年龄不是问题，学习也不是。
                        </li>
                    </ol>
                    </p>
                </div>
            </div>
        
            <div class="aboutlist">
                <div class="columnlist">
                    <h3>🕛 为什么写博客</h3>
                    <div class="swbk">
                        <div class="label" style="color: rgb(188, 159, 119);">
                            <span>风花雪月之事</span>
                        </div>
                        <p>
                            很长时间了，总是想写点什么，无关风月，就是想写点什么。无论是记录知识点，总结技能树，人生长谈，风花雪月之事，都可以有一个存档的地方，对于复盘，回忆，都是一个极好的方谭。
                        </p>
                    </div>
                </div>
        
                <div class="columnlist">
                    <h3>📬 我的联系方式</h3>
                    <div class="swbk">
                        <div class="label" style="color: rgb(251, 150, 110);">
                            <span>在这里找到我</span>
                        </div>
                        <p>可在评论区留言，看到了会尽快回复哒~</p>
                        <p>微信公众号: itsNeko</p>
                        <p>邮 箱：nekodeng@qq.com</p>
                    </div>
                </div>
        
                <div class="columnlist">
                    <h3>🗳 本博客主题开源投票</h3>
                    <div class="swbk">
                        <div class="label" style="color: rgb(245, 150, 170);">
                            <span>热爱开源的Neko</span>
                        </div>
                        <p>最近在考虑本博客主题开源，大家可以在投票页面评论，投票链接 <a href="/vote/" class="hurens">开源vote</a> ~</p>
                    </div>
                </div>
        
                <div class="columnlist">
                    <h3>💴 关于资助本博主</h3>
                    <div class="swbk">
                        <div class="label" style="color: rgb(178, 143, 206);">
                            <span>买个馒头吃吧</span>
                        </div>
                        <p>维护博客不易，憨憨叹气，考虑到后续开源博客还挺费时费力的，服务器费用真的累计起来挺高的，所以可以给博主买个馒头吃吗，卟卟 ~
                            路人甲：哎，博主好可怜，一定支持一下。链接：<a href="/donate">资助博主 ~</a>
                        </p>
                    </div>
                </div>
            </div>
        
            <div class="aboutlist">
                <div class="columnlist">
                    <h3>🎨 我的其它站点</h3>
                    <div class="swbk">
                        <div class="label" style="color: rgb(134, 193, 102);">
                            <span>在这里也可找到我</span>
                        </div>
                        <p>域名已购买：腾讯云，https://dyfa.top ~</p>
                        <p>🏷️ CSDN：<a target="_blank" rel="noopener"
                                href="https://blog.csdn.net/weixin_42529972">itsNekoDeng</a></p>
                        <p>🏷️ 掘金：<a target="_blank" rel="noopener"
                                href="https://juejin.im/user/3131038656901591/posts">itsNekoDeng</a></p>
                        <p>🏷️ gitee：<a target="_blank" rel="noopener"
                                href="https://nekodeng.gitee.io">https://nekodeng.gitee.io</a>（原）</p>
                        <p>🏷️ 微信公众号：名称" itsNekoDeng博客 "，扫一扫订阅我，这样你就能准时收到我的文章更新啦。
                        <div><img src="/medias/qrcode_for_gh.jpg" width="150" height="150"
                                style="margin: 0 auto;display: block;" /></div>
                        </p>
                    </div>
                </div>
                <!-- 关于programmer搭博客 -->
                <div class="columnlist">
                    <h3>🐒 关于programmer搭博客</h3>
                    <div class="swbk">
                        <div class="label" style="color: rgb(249, 191, 69);">
                            <span>一种神秘生物</span>
                        </div>
                        <p>
                            个人网站博主是一种有点神秘的动物，大部分隐身在互联网的丛林中，
                            很少有人观察到。
                            其他没有经验的用户可能会认为，个人网站已经像恐龙那样灭绝。
                            事实是野外还存在许多标本，只有了解该物种习性的猎人才能发现它们。
                            --<a target="_blank" rel="noopener"
                                href="https://cheapskatesguide.org/articles/personal-website-hunting.html">《搜寻几乎不可见的个人网站》</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 仿聊天框模块 -->
        <style>
            /* 暗色模式 和添加小屏幕响应式 */
            body.dark .triangle {
                background-color: #2e323b;
            }
        
            body.dark .triangle .textLeft span {
                background-color: black;
            }
        
            body.dark .triangle li.textLeft span:before {
                border-right: 8px solid black;
            }
        
            body.dark .triangle .textRight span {
                background-color: #64982e;
            }
        
            body.dark .triangle li.textRight span:after {
                border-left: 8px solid #64982e;
            }
        
            @media only screen and (min-width: 322px) and (max-width: 450px) {
                .triangle li:nth-last-of-type(1) {
                    margin-bottom: 60px !important;
                }
            }
        
            @media only screen and (min-width: 452px) and (max-width: 900px) {
                .triangle li:nth-last-of-type(1) {
                    margin-bottom: 42px !important;
                }
            }
        
            @media only screen and (max-width: 500px) {
                .triangle li span {
                    font-size: 14px !important;
                }
            }
        
            @media only screen and (max-width: 321px) {
                .triangle li:nth-last-of-type(1) {
                    margin-bottom: 80px !important;
                }
        
                .triangle li:nth-last-of-type(2) {
                    margin-bottom: 42px !important;
                }
            }
        </style>
        <style>
            .triangle {
                margin: 0 auto;
                background-color: #ebebe9;
            }
        
            .triangle ul {
                padding: 10px;
            }
        
            .triangle li {
                position: relative;
                padding: 10px 15px;
                margin-bottom: 10px;
            }
        
            .triangle li span {
                position: relative;
                border-radius: 7px;
                padding: 20px 15px 20px 15px;
                z-index: 1;
                font-size: 18px;
            }
        
            .triangle .textLeft span {
                background-color: white;
                position: absolute;
                top: 18px;
                left: 86px;
            }
        
            .triangle .textRight span {
                position: absolute;
                background-color: #a6e860;
                top: 18px;
                right: 86px;
                text-align: left;
            }
        
            .triangle li.textLeft:before {
                content: url("/medias/itsneko.jpg");
                box-sizing: border-box;
                position: relative;
                left: -10px;
                top: 9px;
            }
        
            .triangle li.textLeft span:before {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border: 8px solid transparent;
                border-right: 8px solid white;
                position: absolute;
                top: 8px;
                left: -16px;
            }
        
            .triangle li.textRight:after {
                content: url("/medias/qqavatar.jpg");
                box-sizing: border-box;
                position: relative;
                right: -10px;
                top: 9px;
            }
        
            .triangle li.textRight span:after {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border: 8px solid transparent;
                border-left: 8px solid #a6e860;
                position: absolute;
                top: 8px;
                right: -16px;
            }
        
            li {
                list-style: none;
            }
        
            .textRight {
                text-align: right;
            }
        </style>
        <div class="triangle">
            <ul>
                <li class="textLeft">
                    <span>“ 你买的什么书 ？ ”</span>
                </li>
                <li class="textRight">
                    <span>“ 编程 ”</span>
                </li>
                <li class="textLeft">
                    <span>“ C++还是JAVA ？ ”</span>
                </li>
                <li class="textRight">
                    <span>“ 沈从文 ”</span>
                </li>
                <li class="textLeft">
                    <span>“ 哈 ？ ”</span>
                </li>
                <li class="textRight">
                    <span>“ 害，这大概就是古人云文人骚客吧 ”</span>
                </li>
                <li class="textLeft">
                    <span>“ 曾粗浅地认为只有programmer才搭博客，后来发现了什么才是大千世界 ”</span>
                </li>
            </ul>
        </div>

      </div>
    </div>


    <div class="card">
      <% if (theme.livere && theme.livere.enable) { %>
      <%- partial('_partial/livere') %>
      <% } %>

      <% if (theme.valine && theme.valine.enable) { %>
      <%- partial('_partial/valine') %>
      <% } %>

      <% if (theme.minivaline && theme.minivaline.enable) { %>
      <%- partial('_partial/minivaline') %>
      <% } %>
    </div>
  </div>
</main>