Skip to content

Commit

Permalink
redesigned home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@livia23k
livia23k committed May 4, 2024
1 parent b1833ec commit 0c69d37
Show file tree
Hide file tree
Showing 27 changed files with 306 additions and 207 deletions.
291 changes: 181 additions & 110 deletions _layouts/home.html
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,189 @@
---
layout: default
refactor: truncate
title: Home
icon: fa-solid fa-hat-wizard
toc: true
---

{% include lang.html %}

{% assign pinned = site.posts | where: 'pin', 'true' %}
{% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}

{% assign posts = '' | split: '' %}

<!-- Get pinned posts -->

{% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
{% assign pinned_num = pinned.size | minus: offset %}

{% if pinned_num > 0 %}
{% for i in (offset..pinned.size) limit: pinned_num %}
{% assign posts = posts | push: pinned[i] %}
{% endfor %}
{% else %}
{% assign pinned_num = 0 %}
{% endif %}

<!-- Get default posts -->

{% assign default_beg = offset | minus: pinned.size %}

{% if default_beg < 0 %}
{% assign default_beg = 0 %}
{% endif %}

{% assign default_num = paginator.posts | size | minus: pinned_num %}
{% assign default_end = default_beg | plus: default_num | minus: 1 %}

{% if default_num > 0 %}
{% for i in (default_beg..default_end) %}
{% assign posts = posts | push: default[i] %}
{% endfor %}
{% endif %}

<div id="post-list" class="flex-grow-1 px-xl-1">
{% for post in posts %}
<article class="card-wrapper card">
<a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
{% assign card_body_col = '12' %}

{% if post.image %}
{% assign src = post.image.path | default: post.image %}
{% unless src contains '//' %}
{% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
{% endunless %}

{% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}

{% assign lqip = null %}

{% if post.image.lqip %}
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
{% endif %}

<div class="col-md-5">
<img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
</div>

{% assign card_body_col = '7' %}
{% endif %}

<div class="col-md-{{ card_body_col }}">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>

<div class="card-text content mt-0 mb-3">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
<html lang="en">

<head>

</head>


<body>

<div style="margin-bottom: 35px;"></div>

<div class="home-block" style="margin: 0% 0px 100px min(30px, 4%); width:100%; height:100%;">

<div class="ani-hello"></div>

<div class="home-intro" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))">
<div style="width: min(600px, 90%);">
<p style="margin-top: 30px;">
This is Wenxin (Livia) Lai. I’m now pursuing my master degree in Electrical and Computer Engineering
at Carnegie Mellon University.
<br>
Starting in spring 2024, I've devoted myself to learning about
game engines and graphics rendering technologies.
It's a late start, but I'm working to bridge the gaps.
</p>
<p style="margin-top: 30px;">
This site is built for recording everything I love. Hope it could witness my growth.
</p>
</div>
<img src="assets/img/site/avatar_ios.jpg"
style="width:200px; height:200px; align-items: center; justify-content: center;"
onerror="this.style.display='none'">
</div>

<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
{% include datetime.html date=post.date lang=lang %}

<!-- categories -->
{% if post.categories.size > 0 %}
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
{% for category in post.categories %}
{{ category }}
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</span>
{% endif %}
</div>

{% if post.pin %}
<div class="pin ms-1">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.locales[lang].post.pin_prompt }}</span>
</div>
{% endif %}
<div class="home-cols" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, max-content)); gap:15px;">
<div class="home-col-career" style="line-height: 30px;">
<h3 class="home-col-title">Career Interests</h3>
<ul class="home-col-ul">
<li class="home-col-ul-li">Computer Graphics;</li>
<li class="home-col-ul-li">Rendering;</li>
<li class="home-col-ul-li">Game Engine Dev;</li>
<li class="home-col-ul-li">Game Dev;</li>
</ul>
</div>
<div class="home-col-personal" style="line-height: 30px;">
<h3 class="home-col-title">Personal Interests</h3>
<ul class="home-col-ul">
<li class="home-col-ul-li">Video Games;</li>
<li class="home-col-ul-li">Reading;</li>
<li class="home-col-ul-li">Movies;</li>
<li class="home-col-ul-li">Handwork;</li>
</ul>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
{% endfor %}
</div>
<!-- #post-list -->

{% if paginator.total_pages > 1 %}
{% include post-paginator.html %}
{% endif %}

<h3 class="home-col-title">Site Icon Notation</h3>

<div style="margin-top: 20px;"></div>

<div class="nav-grid-home">
<li class="nav-item-home{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
<a href="{{ '/' | relative_url }}" class="nav-link">
<i class="fa-fw fas fa-home"></i>
<span>&nbsp;&nbsp;&nbsp;HOME</span>
</a>
</li>
{% for tab in site.tabs %}
<li class="nav-item-home{% if tab.url == page.url %}{{ " active" }}{% endif %}">
<a href="{{ tab.url | relative_url }}" class="nav-link">
<i class="fa-fw {{ tab.icon }}"></i>
{% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
&nbsp;&nbsp;&nbsp;<span>{{ site.data.locales[include.lang].tabs[tab_name] | default: tab.title | upcase }}</span>
</a>
</li>
<!-- .nav-item-home -->
{% endfor %}
</div>
<!-- .nav-grid-homes -->
</div>

</body>
</html>


<style>
.ani-hello {
font-size: 60px;
font-weight: bold;
color: #757575;
white-space: nowrap;
overflow: hidden;
display: inline-block; /* Make sure the div behaves like text */
line-height: 80px;
border-right: 0.15em solid rgb(236, 223, 201); /* Cursor */
}

@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: rgb(236, 223, 201); }
}

