Skip to content

Commit ab8b01b

Browse files
ElantrisElantris
committed
2025
1 parent fb00787 commit ab8b01b

File tree

5 files changed

+213
-139
lines changed

5 files changed

+213
-139
lines changed

Diff for: ‎.prettierrc

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
{
22
"printWidth": 120,
33
"tabWidth": 2,
4-
"semi": false,
5-
"singleQuote": true,
6-
"trailingComma": "all"
4+
"semi": false
75
}

Diff for: ‎index.css

-8
This file was deleted.

Diff for: ‎index.html

+212-120
Original file line numberDiff line numberDiff line change
@@ -5,137 +5,229 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<meta name="apple-mobile-web-app-capable" content="yes" />
77
<meta name="mobile-web-app-capable" content="yes" />
8-
<meta property="og:title" content="Elantris | Front End Developer" />
8+
<meta property="og:title" content="Elantris | Front-end Developer" />
99
<meta property="og:type" content="website" />
1010
<meta property="og:url" content="https://elantris.github.io/" />
1111
<meta property="og:image" content="https://elantris.github.io/profile.jpg" />
1212
<base target="_blank" />
13-
<title>Elantris | Frontend Developer</title>
13+
<title>Elantris | Front-end Developer</title>
1414
<link rel="shortcut icon" href="profile.jpg" />
1515
<link
1616
rel="stylesheet"
17-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
18-
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
17+
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
18+
integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
1919
crossorigin="anonymous"
2020
referrerpolicy="no-referrer"
2121
/>
22-
<link rel="stylesheet" href="./index.css" />
23-
<script src="https://cdn.tailwindcss.com"></script>
22+
<link
23+
rel="stylesheet"
24+
href="https://cdnjs.cloudflare.com/ajax/libs/open-color/1.9.1/open-color.min.css"
25+
integrity="sha512-2w5aQudV1xnQLU0ED240kcVlHuIEwapWiW9hOIQnLxZM5zbPEU8e+eVGTw4jD/sU0hPkI10707ceWTt1s0VBlA=="
26+
crossorigin="anonymous"
27+
referrerpolicy="no-referrer"
28+
/>
29+
<link
30+
rel="stylesheet"
31+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
32+
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
33+
crossorigin="anonymous"
34+
referrerpolicy="no-referrer"
35+
/>
36+
<link rel="preconnect" href="https://fonts.googleapis.com" />
37+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
38+
<link
39+
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
40+
rel="stylesheet"
41+
/>
42+
<style>
43+
* {
44+
box-sizing: border-box;
45+
}
46+
47+
body {
48+
background: var(--oc-gray-9);
49+
color: var(--oc-gray-5);
50+
font-family: "Noto Sans", serif;
51+
font-optical-sizing: auto;
52+
}
53+
54+
.container {
55+
display: flex;
56+
flex-direction: column;
57+
justify-content: center;
58+
align-items: center;
59+
min-height: 100dvh;
60+
padding: 1rem;
61+
}
62+
63+
main {
64+
display: flex;
65+
flex-direction: column;
66+
align-items: center;
67+
gap: 1rem;
68+
position: relative;
69+
width: 100%;
70+
max-width: 370px;
71+
border-radius: 1rem;
72+
padding: 1.25rem;
73+
overflow: hidden;
74+
text-align: center;
75+
76+
&::before {
77+
z-index: 10;
78+
content: "";
79+
position: absolute;
80+
top: 50%;
81+
left: 50%;
82+
width: 70vmax;
83+
height: 70vmax;
84+
background-image: linear-gradient(var(--oc-violet-1), var(--oc-violet-5));
85+
animation-name: rotate;
86+
animation-duration: 5s;
87+
animation-iteration-count: infinite;
88+
animation-timing-function: linear;
89+
}
90+
91+
&::after {
92+
z-index: 11;
93+
content: "";
94+
position: absolute;
95+
inset: 0.25rem;
96+
border-radius: inherit;
97+
background-image: linear-gradient(var(--oc-gray-8), var(--oc-gray-8));
98+
background-origin: padding-box;
99+
background-clip: padding-box;
100+
}
101+
102+
> * {
103+
z-index: 12;
104+
position: relative;
105+
}
106+
}
107+
108+
h1 {
109+
margin: 0;
110+
}
111+
112+
h2 {
113+
margin: 0;
114+
}
115+
116+
a {
117+
text-decoration: none;
118+
}
119+
120+
ul {
121+
margin: 0;
122+
padding: 0;
123+
}
124+
125+
.avatar {
126+
aspect-ratio: 1/1;
127+
width: 8rem;
128+
border-radius: 50%;
129+
overflow: hidden;
130+
}
131+
132+
.title {
133+
color: var(--oc-violet-3);
134+
}
135+
136+
.social-links {
137+
width: 100%;
138+
text-align: left;
139+
list-style: none;
140+
}
141+
142+
.link {
143+
display: flex;
144+
align-items: center;
145+
padding: 0.5rem;
146+
color: var(--oc-violet-0);
147+
transition: all 0.2s ease-in-out;
148+
&:hover {
149+
color: var(--oc-violet-3);
150+
background: var(--oc-gray-7);
151+
}
152+
}
153+
154+
.icon {
155+
display: inline-flex;
156+
justify-content: center;
157+
align-items: center;
158+
margin-right: 0.5rem;
159+
aspect-ratio: 1/1;
160+
width: 2rem;
161+
font-size: 1.5rem;
162+
}
163+
164+
.qrcode {
165+
margin: 2rem auto;
166+
padding: 0.5rem;
167+
aspect-ratio: 1/1;
168+
width: 12rem;
169+
border-radius: 1rem;
170+
background-color: white;
171+
172+
> img {
173+
width: 100%;
174+
}
175+
}
176+
177+
@keyframes rotate {
178+
from {
179+
transform: translate(-50%, -50%) rotate(0deg);
180+
}
181+
to {
182+
transform: translate(-50%, -50%) rotate(360deg);
183+
}
184+
}
185+
186+
@media (min-width: 768px) {
187+
.qrcode {
188+
display: none;
189+
}
190+
}
191+
</style>
24192
</head>
25193

