initial setup

src/components/atoms/Link.astro

@@ -0,0 +1,81 @@
+---
+interface Props {
+  to: string
+}
+
+const { to } = Astro.props;
+const currentPath = new URL(Astro.url).pathname.split('/')[1];
+---
+
+<a href={to} class={`/${currentPath}` === to ? 'current' : undefined}>
+  <slot />
+</a>
+
+<style lang="scss">
+  a {
+			text-decoration: none;
+			color: white;
+			font-size: larger;
+			position: relative;
+
+			&::before {
+				content: "{";
+				transform: translateX(-2rem);
+				left: 0;
+				position: absolute;
+				transition-property: transform, opacity;
+				transition-duration: 150ms;
+				transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+			}
+
+			&::after {
+				content: "}";
+				transform: translateX(2rem);
+				right: 0;
+				position: absolute;
+				transition-property: transform, opacity;
+				transition-duration: 150ms;
+				transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+			}
+
+			&:not(.current) {
+				&::after,
+				&::before {
+					opacity: 0;
+				}
+
+				&:hover,
+				&:focus-within {
+					&::before,
+					&::after {
+						opacity: 1;
+					}
+					&::before { transform: translateX(-1rem); }
+				&::after { transform: translateX(1rem); }
+				}
+			}
+
+			&.current {
+				&::before {
+					transition: transform 100ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+					transform: translateX(-2rem);
+				}
+
+				&:hover::before,
+				&:focus-visible::before {
+					transform: translateX(-1rem);
+				}
+
+				&::after {
+					transform: translateX(2rem);
+					transition: transform 100ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+				}
+			
+				&:hover::after,
+				&:focus-visible::after {
+					transform: translateX(1rem);
+					
+				}
+			}
+		}
+</style>

src/components/special/SkillList.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+  title: string;
+  points: Array<string>;
+}
+
+const { title, points } = Astro.props;
+---
+
+<div>
+  <p>{title}</p>
+  <ul>
+    { points.map((skill) => (
+      <li>
+        {skill}
+      </li>
+    ))}
+  </ul>
+</div>
+
+<style lang="scss">
+p {
+  text-align: center;
+  font-size: 1.75rem;
+}
+div {
+  width: calc(100% * 1/3);
+}
+ul {
+  list-style: none;
+  padding: unset;
+  text-align: center;
+
+  li {
+    font-size: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+}
+</style>