Skip to content

Commit fb00787

Browse files
ElantrisElantris
committed
2024
1 parent 58e640d commit fb00787

File tree

3 files changed

+116
-61
lines changed

3 files changed

+116
-61
lines changed

‎.prettierrc

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

‎index.css

-12
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,7 @@
22
display: none !important;
33
}
44

5-
body {
6-
background: var(--oc-gray-9);
7-
}
8-
9-
.container {
10-
color: var(--oc-gray-5);
11-
}
12-
135
.avatar {
146
background-image: url('./profile.jpg');
157
background-size: 153%;
168
}
17-
18-
h1 {
19-
color: var(--oc-gray-0);
20-
}

‎index.html

+109-49
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,8 @@
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 | Front End Developer</title>
13+
<title>Elantris | Frontend Developer</title>
1414
<link rel="shortcut icon" href="profile.jpg" />
15-
<link
16-
rel="stylesheet"
17-
href="https://cdnjs.cloudflare.com/ajax/libs/open-color/1.9.1/open-color.min.css"
18-
integrity="sha512-2w5aQudV1xnQLU0ED240kcVlHuIEwapWiW9hOIQnLxZM5zbPEU8e+eVGTw4jD/sU0hPkI10707ceWTt1s0VBlA=="
19-
crossorigin="anonymous"
20-
referrerpolicy="no-referrer"
21-
/>
2215
<link
2316
rel="stylesheet"
2417
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -30,52 +23,119 @@
3023
<script src="https://cdn.tailwindcss.com"></script>
3124
</head>
3225

33-
<body>
34-
<div class="container mx-auto my-8 rounded p-8 w-full max-w-2xl">
26+
<body class="bg-gray-800 text-gray-400 text-lg">
27+
<section class="py-16 text-center">
3528
<div class="avatar mb-4 mx-auto w-32 h-32 rounded-full bg-center"></div>
36-
<h1 class="mb-8 text-3xl text-center">Elantris Hsu</h1>
37-
<p class="mb-4 text-justify">
38-
一名專職資訊系統的網頁前端工程師，參與過 SaaS
39-
平台服務、後台管理、內部系統等專案，主要工作內容包含設計系統架構、規劃前端資料流、串接後端服務、實作商業邏輯等。
40-
</p>
41-
<p class="mb-4 text-justify">
42-
自 2015
43-
年開始自學網頁前端技術，於實習中、正職中面臨新挑戰並且持續學習新技能。曾擔任小組長主導團隊開發進度，負責的任務包含開發流程細節規劃、主持
44-
Code Review 會議、技術分享、員工訓練、管裡 Git 專案等。
45-
</p>
46-
<p class="mb-4 text-justify">
47-
閒暇時間熱衷於網頁相關技術，密切關注現代前端框架、第三方套件、雲端服務等社群趨勢。偶爾撰寫網頁爬蟲、瀏覽器插件、聊天室機器人等專案將日常生活的瑣事自動化。
48-
</p>
49-
<p class="mb-2 text-justify">目前營運中的 Discord 機器人服務：</p>
50-
<ul class="mb-8 pl-4">
51-
<li class="list-disc">
52-
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/attention-please">Attention Please</a>
53-
<p>透過文字訊息中的標記成員與表情回應來實作 Discord 已讀簽到功能。</p>
54-
</li>
55-
<li class="list-disc">
56-
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/commander">Commander</a>
57-
<p>透過指令快速紀錄「當前有接聽語音頻道」的伺服器成員並且匯出出席統計報表。</p>
58-
</li>
59-
<li class="list-disc">
60-
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/eedice">eeDice</a>
61-
<p>支援各種骰子語法，讓 GM、DM、KP 都能輕鬆使用，減少計算負擔讓玩家都能更沉浸在劇情當中。</p>
62-
</li>
63-
<li class="list-disc">
64-
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/what2eat">What2Eat</a>
65-
<p>隨機抽選一道 Foodpanda 上出現的餐點，提供靈感給不知道吃什麼才好的人。</p>
66-
</li>
67-
</ul>
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>
68120

121+
<footer class="py-8 bg-gray-900">
69122
<div class="text-center">
70123
<a href="https://github.com/Elantris">
71-
<button class="py-2 px-4 rounded hover:bg-gray-500 transition-all">
72-
<i class="fa-brands fa-github text-2xl"></i></button
73-
></a>
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>
74133
<a href="https://discord.gg/Ctwz4BB">
75-
<button class="py-2 px-4 rounded hover:bg-indigo-500 transition-all">
76-
<i class="fa-brands fa-discord text-2xl"></i></button
77-
></a>
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>
78138
</div>
79-
</div>
139+
</footer>
80140
</body>
81141
</html>

0 commit comments

Comments
 (0)