+
+ {data.title}
+ +
+ {data.badges.map((slug) => {
+ return
+ + +
+ {/* eslint-disable-next-line @next/next/no-img-element */}
{
- return (
- = ({ projectID, project }) => {
- const [badges, setBadges] = useState([])
-
- useEffect(() => {
- setBadges(
- project.badges.map((badge) =>
{
- return (
-
-
- )
-}
-
-export default Loading
diff --git a/apps/portfolio/src/components/Loading/index.ts b/apps/portfolio/src/components/Loading/index.ts
deleted file mode 100644
index 7963e2a..0000000
--- a/apps/portfolio/src/components/Loading/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Loading from "./Loading"
-
-export default Loading
diff --git a/apps/portfolio/src/components/Loading/style.scss b/apps/portfolio/src/components/Loading/style.scss
deleted file mode 100644
index 14d4c74..0000000
--- a/apps/portfolio/src/components/Loading/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.loading {
- @apply transition-opacity ease-in;
-
- animation: fade-in 2s;
- @keyframes fade-in {
- 0% {
- opacity: 0;
- }
-
- 25% {
- opacity: 0;
- }
-
- 100% {
- opacity: 1;
- }
- }
-}
diff --git a/apps/portfolio/src/components/ProjectCard/ProjectCard.tsx b/apps/portfolio/src/components/ProjectCard/ProjectCard.tsx
index 9fcaa15..8e5c36a 100644
--- a/apps/portfolio/src/components/ProjectCard/ProjectCard.tsx
+++ b/apps/portfolio/src/components/ProjectCard/ProjectCard.tsx
@@ -1,7 +1,7 @@
import "./style.scss"
import { PortfolioProject } from "@developomp-site/content/src/types/types"
-import { type FC, useEffect, useState } from "react"
+import Link from "next/link"
import Badge from "@/components/Badge"
@@ -10,26 +10,23 @@ interface ProjectCardProps {
project: PortfolioProject
}
-const ProjectCard: FCLoading...
-
- 
-
{
- setIsTocOpened((prev) => !prev)
- }}
- >
-
- Table of Contents
- {isTocOpened ? (
- // Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
-
- ) : (
- // Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
-
- )}
-
-
-
-
-
-
-
-
- - ) -} - -export default Toc diff --git a/apps/portfolio/src/components/Toc/index.ts b/apps/portfolio/src/components/Toc/index.ts deleted file mode 100644 index b729c10..0000000 --- a/apps/portfolio/src/components/Toc/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Toc from "./Toc" - -export default Toc diff --git a/apps/portfolio/src/components/Toc/style.scss b/apps/portfolio/src/components/Toc/style.scss deleted file mode 100644 index e69de29..0000000 diff --git a/apps/portfolio/src/main.tsx b/apps/portfolio/src/main.tsx deleted file mode 100644 index 9f3ed5d..0000000 --- a/apps/portfolio/src/main.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import "@fontsource/noto-sans-kr/400.css" -import "@fontsource/noto-sans-kr/700.css" -import "@fontsource/source-code-pro" -import "./index.scss" -import "@developomp-site/blog/src/styles/anchor.scss" -import "@developomp-site/blog/src/styles/callout.scss" -import "@developomp-site/blog/src/styles/colorChip.scss" -import "@developomp-site/blog/src/styles/heading.scss" -import "@developomp-site/blog/src/styles/img.scss" -import "@developomp-site/blog/src/styles/mark.scss" - -import ReactDOM from "react-dom/client" - -import App from "./App.tsx" - -ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( -(undefined)
- const [isLoading, setIsLoading] = useState(true)
-
- const [match, params] = useRoute("/project/:id")
-
- useTitle(pageData?.title || "Loading")
- useMeta({ property: "og:title", content: pageData?.title })
-
- useEffect(() => {
- if (!match) return
- ;(async () => {
- try {
- if (!(params.id in portfolio.projects)) return
-
- const data =
- portfolio.projects[
- params.id as keyof typeof portfolio.projects
- ]
-
- const fetched_content = await import(
- `@developomp-site/content/dist/content/projects/${params.id}.json`
- )
-
- setPageData({
- content: fetched_content.content,
- toc: fetched_content.toc,
- title: data.name,
- image: data.image,
- overview: data.overview,
- badges: data.badges,
- repo: data.repo,
- })
- } catch {
- return
- }
-
- setIsLoading(false)
- })()
- }, [match, params])
-
- if (!match) return
- -
{project.name}
+{project.name}
+ {/* eslint-disable-next-line @next/next/no-img-element */}{badges}
+
+ {project.badges.map((badge) => (
+
= ({ projectID, project }) => {
}}
/>
-
+
)
}
-
-export default ProjectCard
diff --git a/apps/portfolio/src/components/Toc/Toc.tsx b/apps/portfolio/src/components/Toc/Toc.tsx
deleted file mode 100644
index 2a3114c..0000000
--- a/apps/portfolio/src/components/Toc/Toc.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import "./style.scss"
-
-import { styled } from "@linaria/react"
-import { type FC, useState } from "react"
-import { Collapse } from "react-collapse"
-
-const StyledTocToggleButton = styled.button`
- cursor: pointer;
- border: none;
- text-align: left;
- background-color: rgba(0, 0, 0, 0);
- width: 100%;
- padding: 0.5rem;
-`
-
-const StyledCollapseContainer = styled.div`
- * {
- transition: height 200ms ease-out;
- }
-`
-
-const Toc: FC<{ data?: string }> = (props) => {
- const [isTocOpened, setIsTocOpened] = useState(false)
-
- if (!props.data) return <>
-
- return (
- <>
- - - ) -} - -export default Toc diff --git a/apps/portfolio/src/components/Toc/index.ts b/apps/portfolio/src/components/Toc/index.ts deleted file mode 100644 index b729c10..0000000 --- a/apps/portfolio/src/components/Toc/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Toc from "./Toc" - -export default Toc diff --git a/apps/portfolio/src/components/Toc/style.scss b/apps/portfolio/src/components/Toc/style.scss deleted file mode 100644 index e69de29..0000000 diff --git a/apps/portfolio/src/main.tsx b/apps/portfolio/src/main.tsx deleted file mode 100644 index 9f3ed5d..0000000 --- a/apps/portfolio/src/main.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import "@fontsource/noto-sans-kr/400.css" -import "@fontsource/noto-sans-kr/700.css" -import "@fontsource/source-code-pro" -import "./index.scss" -import "@developomp-site/blog/src/styles/anchor.scss" -import "@developomp-site/blog/src/styles/callout.scss" -import "@developomp-site/blog/src/styles/colorChip.scss" -import "@developomp-site/blog/src/styles/heading.scss" -import "@developomp-site/blog/src/styles/img.scss" -import "@developomp-site/blog/src/styles/mark.scss" - -import ReactDOM from "react-dom/client" - -import App from "./App.tsx" - -ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( -
- 404 -
- -- Page Not Found -
- - ) -} - -export default NotFound diff --git a/apps/portfolio/src/routes/NotFound/index.ts b/apps/portfolio/src/routes/NotFound/index.ts deleted file mode 100644 index 40e3de5..0000000 --- a/apps/portfolio/src/routes/NotFound/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import NotFound from "./NotFound" - -export default NotFound diff --git a/apps/portfolio/src/routes/NotFound/style.css b/apps/portfolio/src/routes/NotFound/style.css deleted file mode 100644 index 2b960d2..0000000 --- a/apps/portfolio/src/routes/NotFound/style.css +++ /dev/null @@ -1,389 +0,0 @@ -/* glitch */ - -.glitch span { - animation: paths 5s step-end infinite; -} - -.glitch::before { - animation: paths 5s step-end infinite, opacity 5s step-end infinite, - font 8s step-end infinite, movement 10s step-end infinite; -} - -.glitch::after { - animation: paths 5s step-end infinite, opacity 5s step-end infinite, - font 7s step-end infinite, movement 8s step-end infinite; -} - -/* layers */ - -.layers { - position: relative; -} - -.layers::before, -.layers::after { - content: attr(data-text); - position: absolute; - width: 110%; - z-index: -1; -} - -.layers::before { - top: 10px; - left: 15px; - color: #e0287d; -} - -.layers::after { - top: 5px; - left: -10px; - color: #1bc7fb; -} - -/* keyframes */ - -@keyframes paths { - 0% { - clip-path: polygon( - 0% 43%, - 83% 43%, - 83% 22%, - 23% 22%, - 23% 24%, - 91% 24%, - 91% 26%, - 18% 26%, - 18% 83%, - 29% 83%, - 29% 17%, - 41% 17%, - 41% 39%, - 18% 39%, - 18% 82%, - 54% 82%, - 54% 88%, - 19% 88%, - 19% 4%, - 39% 4%, - 39% 14%, - 76% 14%, - 76% 52%, - 23% 52%, - 23% 35%, - 19% 35%, - 19% 8%, - 36% 8%, - 36% 31%, - 73% 31%, - 73% 16%, - 1% 16%, - 1% 56%, - 50% 56%, - 50% 8% - ); - } - - 5% { - clip-path: polygon( - 0% 29%, - 44% 29%, - 44% 83%, - 94% 83%, - 94% 56%, - 11% 56%, - 11% 64%, - 94% 64%, - 94% 70%, - 88% 70%, - 88% 32%, - 18% 32%, - 18% 96%, - 10% 96%, - 10% 62%, - 9% 62%, - 9% 84%, - 68% 84%, - 68% 50%, - 52% 50%, - 52% 55%, - 35% 55%, - 35% 87%, - 25% 87%, - 25% 39%, - 15% 39%, - 15% 88%, - 52% 88% - ); - } - - 30% { - clip-path: polygon( - 0% 53%, - 93% 53%, - 93% 62%, - 68% 62%, - 68% 37%, - 97% 37%, - 97% 89%, - 13% 89%, - 13% 45%, - 51% 45%, - 51% 88%, - 17% 88%, - 17% 54%, - 81% 54%, - 81% 75%, - 79% 75%, - 79% 76%, - 38% 76%, - 38% 28%, - 61% 28%, - 61% 12%, - 55% 12%, - 55% 62%, - 68% 62%, - 68% 51%, - 0% 51%, - 0% 92%, - 63% 92%, - 63% 4%, - 65% 4% - ); - } - - 45% { - clip-path: polygon( - 0% 33%, - 2% 33%, - 2% 69%, - 58% 69%, - 58% 94%, - 55% 94%, - 55% 25%, - 33% 25%, - 33% 85%, - 16% 85%, - 16% 19%, - 5% 19%, - 5% 20%, - 79% 20%, - 79% 96%, - 93% 96%, - 93% 50%, - 5% 50%, - 5% 74%, - 55% 74%, - 55% 57%, - 96% 57%, - 96% 59%, - 87% 59%, - 87% 65%, - 82% 65%, - 82% 39%, - 63% 39%, - 63% 92%, - 4% 92%, - 4% 36%, - 24% 36%, - 24% 70%, - 1% 70%, - 1% 43%, - 15% 43%, - 15% 28%, - 23% 28%, - 23% 71%, - 90% 71%, - 90% 86%, - 97% 86%, - 97% 1%, - 60% 1%, - 60% 67%, - 71% 67%, - 71% 91%, - 17% 91%, - 17% 14%, - 39% 14%, - 39% 30%, - 58% 30%, - 58% 11%, - 52% 11%, - 52% 83%, - 68% 83% - ); - } - - 76% { - clip-path: polygon( - 0% 26%, - 15% 26%, - 15% 73%, - 72% 73%, - 72% 70%, - 77% 70%, - 77% 75%, - 8% 75%, - 8% 42%, - 4% 42%, - 4% 61%, - 17% 61%, - 17% 12%, - 26% 12%, - 26% 63%, - 73% 63%, - 73% 43%, - 90% 43%, - 90% 67%, - 50% 67%, - 50% 41%, - 42% 41%, - 42% 46%, - 50% 46%, - 50% 84%, - 96% 84%, - 96% 78%, - 49% 78%, - 49% 25%, - 63% 25%, - 63% 14% - ); - } - - 90% { - clip-path: polygon( - 0% 41%, - 13% 41%, - 13% 6%, - 87% 6%, - 87% 93%, - 10% 93%, - 10% 13%, - 89% 13%, - 89% 6%, - 3% 6%, - 3% 8%, - 16% 8%, - 16% 79%, - 0% 79%, - 0% 99%, - 92% 99%, - 92% 90%, - 5% 90%, - 5% 60%, - 0% 60%, - 0% 48%, - 89% 48%, - 89% 13%, - 80% 13%, - 80% 43%, - 95% 43%, - 95% 19%, - 80% 19%, - 80% 85%, - 38% 85%, - 38% 62% - ); - } - - 1%, - 7%, - 33%, - 47%, - 78%, - 93% { - clip-path: none; - } -} - -@keyframes movement { - 0% { - top: 0px; - left: -20px; - } - - 15% { - top: 10px; - left: 10px; - } - - 60% { - top: 5px; - left: -10px; - } - - 75% { - top: -5px; - left: 20px; - } - - 100% { - top: 10px; - left: 5px; - } -} - -@keyframes opacity { - 0% { - opacity: 0.1; - } - - 5% { - opacity: 0.7; - } - - 30% { - opacity: 0.4; - } - - 45% { - opacity: 0.6; - } - - 76% { - opacity: 0.4; - } - - 90% { - opacity: 0.8; - } - - 1%, - 7%, - 33%, - 47%, - 78%, - 93% { - opacity: 0; - } -} - -@keyframes font { - 0% { - font-weight: 100; - color: #e0287d; - filter: blur(3px); - } - - 20% { - font-weight: 500; - color: #fff; - filter: blur(0); - } - - 50% { - font-weight: 300; - color: #1bc7fb; - filter: blur(2px); - } - - 60% { - font-weight: 700; - color: #fff; - filter: blur(0); - } - - 90% { - font-weight: 500; - color: #e0287d; - filter: blur(6px); - } -} diff --git a/apps/portfolio/src/routes/Project/Project.tsx b/apps/portfolio/src/routes/Project/Project.tsx deleted file mode 100644 index fcbf194..0000000 --- a/apps/portfolio/src/routes/Project/Project.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import "./style.scss" - -import portfolio from "@developomp-site/content/dist/portfolio.json" -import { useMeta, useTitle } from "hoofd" -import { type FC, useEffect, useState } from "react" -import { useRoute } from "wouter" - -import Badge from "@/components/Badge" -import Loading from "@/components/Loading" -import Toc from "@/components/Toc" -import NotFound from "@/routes/NotFound" - -export interface PageData { - title: string - toc?: string - content: string - - image: string // image url - overview: string - badges: string[] - repo: string -} - -const Project: FC = () => { - const [pageData, setPageData] = useState
-
- {pageData.title}
- {/* */} - - - -
- {pageData.badges.map((slug) => {
- return
- - -