.home-col-title {
color:rgb(115, 115, 115);
font-weight: 800;
}

.home-col-ul {
list-style: none;
padding: 0px;
}

.home-col-ul-li {
opacity: 0.7;
}


.nav-grid-home {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(max-content, 150px));
gap: 15px;
list-style: none;
padding: 0px;
font-size: 95%;
opacity: 0.7;
width: min(700px, 90%);
}

.nav-grid-home li.nav-item-home {

a.nav-link {
display: flex;
align-items: center;
justify-content: start;
border-radius: 0.75rem;
padding-top: 0.6rem;
padding-left: 1rem;
padding-bottom: 0.6rem;

&:hover {
background-color: var(--sidebar-hover-bg);
}

span {
font-size: 90%;
letter-spacing: 0.2px;
}
}

&.active {
.nav-link {
color: rgb(159, 131, 100);
background-color: var(--sidebar-hover-bg);

span {
opacity: 1;
}
}
}
}

</style>


<script>
const el = document.querySelector('.ani-hello');
const text = 'Hello';
let idx = 0;

function typeWriter() {
if (idx < text.length) {
el.textContent += text.charAt(idx);
idx++;
setTimeout(typeWriter, 150);
} else {
// Stop the cursor blinking after typing is complete
el.style.animation = 'none';
el.style.borderRight = 'none'; // Optionally remove the cursor entirely
}
}

document.addEventListener('DOMContentLoaded', typeWriter); // Ensures DOM is fully loaded
</script>
1 change: 0 additions & 1 deletion _posts/life/2020-10-24-lalaland.md → _posts/food-for-soul/2020-10-24-lalaland.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
title: 爱乐之城 by Damien Chazelle
categories: [Food for Soul, Movie]
tags: [life, movie, excerpt, comment]
pin: true
---

Mia和Seb都有强烈的艺术气息，他们都曾义无反顾的去追逐梦想，于是所以他们被彼此吸引、相近相亲相爱。
Expand Down
3 changes: 1 addition & 2 deletions _posts/life/2021-08-06-zhujue.md → _posts/food-for-soul/2021-08-06-zhujue.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
---
title: 主角 by 陈彦
# pin: true
categories: [Food for Soul, Novel]
categories: [Food for Soul, Reading]
tags: [life, reading, excerpt]
pin: true
---

## 书摘
Expand Down
3 changes: 1 addition & 2 deletions _posts/life/2021-09-08-plague.md → _posts/food-for-soul/2021-09-08-plague.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
---
title: 鼠疫 by Albert Camus
categories: [Food for Soul, Novel]
categories: [Food for Soul, Reading]
tags: [life, reading, excerpt]
pin: true
---

## 书摘
Expand Down
3 changes: 1 addition & 2 deletions _posts/life/2023-04-04-crimeandpunishment.md → ...for-soul/2023-04-04-crimeandpunishment.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
---
title: 罪与罚 by Fyodor Dostoevsky
categories: [Food for Soul, Novel]
categories: [Food for Soul, Reading]
tags: [life, reading, excerpt]
pin: true
---

## 书摘
Expand Down
2 changes: 1 addition & 1 deletion _posts/life/2023-05-28-siddhartha.md → ...ts/food-for-soul/2023-05-28-siddhartha.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: 悉达多 by Hermann Hesse
categories: [Food for Soul, Novel]
categories: [Food for Soul, Reading]
tags: [life, reading, excerpt, comment]
---

Expand Down
2 changes: 1 addition & 1 deletion _posts/life/2023-12-21-amusingtodeath.md → ...ood-for-soul/2023-12-21-amusingtodeath.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: 娱乐至死 by Neil Postman
categories: [Food for Soul, Social Science]
categories: [Food for Soul, Reading]
tags: [life, reading, excerpt, comment]
---

Expand Down
0 _posts/tech/2023-12-19-graphic-math.md → .../graphics-game/2023-12-19-graphic-math.md
View file
File renamed without changes.
0 _posts/tech/2023-12-27-games104-arch.md → ...graphics-game/2023-12-27-games104-arch.md
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions _posts/others/2024-02-01-53614-carmengo.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Carmen Go based on Carmen Sandiego and Go Game Series
categories: [Computer Graphics & Game, Game Design]
tags: [game, game design, 53-614, project]
categories: [Computer Graphics & Game, Others]
tags: [game, game design, 53-614]
img_path: /assets/img/post/2024-02-01-carmengo/
---

Expand Down
4 changes: 2 additions & 2 deletions _posts/life/2024-02-13-silence.md → _posts/personal/2024-02-13-silence.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Moment | Silence
categories: [Food for Soul, Personal]
tags: [life, moment, jotting]
categories: [Personal, Thoughts]
tags: [life, moment, casual thought]
---

When I was waiting for the shuttle,
Expand Down
Loading

0 comments on commit 0c69d37

Please sign in to comment.