Merge pull request #165 from Jaewoook/refactor/migrate-to-nextjs

Migrate to Next.js

.editorconfig

@@ -2,14 +2,11 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
 [*.md]
 trim_trailing_whitespace = false
 insert_final_newline = false
-
-[*.json]
-indent_size = 2

.env

@@ -1 +1 @@
-PORT=1213
+NEXT_PUBLIC_API=https://portfolio.api.jaewook.me/api

.env.local

@@ -0,0 +1,2 @@
+# NEXT_PUBLIC_API=http://localhost:8888
+NEXT_PUBLIC_API=https://portfolio.api.jaewook.me/api

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    extends: "next/core-web-vitals",
+};

.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+name: "CI"
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: ".tool-versions"
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: ".tool-versions"
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint

.gitignore

@@ -1,8 +1,11 @@
-.DS_Store
-
-node_modules
-build
+/node_modules
+/.next/
+/out/
+/build
 
-yarn-*.log
+.DS_Store
+yarn-debug.log*
+yarn-error.log*
 
-.vercel
+.vercel
+next-env.d.ts

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn run commitlint ${1}

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": false
+}

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.15.0

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Jaewook Ahn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,35 +1,19 @@
-# portfolio-web
+<h1 align="center">Jaewook's Portfolio Web</h1>
 
-## Concept
+<p align="center">My portfolio website built on Next.js.</p>
 
-- Product landing page
-- SPA
-- One page per section
-- interactive contact - like email subscribe
+<p align="center">
+    <a href="https://portfolio.jaewook.me">Visit Website</a>
+    &middot;
+    <a href="https://github.com/Jaewoook/portfolio-web/actions/workflows/ci.yml">
+        <img alt="CI status" src="https://github.com/Jaewoook/portfolio-web/actions/workflows/ci.yml/badge.svg" />
+    </a>
+</p>
 
-## 구성
+## Author
 
