topuser
/
koa3-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 更新个人经历时间线，添加教育和出生信息

route
npmrun 4 weeks ago
parent
07a5b2ff22
commit
914b05192f
2 changed files with 175 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 145
      public/css/page/index.css
  2. 42
      src/views/page/index/index.pug

145
public/css/page/index.css
View File

@ -1,21 +1,23 @@
.home-hero {
margin: 20px 20px 40px;
margin: 40px 20px 40px;
/* background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px); */
text-align: center;
}
.avatar-container {
width: 100px;
height: 100px;
width: 120px;
height: 120px;
margin: 0 auto;
position: relative;
}
.avatar-container .author{
.avatar-container .author {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
font-weight: bold;
}
.avatar-container:hover .avatar {
transform: rotate(360deg);
@ -32,22 +34,146 @@
transition: 0.5s transform ease-in-out, 0.5s left ease-in-out;
}
.time-line{
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
border-radius: 8px;
padding: 20px;
width: 300px;
margin: 0 auto;
margin-bottom: 40px;
text-align: center;
}
.time-line {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.time-line:before {
content: "";
width: 3px;
height: 100%;
background: rgba(255, 255, 255, 0.37);
backdrop-filter: blur(12px);
left: 50%;
top: 0;
position: absolute;
transform: translateX(-50%);
}
.time-line::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 0;
height: 0;
border-top: 12px solid rgba(255, 255, 255, 0.37);
border-right: 7px solid transparent;
border-left: 7px solid transparent;
backdrop-filter: blur(12px);
transform: translateX(-50%);
}
.time-line a {
color: rgb(219, 255, 121);
text-decoration: underline;
font-weight: 600;
transition: color 0.2s, background 0.2s;
border-radius: 8px;
padding: 1px 4px;
}
.time-line a:hover {
color: #fff;
background: linear-gradient(90deg, #7ec6f7 0%, #ff8ca8 100%);
text-decoration: none;
}
.time-line-item {
color: white;
width: 900px;
margin: 20px auto;
position: relative;
}
.time-line-item:first-child {
margin-top: 0;
}
.time-line-item.left {
border-right: 1px solid white;
.time-line-item:last-child {
margin-bottom: 50px;
}
.timeline-icon {
position: absolute;
width: 100px;
height: 50px;
background-color: #ee4d4d7a;
backdrop-filter: blur(12px);
left: 50%;
top: 0;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
}
.time-line-item-title {
background-color: #ee4d4d7a;
backdrop-filter: blur(12px);
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.time-line-item:nth-child(odd) .time-line-item-content {
color: white;
width: 50%;
padding-right: 80px;
}
.time-line-item:nth-child(odd) .time-line-item-content::before {
content: "";
position: absolute;
left: calc(50% - 80px);
top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #ee4d4d7a;
backdrop-filter: blur(12px);
}
.time-line-item:nth-child(even) .time-line-item-content {
float: right;
width: 50%;
padding-left: 80px;
}
.time-line-item:nth-child(even) .time-line-item-content::before {
content: "";
position: absolute;
right: calc(50% - 80px);
top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #ee4d4d7a;
backdrop-filter: blur(12px);
}
.time-line-item.right {
border-left: 1px solid white;
.time-line-item-desc {
background-color: #ffffff54;
backdrop-filter: blur(12px);
color: #fff;
padding: 20px;
line-height: 1.4;
}
@media screen and (max-width: 768px) {
@ -56,4 +182,3 @@
margin-top: 20px;
}
}

42
src/views/page/index/index.pug
View File

@ -8,6 +8,44 @@ block pageContent
.avatar-container
.author #{$site.site_author}
img.avatar(src="https://alist.xieyaxin.top/p/%E6%B8%B8%E5%AE%A2%E6%96%87%E4%BB%B6/%E5%85%AC%E5%85%B1%E4%BF%A1%E6%81%AF/avatar.jpg", alt="")
.card
div 人生轨迹
ul.time-line
li.time-line-item.left dsad
li.time-line-item.right dsad
li.time-line-item
.timeline-icon
div 第一份工作
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 做游戏的。
li.time-line-item
.timeline-icon
div 大学毕业
.time-line-item-content
.time-line-item-title 2014年09月
.time-line-item-desc 我从
a(href="https://www.jxnu.edu.cn/" target="_blank") 江西师范大学
span 毕业，获得了软件工程（虚拟现实与技术）专业的学士学位。
li.time-line-item
.timeline-icon
div 高中
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 宜春中学
li.time-line-item
.timeline-icon
div 初中
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 宜春实验中学
li.time-line-item
.timeline-icon
div 小学
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 宜春二小
li.time-line-item
.timeline-icon
div 出生
.time-line-item-content
.time-line-item-title 1996年06月
.time-line-item-desc 我出生于江西省丰城市泉港镇。

Write Preview
Loading…
Cancel
Save