jaredddddd.github.io/slider.html at main · Jaredddddd/jaredddddd.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!-- ---
layout: slider
title: 双向滑动展示
top_content: |
    <a href="https://jaredddddd.github.io/2023/12/17/DSFileSystem/" class="card">
        <div class="card-bg" style="background-image: url('/img/in-post/DSFileSystem/image-20231214233803626.png')"></div>
        <div class="card-content">
            <h2>项目展示</h2>
            <p>分布式文件系统</p>
        </div>
    </a>
    <a href="https://jaredddddd.github.io/2023/12/12/Database-Supermarket/" class="card">
        <div class="card-bg" style="background-image: url('/img/in-post/Database-Supermarket/image6.png')"></div>
        <div class="card-content">
            <h2>项目展示</h2>
            <p>超市库存管理系统</p>
        </div>
    </a>
    <a href="https://jaredddddd.github.io/2023/12/07/CG-FinalProject/" class="card">
        <div class="card-bg" style="background-image: url('/img/in-post/CG-FinalProject/image-20231207171232677.png')"></div>
        <div class="card-content">
            <h2>项目展示</h2>
            <p>用OpenGL搭建并渲染一个场景</p>
        </div>
    </a>
    <a href="https://jaredddddd.github.io/2023/10/27/DS-publish-subscribe/" class="card">
        <div class="card-bg" style="background-image: url('/img/in-post/DS-publish-subscribe/image-20231027224843490.png')"></div>
        <div class="card-content">
            <h2>项目展示</h2>
            <p>gRPC实现简单的消息订阅系统</p>
        </div>
    </a>
    <a href="https://jaredddddd.github.io/2023/04/29/TSP/" class="card">
        <div class="card-bg" style="background-image: url('/img/in-post/AI/TSP/finalPath.png')"></div>
        <div class="card-content">
            <h2>项目展示</h2>
            <p>使用模拟退火和遗传算法求解TSP问题</p>
        </div>
    </a>
    <a href="https://jaredddddd.github.io/2023/04/19/AI-Chess/" class="card">
        <div class="card-bg" style="background-image: url('/img/in-post/AI/AI-Chess/image-20230419161108473.png')"></div>
        <div class="card-content">
            <h2>项目展示</h2>
            <p>Alpha-beta剪枝算法设计一个中国象棋博弈程序</p>
        </div>
    </a>
    <a href="https://jaredddddd.github.io/2022/12/20/PipelineCPU/" class="card">
        <div class="card-bg" style="background-image: url('/img/in-post/CPUDesign/PipelineCPU/clip_image004.png')"></div>
        <div class="card-content">
            <h2>项目展示</h2>
            <p>流水线CPU设计与实现</p>
        </div>
    </a>

bottom_content: |
    <a href="#" class="card">
        <div class="card-bg" style="background-image: url('/img/night.jpg')"></div>
        <div class="card-content">
            <h2>获奖证书</h2>
            <p>专业认证与荣誉</p>
        </div>
    </a>
    <a href="#" class="card">
        <div class="card-content">
            <h2>个人作品</h2>
            <p>创意设计展示</p>
        </div>
    </a>
    <a href="#" class="card">
        <div class="card-bg" style="background-image: url('/img/night.jpg')"></div>
        <div class="card-content">
            <h2>教育背景</h2>
            <p>学习深造经历</p>
        </div>
    </a>
    <a href="#" class="card">
        <div class="card-bg" style="background-image: url('/img/night.jpg')"></div>
        <div class="card-content">
            <h2>2</h2>
            <p>2</p>
        </div>
    </a>
    <a href="#" class="card">
        <div class="card-bg" style="background-image: url('/img/night.jpg')"></div>
        <div class="card-content">
            <h2>工作经验</h2>
            <p>职业发展历程</p>
        </div>
    </a>
---  -->


<!-- 下面这个card-bg bg-contain就是背景图完全显示，如果只是card-bg那么就是会裁剪 -->
<!-- <div class="card-bg bg-contain" style="background-image: url('/img/in-post/DSFileSystem/image-20231214233803626.png')"></div> -->