-- 기본 정보
-    - 어던 사람인가? - 관심사, 
+- [Jaewook Ahn](https://github.com/Jaewoook)
 
-- 커리어
-    - 다녔던 회사, 포지션
-    - 재직 중 했던 것들
+## License
 
-- 그 외 활동
-    - 깃허브
-
-## Section 구성
-
-0. Site Header (auto hide)
-    - GitHub, Blog
-1. Landing - First
-    - Jaewook Ahn
-    - Web Front-end engineer
-2. Features
-    - Skill Set
-    - Career
-
-X. Contact me
-    - email, message form
-    - GitHub, SNS link
+This project is licensed under the [MIT License](./LICENSE).

app/app.css.ts

@@ -0,0 +1,21 @@
+import { globalStyle, style } from "@vanilla-extract/css";
+
+globalStyle("body", {
+  fontFamily: `"Noto Sans KR", sans-serif`,
+  boxSizing: "border-box",
+});
+
+globalStyle("*, *:before, *:after", {
+  boxSizing: "border-box",
+});
+
+globalStyle("p", {
+  margin: 0,
+});
+
+export const main = style({
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "#000",
+  position: "relative",
+});

app/components/Layer.tsx

@@ -0,0 +1,124 @@
+"use client";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import type { ReactNode } from "react";
+
+import { LayerContext } from "../contexts/LayerContext";
+import type { ILayerContext } from "../contexts/LayerContext";
+
+const BASE_Z_INDEX = 10;
+
+interface LayerRenderParams {
+  zIndex: number;
+  isTopLayer: boolean;
+  focus: () => void;
+  blur: () => void;
+  remove: () => void;
+}
+
+interface LayerProps {
+  layerId: string;
+  children: (renderParams: LayerRenderParams) => ReactNode;
+}
+
+export const Layer = (props: LayerProps) => {
+  const { children, layerId } = props;
+  const { layers, addLayer, removeLayer, focus, blur } =
+    useContext(LayerContext);
+  const zIndex = useMemo(() => {
+    const layerIndex = layers.indexOf(layerId);
+    return layerIndex >= 0 ? BASE_Z_INDEX + layerIndex : -1;
+  }, [layers, layerId]);
+  const isTopLayer = useMemo(() => layers.indexOf(layerId) === layers.length - 1, [layers, layerId]);
+
+  const focusCurrent = useCallback(() => focus(layerId), [focus, layerId]);
+  const blurCurrent = useCallback(() => blur(layerId), [blur, layerId]);
+  const removeCurrent = useCallback(
+    () => removeLayer(layerId),
+    [removeLayer, layerId]
+  );
+
+  useEffect(() => {
+    addLayer(layerId);
+
+    return () => removeLayer(layerId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return children({
+    zIndex,
+    isTopLayer,
+    focus: focusCurrent,
+    blur: blurCurrent,
+    remove: removeCurrent,
+  });
+};
+
+export const LayerManager = (props: React.PropsWithChildren) => {
+  const [layers, setLayers] = useState<string[]>([]);
+
+  const addLayer = useCallback((layerId: string) => {
+    let zIndex = 0;
+    setLayers((prevLayers) => {
+      zIndex = prevLayers.length;
+      return [...prevLayers, layerId];
+    });
+
+    return zIndex;
+  }, []);
+
+  const removeLayer = useCallback(
+    (layerId: string) => {
+      const layerPosition = layers.indexOf(layerId);
+
+      if (layerPosition < 0) {
+        return;
+      }
+
+      setLayers([
+        ...layers.slice(0, layerPosition),
+        ...layers.slice(layerPosition + 1),
+      ]);
+    },
+    [layers]
+  );
+
+  const focus = useCallback(
+    (layerId: string) => {
+      const layerIndex = layers.indexOf(layerId);
+      if (layerIndex < 0) {
+        return;
+      }
+
+      setLayers([
+        ...layers.slice(0, layerIndex),
+        ...layers.slice(layerIndex + 1),
+        layerId,
+      ]);
+    },
+    [layers]
+  );
+
+  // TODO
+  const blur = useCallback((layerId: string) => {}, []);
+
+  const value: ILayerContext = {
+    layers,
+    addLayer,
+    removeLayer,
+    focus,
+    blur,
+  };
+
+  return (
+    <LayerContext.Provider value={value}>
+      {props.children}
+    </LayerContext.Provider>
+  );
+};

app/components/Shortcut/Shortcut.css.ts

@@ -0,0 +1,58 @@
+import { createVar, style, styleVariants } from "@vanilla-extract/css";
+
+export const xPos = createVar();
+export const yPos = createVar();
+
+export const bound = style({
+  position: "absolute",
+  left: xPos,
+  top: yPos,
+});
+
+export const container = style({
+  display: "flex",
+  flexFlow: "column wrap",
+  alignItems: "center",
+  gap: 2,
+});
+
+const baseIconWrapper = style({
+  width: 80,
+  height: 80,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: 72,
+  lineHeight: 1,
+  color: "white",
+});
+
+export const iconWrapper = styleVariants({
+  default: [baseIconWrapper],
+  selected: [baseIconWrapper, {
+    borderColor: "rgba(120, 120, 120, 0.8)",
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderRadius: 4,
+    backgroundColor: "rgba(0, 0, 0, 0.3)"
+  }],
+});
+
+const baseLabel = style({
+  width: "fit-content",
+  fontSize: 14,
+  lineHeight: 1,
+  fontWeight: 500,
+  color: "#fff",
+  userSelect: "none",
+  padding: "4px 2px",
+  textShadow: "0 2px 2px #545454",
+});
+
+export const label = styleVariants({
+  default: [baseLabel],
+  selected: [baseLabel, {
+    backgroundColor: "rgba(0, 28, 209, 0.8)",
+    textShadow: "none",
+  }],
+})