Roundaboutt.github.io/index.html at main · Roundaboutt/Roundaboutt.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
---
layout: default
---

<link rel="icon" type="image/png" href="https://github.com/Roundaboutt.png?v=1">
<script src="https://cdn.tailwindcss.com"></script>

<style>
    .page-header, .site-footer { display: none !important; visibility: hidden !important; }
    .main-content { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

    .prose.text-gray-600 {
        color: #1a1a1a !important; /* 极深灰，接近黑色 */
    }
    body {
        background-image: url('background/5.png');
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 100vh;
    }

    .glass-container {
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .prose ul {
        list-style-type: disc !important;
        padding-left: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    .prose li { margin-bottom: 0.5rem !important; }

    article.prose p { text-indent: 2em; margin-bottom: 1.25rem; }
    article.prose h1, article.prose h2, article.prose h3 { text-indent: 0; }

    .social-link:hover {
        transform: translateY(-2px);
        transition: transform 0.2s ease;
    }

    /* 仅新增折叠交互必要的补丁样式 */
    .category-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-in;
        opacity: 0;
    }
    .category-content.active {
        max-height: 1000px;
        opacity: 1;
    }
</style>

<div class="min-h-screen pt-10 pb-10 px-4">
    <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-4 gap-8">

        <main class="lg:col-span-3 space-y-8">
            <div class="glass-container p-8 md:p-12 rounded-[2.5rem] shadow-2xl">
                <div class="flex flex-col items-center text-center mb-12">
                    <div class="w-32 h-32 rounded-full border-4 border-white shadow-lg overflow-hidden mb-4">
                        <img src="https://github.com/Roundaboutt.png" alt="Avatar" class="w-full h-full object-cover">
                    </div>
                    <h1 class="text-4xl font-black text-gray-900 tracking-tighter">{{ site.author }}</h1>
                    <div class="h-1 w-12 bg-indigo-500 my-4 rounded-full"></div>
                    <p class="text-gray-500 italic">{{ site.description }}</p>
                </div>

                {% assign about_page = site.pages | where: "title", "关于我" | first %}
                {% if about_page %}
                    <article class="prose prose-indigo max-w-none text-gray-700 leading-relaxed border-t border-gray-100 pt-8 mb-10">
                        {{ about_page.content | markdownify }}
                    </article>
                {% endif %}

                <div class="border-t border-gray-100 pt-10">
                    <h3 class="text-2xl font-black text-gray-900 mb-8 flex items-center gap-3">
                        <svg class="w-7 h-7 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                        </svg>
                        留言板 / Guestbook
                    </h3>
                    <script src="https://giscus.app/client.js"
                            data-repo="Roundaboutt/Roundaboutt.github.io"
                            data-repo-id="R_kgDONpS1OA"
                            data-category="Announcements"
                            data-category-id="DIC_kwDONpS1OM4CmO8V"
                            data-mapping="specific"
                            data-term="Guestbook"
                            data-strict="0"
                            data-reactions-enabled="1"
                            data-emit-metadata="0"
                            data-input-position="top"
                            data-theme="light"
                            data-lang="zh-CN"
                            crossorigin="anonymous"
                            async>
                    </script>
                </div>
            </div>
        </main>

        <aside class="lg:col-span-1 space-y-6">
            <div class="glass-container p-6 rounded-[2rem] shadow-xl">
                <h3 class="text-xs font-black text-gray-400 uppercase tracking-widest mb-4 text-center">社交 / SOCIAL</h3>
                <div class="flex flex-col gap-3">
                    <a href="https://www.zhihu.com/people/zhao-wen-dao-10-12" target="_blank" class="social-link flex items-center gap-3 px-4 py-2 bg-white/50 rounded-xl text-sm text-gray-600 hover:text-blue-500 transition-all">
                        <span class="font-bold text-blue-500">知</span>
                        <span>知乎主页</span>
                    </a>
                    <a href="https://github.com/Roundaboutt" target="_blank" class="social-link flex items-center gap-3 px-4 py-2 bg-white/50 rounded-xl text-sm text-gray-600 hover:text-indigo-600 transition-all">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
                        <span>GitHub</span>
                    </a>
                    <a href="mailto:jscroundabout@gmail.com" class="social-link flex items-center gap-3 px-4 py-2 bg-white/50 rounded-xl text-sm text-gray-600 hover:text-red-500 transition-all">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        <span>发送邮件</span>
                    </a>
                </div>
            </div>

            <div class="glass-container p-6 rounded-[2rem] shadow-xl sticky top-10">
                <h3 class="text-xs font-black text-gray-400 uppercase tracking-widest mb-6 text-center">文章索引 / BLOG</h3>
                <nav class="flex flex-col gap-2">
                    {% for category in site.categories %}
                    <div class="category-group border-b border-gray-100/50 last:border-0 pb-2">
                        <button onclick="toggleCategory('{{ category | first }}')"
                                class="w-full flex justify-between items-center py-2 px-3 hover:bg-indigo-50/50 rounded-xl transition-all group">
                            <span class="text-xs font-bold text-indigo-500 tracking-widest uppercase"># {{ category | first }}</span>
                            <svg id="icon-{{ category | first }}" class="w-3 h-3 text-gray-400 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>

                        <div id="content-{{ category | first }}" class="category-content">
                            <div class="flex flex-col gap-2 py-3 px-3 border-t border-indigo-50/50 mt-1">
                                {% for post in category.last %}
                                <a href="{{ post.url }}" class="text-sm text-gray-600 hover:text-indigo-600 transition-all flex items-start group">
                                    <span class="mr-2 opacity-30 group-hover:opacity-100 transition-opacity">•</span>
                                    <span class="line-clamp-1">{{ post.title }}</span>
                                </a>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </nav>
            </div>
        </aside>
    </div>
</div>

<script>
    function toggleCategory(categoryId) {
        const content = document.getElementById('content-' + categoryId);
        const icon = document.getElementById('icon-' + categoryId);
        content.classList.toggle('active');
        icon.style.transform = content.classList.contains('active') ? 'rotate(180deg)' : 'rotate(0deg)';
    }
</script>