26-
<body class="bg-gray-800 text-gray-400 text-lg">
27-
<section class="py-16 text-center">
28-
<div class="avatar mb-4 mx-auto w-32 h-32 rounded-full bg-center"></div>
29-
<h1 class="text-3xl text-violet-400">Elantris Hsu</h1>
30-
<div class="mb-16 text-xl text-gray-200">Frontend Developer</div>
31-
<div class="mx-auto px-8 w-full max-w-2xl">
32-
<p class="mb-8 text-justify">
33-
一名專職資訊系統的網頁前端工程師，參與過電子商務平台服務、產品內容後台管理系統、企業內部管理系統等專案，主要工作內容包含設計操作流程、規劃系統架構、實作前端資料流、串接後端服務等。
34-
</p>
35-
<p class="mb-8 text-justify">
36-
曾擔任小組長主導團隊開發進度，與 PM 討論客戶需求與流程規劃、主持 Scrum 會議協助安排開發流程、主持 Code Review
37-
會議強化整體程式碼品質、整理技術文件分享知識協助其他同事完成任務、負責公司內各專案的 Git 架構等管理工作。
38-
</p>
39-
</div>
40-
</section>
41-
42-
<section class="py-16 bg-slate-600 text-gray-200" id="skills">
43-
<h2 class="w-full mb-16 text-center text-5xl text-gray-400">Skills</h2>
44-
<div class="mx-auto w-full max-w-5xl">
45-
<div class="flex justify-between flex-wrap">
46-
<div class="mb-8 w-full md:w-4/12 px-8">
47-
<h3 class="mb-4 text-xl text-center">Language</h3>
48-
<ul class="pl-4">
49-
<li>HTML / CSS / JavaScript</li>
50-
<li>Sass / Less</li>
51-
<li>TypeScript</li>
52-
<li>PostgreSQL / GraphQL</li>
53-
</ul>
54-
</div>
55-
<div class="mb-8 w-full md:w-4/12 px-8">
56-
<h3 class="mb-4 text-xl text-center">Development</h3>
57-
<ul class="pl-4">
58-
<li>Git</li>
59-
<li>Node.js</li>
60-
<li>ESLint</li>
61-
<li>Prettier</li>
62-
<li>Webpack</li>
63-
<li>Vite</li>
64-
</ul>
65-
</div>
66-
<div class="mb-8 w-full md:w-4/12 px-8">
67-
<h3 class="mb-4 text-xl text-center">Framework</h3>
68-
<ul class="pl-4">
69-
<li>Ant Design</li>
70-
<li>Bootstrap</li>
71-
<li>Material UI</li>
72-
<li>Semantic UI</li>
73-
<li>Tailwind CSS</li>
74-
<li>React.js</li>
75-
<li>Express.js</li>
76-
<li>Next.js</li>
77-
<li>Firebase</li>
78-
<li>Hasura</li>
79-
</ul>
80-
</div>
81-
</div>
82-
</div>
83-
</section>
84-
85-
<section class="py-16" id="projects">
86-
<h2 class="w-full mb-16 text-center text-5xl">Projects</h2>
87-
<div class="mx-auto w-full max-w-5xl">
88-
<div class="flex justify-between flex-wrap">
89-
<div class="mb-8 w-full md:w-6/12 px-4">
90-
<img src="https://i.imgur.com/RnwGtgt.png" alt="attention-please" class="w-full" />
91-
<div class="p-4 bg-zinc-800">
92-
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/attention-please"> 簽到提醒機器人 </a>
93-
<p>透過文字訊息中的標記成員與表情回應來實作 Discord 已讀簽到功能。</p>
94-
</div>
95-
</div>
96-
<div class="mb-8 w-full md:w-6/12 px-4">
97-
<img src="https://i.imgur.com/jpJz873.png" alt="Commander" class="w-full" />
98-
<div class="p-4 bg-zinc-800">
99-
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/commander"> 點名紀錄機器人 </a>
100-
<p>使用指令快速紀錄「當前有接聽語音頻道」的伺服器成員同時製作出席統計報表。</p>
101-
</div>
102-
</div>
103-
<div class="mb-8 w-full md:w-6/12 px-4">
104-
<img src="https://i.imgur.com/2UJO8Ew.png" alt="attention-please" class="w-full" />
105-
<div class="p-4 bg-zinc-800">
106-
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/eedice">擲骰計算機器人</a>
107-
<p>支援各種骰子語法，讓 GM、DM、KP 都能輕鬆使用，減少計算負擔讓玩家都能更沉浸在劇情當中。</p>
108-
</div>
109-
</div>
110-
<div class="mb-8 w-full md:w-6/12 px-4">
111-
<img src="https://i.imgur.com/qAcd7El.png" alt="attention-please" class="w-full" />
112-
<div class="p-4 bg-zinc-800">
113-
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/what2eat">吃什麼機器人</a>
114-
<p>隨機抽選一道外送平台上出現的餐點，提供靈感給不知道吃什麼才好的人。</p>
115-
</div>
116-
</div>
117-
</div>
118-
</div>
119-
</section>
120-
121-
<footer class="py-8 bg-gray-900">
122-
<div class="text-center">
123-
<a href="https://github.com/Elantris">
124-
<button class="py-2 px-4 rounded hover:bg-gray-600 transition-all">
125-
<i class="fa-brands fa-github text-2xl"></i>
126-
</button>
127-
</a>
128-
<a href="https://www.linkedin.com/in/elantris/">
129-
<button class="py-2 px-4 rounded hover:bg-sky-600 transition-all">
130-
<i class="fa-brands fa-linkedin text-2xl"></i>
131-
</button>
132-
</a>
133-
<a href="https://discord.gg/Ctwz4BB">
134-
<button class="py-2 px-4 rounded hover:bg-indigo-600 transition-all">
135-
<i class="fa-brands fa-discord text-2xl"></i>
136-
</button>
137-
</a>
138-
</div>
139-
</footer>
194+
<body>
195+
<div class="container">
196+
<main>
197+
<img src="./profile.jpg" alt="profile" class="avatar" />
198+
<h1 class="title">Elantris</h1>
199+
<h2>Front-end Developer</h2>
200+
<ul class="social-links">
201+
<li>
202+
<a href="https://github.com/Elantris" class="link">
203+
<div class="icon"><i class="fa-brands fa-github"></i></div>
204+
<span>github.com/Elantris</span>
205+
</a>
206+
</li>
207+
<li>
208+
<a href="https://www.linkedin.com/in/elantris/" class="link">
209+
<div class="icon"><i class="fa-brands fa-linkedin"></i></div>
210+
<span>www.linkedin.com/in/elantris/</span>
211+
</a>
212+
</li>
213+
<li>
214+
<a href="https://discord.gg/Ctwz4BB" class="link">
215+
<div class="icon"><i class="fa-brands fa-discord"></i></div>
216+
<span>discord.gg/Ctwz4BB</span>
217+
</a>
218+
</li>
219+
<li>
220+
<a href="https://hackmd.io/@eelayntris" class="link">
221+
<div class="icon"><i class="fa-solid fa-file-lines"></i></div>
222+
<span>hackmd.io/@eelayntris</span>
223+
</a>
224+
</li>
225+
</ul>
226+
</main>
227+
</div>
228+
229+
<div class="qrcode">
230+
<img src="./qrcode.png" alt="qrcode" />
231+
</div>
140232
</body>
141233
</html>

Diff for: ‎qrcode.png

50.6 KB
Loading

Diff for: ‎tailwind.config.js

-8
This file was deleted.

0 commit comments

Comments
 (0)