-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (137 loc) · 6.41 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta property="og:title" content="Elantris | Front End Developer" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://elantris.github.io/" />
<meta property="og:image" content="https://elantris.github.io/profile.jpg" />
<base target="_blank" />
<title>Elantris | Frontend Developer</title>
<link rel="shortcut icon" href="profile.jpg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="./index.css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-800 text-gray-400 text-lg">
<section class="py-16 text-center">
<div class="avatar mb-4 mx-auto w-32 h-32 rounded-full bg-center"></div>
<h1 class="text-3xl text-violet-400">Elantris Hsu</h1>
<div class="mb-16 text-xl text-gray-200">Frontend Developer</div>
<div class="mx-auto px-8 w-full max-w-2xl">
<p class="mb-8 text-justify">
一名專職資訊系統的網頁前端工程師，參與過電子商務平台服務、產品內容後台管理系統、企業內部管理系統等專案，主要工作內容包含設計操作流程、規劃系統架構、實作前端資料流、串接後端服務等。
</p>
<p class="mb-8 text-justify">
曾擔任小組長主導團隊開發進度，與 PM 討論客戶需求與流程規劃、主持 Scrum 會議協助安排開發流程、主持 Code Review
會議強化整體程式碼品質、整理技術文件分享知識協助其他同事完成任務、負責公司內各專案的 Git 架構等管理工作。
</p>
</div>
</section>
<section class="py-16 bg-slate-600 text-gray-200" id="skills">
<h2 class="w-full mb-16 text-center text-5xl text-gray-400">Skills</h2>
<div class="mx-auto w-full max-w-5xl">
<div class="flex justify-between flex-wrap">
<div class="mb-8 w-full md:w-4/12 px-8">
<h3 class="mb-4 text-xl text-center">Language</h3>
<ul class="pl-4">
<li>HTML / CSS / JavaScript</li>
<li>Sass / Less</li>
<li>TypeScript</li>
<li>PostgreSQL / GraphQL</li>
</ul>
</div>
<div class="mb-8 w-full md:w-4/12 px-8">
<h3 class="mb-4 text-xl text-center">Development</h3>
<ul class="pl-4">
<li>Git</li>
<li>Node.js</li>
<li>ESLint</li>
<li>Prettier</li>
<li>Webpack</li>
<li>Vite</li>
</ul>
</div>
<div class="mb-8 w-full md:w-4/12 px-8">
<h3 class="mb-4 text-xl text-center">Framework</h3>
<ul class="pl-4">
<li>Ant Design</li>
<li>Bootstrap</li>
<li>Material UI</li>
<li>Semantic UI</li>
<li>Tailwind CSS</li>
<li>React.js</li>
<li>Express.js</li>
<li>Next.js</li>
<li>Firebase</li>
<li>Hasura</li>
</ul>
</div>
</div>
</div>
</section>
<section class="py-16" id="projects">
<h2 class="w-full mb-16 text-center text-5xl">Projects</h2>
<div class="mx-auto w-full max-w-5xl">
<div class="flex justify-between flex-wrap">
<div class="mb-8 w-full md:w-6/12 px-4">
<img src="https://i.imgur.com/RnwGtgt.png" alt="attention-please" class="w-full" />
<div class="p-4 bg-zinc-800">
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/attention-please"> 簽到提醒機器人 </a>
<p>透過文字訊息中的標記成員與表情回應來實作 Discord 已讀簽到功能。</p>
</div>
</div>
<div class="mb-8 w-full md:w-6/12 px-4">
<img src="https://i.imgur.com/jpJz873.png" alt="Commander" class="w-full" />
<div class="p-4 bg-zinc-800">
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/commander"> 點名紀錄機器人 </a>
<p>使用指令快速紀錄「當前有接聽語音頻道」的伺服器成員同時製作出席統計報表。</p>
</div>
</div>
<div class="mb-8 w-full md:w-6/12 px-4">
<img src="https://i.imgur.com/2UJO8Ew.png" alt="attention-please" class="w-full" />
<div class="p-4 bg-zinc-800">
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/eedice">擲骰計算機器人</a>
<p>支援各種骰子語法，讓 GM、DM、KP 都能輕鬆使用，減少計算負擔讓玩家都能更沉浸在劇情當中。</p>
</div>
</div>
<div class="mb-8 w-full md:w-6/12 px-4">
<img src="https://i.imgur.com/qAcd7El.png" alt="attention-please" class="w-full" />
<div class="p-4 bg-zinc-800">
<a class="text-blue-400" href="https://hackmd.io/@eelayntris/what2eat">吃什麼機器人</a>
<p>隨機抽選一道外送平台上出現的餐點，提供靈感給不知道吃什麼才好的人。</p>
</div>
</div>
</div>
</div>
</section>
<footer class="py-8 bg-gray-900">
<div class="text-center">
<a href="https://github.com/Elantris">
<button class="py-2 px-4 rounded hover:bg-gray-600 transition-all">
<i class="fa-brands fa-github text-2xl"></i>
</button>
</a>
<a href="https://www.linkedin.com/in/elantris/">
<button class="py-2 px-4 rounded hover:bg-sky-600 transition-all">
<i class="fa-brands fa-linkedin text-2xl"></i>
</button>
</a>
<a href="https://discord.gg/Ctwz4BB">
<button class="py-2 px-4 rounded hover:bg-indigo-600 transition-all">
<i class="fa-brands fa-discord text-2xl"></i>
</button>
</a>
</div>
</footer>
</body>
</html>