\r\n
\r\n );\r\n}\r\n\r\nexport default MouseFollower;\r\n","import React, { Suspense, lazy, useEffect, useState } from 'react';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport { Link } from 'react-router-dom';\r\nimport gsap from 'gsap';\r\nimport styles from './MainPage.module.scss';\r\nimport MainPageImages from '../../data/MainPageImages';\r\nimport Logo from '../../component/Layout/Logo';\r\nimport MouseFollower from '../../component/Layout/MouseFollower';\r\n\r\nconst SlideAlert = lazy(() => import('../../component/Alert/SlideAlert'));\r\n\r\nfunction MainPage() {\r\n const [currentProject, setCurrentProject] = useState({ id: '', title: '', category: '' });\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n let sections = document.querySelectorAll(`.${styles.section}`),\r\n images = document.querySelectorAll(`.${styles.background}`),\r\n outerWrappers = document.querySelectorAll(`[class*=\"${styles.wrapperOuter}\"]`),\r\n innerWrappers = document.querySelectorAll(`[class*=\"${styles.wrapperInner}\"]`);\r\n\r\n let currentIndex = -1;\r\n let wrap = (index, max) => (index + max) % max;\r\n let animating;\r\n\r\n const gotoSection = (index, direction) => {\r\n index = wrap(index, sections.length);\r\n animating = true;\r\n\r\n let timeline = gsap.timeline({\r\n defaults: { duration: 1.25, ease: \"power1.inOut\" },\r\n onComplete: () => (animating = false)\r\n });\r\n\r\n if (currentIndex >= 0) {\r\n gsap.set(sections[currentIndex], { zIndex: 0 });\r\n timeline.to(images[currentIndex], { yPercent: -15 * direction })\r\n .set(sections[currentIndex], { autoAlpha: 0 });\r\n }\r\n\r\n gsap.set(sections[index], { autoAlpha: 1, zIndex: 1 });\r\n timeline.fromTo(\r\n [outerWrappers[index], innerWrappers[index]],\r\n { yPercent: (i) => (i ? -100 * direction : 100 * direction) },\r\n { yPercent: 0 },\r\n 0\r\n ).fromTo(images[index], { yPercent: 15 * direction }, { yPercent: 0 }, 0)\r\n\r\n currentIndex = index;\r\n\r\n setCurrentProject(MainPageImages[index]);\r\n }\r\n\r\n const handleWheel = (event) => {\r\n if (!animating) {\r\n const direction = event.deltaY > 0 ? 1 : -1;\r\n gotoSection(currentIndex + direction, direction);\r\n }\r\n }\r\n\r\n let touchStartY = 0;\r\n let touchEndY = 0;\r\n const handleTouchStart = (e) => {\r\n touchStartY = e.changedTouches[0].screenY;\r\n };\r\n const handleTouchEnd = (e) => {\r\n touchEndY = e.changedTouches[0].screenY;\r\n handleGesture();\r\n };\r\n const handleGesture = () => {\r\n if (touchEndY < touchStartY && !animating) {\r\n gotoSection(currentIndex + 1, 1);\r\n }\r\n if (touchEndY > touchStartY && !animating) {\r\n gotoSection(currentIndex - 1, -1);\r\n }\r\n };\r\n window.addEventListener(\"touchstart\", handleTouchStart);\r\n window.addEventListener(\"touchend\", handleTouchEnd);\r\n window.addEventListener('wheel', handleWheel);\r\n\r\n // const handleTouch = (e) => e.changedTouches[0].screenY;\r\n\r\n // let removeEventListeners;\r\n\r\n // const addEventListeners = () => {\r\n // window.addEventListener('wheel', handleWheel);\r\n\r\n // let touchStartY = 0;\r\n\r\n // const handleTouchStart = (e) => {\r\n // touchStartY = handleTouch(e);\r\n // };\r\n\r\n // const handleTouchEnd = (e) => {\r\n // const touchEndY = handleTouch(e);\r\n // if (!animating) {\r\n // const direction = touchEndY < touchStartY ? 1 : -1;\r\n // gotoSection(currentIndex + direction, direction);\r\n // }\r\n // };\r\n\r\n // window.addEventListener('touchstart', handleTouchStart);\r\n // window.addEventListener('touchend', handleTouchEnd);\r\n\r\n // removeEventListeners = () => {\r\n // window.removeEventListener('wheel', handleWheel);\r\n // window.removeEventListener('touchstart', handleTouchStart);\r\n // window.removeEventListener('touchend', handleTouchEnd);\r\n // };\r\n // };\r\n\r\n // const removeEventListeners = () => {\r\n // window.removeEventListener('wheel', handleWheel);\r\n // window.removeEventListener('touch', handleTouch);\r\n // }\r\n\r\n gotoSection(0, 1);\r\n // addEventListeners();\r\n\r\n // return () => removeEventListeners();\r\n return () => {\r\n window.removeEventListener(\"touchstart\", handleTouchStart);\r\n window.removeEventListener(\"touchend\", handleTouchEnd);\r\n window.addEventListener('wheel', handleWheel);\r\n };\r\n }, []);\r\n\r\n const handleSectionClick = (category, title) => {\r\n navigate(`/list/${encodeURIComponent(category)}/${encodeURIComponent(title)}`);\r\n };\r\n\r\n return (\r\n <>\r\n Take a look
\r\n @ 2024
\r\n\r\n\r\n
\r\n\r\n {MainPageImages.map((project, index) => (\r\n \r\n
\r\n {currentProject.id} — 014
\r\n{currentProject.title}
\r\n{currentProject.category}
\r\nscroll
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {message}\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default SlideAlert;\r\n","import { useState, useEffect } from \"react\";\r\n\r\nconst useMobileDetection = () => {\r\n const [isMobile, setIsMobile] = useState(false);\r\n \r\n useEffect(() => {\r\n setIsMobile(/android|iPhone|iPad|iPod/i.test(navigator.userAgent));\r\n }, []);\r\n\r\n return isMobile;\r\n};\r\n\r\nexport default useMobileDetection;"],"names":["_ref","direction","storageKey","isMobile","useMobileDetection","message","shouldShow","setShouldShow","useState","useEffect","sessionStorage","getItem","setItem","_jsx","_Fragment","children","className","styles","setIsMobile","test","navigator","userAgent"],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/js/231.fa14e4e6.chunk.js b/static/js/231.fa14e4e6.chunk.js
deleted file mode 100644
index 625b6d5..0000000
--- a/static/js/231.fa14e4e6.chunk.js
+++ /dev/null
@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkppweb=self.webpackChunkppweb||[]).push([[231],{801:(e,t,n)=>{n.d(t,{A:()=>r});n(43);var s=n(579);const r=function(){return(0,s.jsx)("div",{style:{position:"relative",height:"15vh",width:"100vw"},children:(0,s.jsx)("span",{style:{fontSize:"clamp(0.6rem,1.5vw,0.9rem)",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textWrap:"nowrap"},children:"\xa9 2024 Heesu Cho. All Rights Reserved"})})}},547:(e,t,n)=>{n.d(t,{A:()=>i});n(43);var s=n(426),r=n(579);const i=function(e){let{title:t}=e;return(0,r.jsx)(r.Fragment,{children:(0,r.jsx)("div",{className:s.A.projectHeader,children:(0,r.jsx)("h1",{className:s.A.title,children:t})})})}},577:(e,t,n)=>{n.d(t,{A:()=>i,h:()=>r});var s=n(43);const r=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:4;const[t,n]=(0,s.useState)(e);return(0,s.useEffect)((()=>{const s=()=>{const s=window.innerWidth<=768?e-1:e;s!==t&&n(s)};return window.addEventListener("resize",s),s(),()=>window.removeEventListener("resize",s)}),[e,t]),t},i=(e,t)=>{const n=Array.from({length:t},(()=>[]));return e.forEach(((e,s)=>{n[s%t].push(e)})),n}},231:(e,t,n)=>{n.r(t),n.d(t,{default:()=>O});var s=n(43),r=n(216);const i={delta:10,preventScrollOnSwipe:!1,rotationAngle:0,trackMouse:!1,trackTouch:!0,swipeDuration:1/0,touchEventOptions:{passive:!0}},o={first:!0,initial:[0,0],start:0,swiping:!1,xy:[0,0]},c="mousemove",a="mouseup";function l(e,t){if(0===t)return e;const n=Math.PI/180*t;return[e[0]*Math.cos(n)+e[1]*Math.sin(n),e[1]*Math.cos(n)-e[0]*Math.sin(n)]}function u(e,t){const n=t=>{const n="touches"in t;n&&t.touches.length>1||e(((e,r)=>{r.trackMouse&&!n&&(document.addEventListener(c,s),document.addEventListener(a,u));const{clientX:i,clientY:d}=n?t.touches[0]:t,h=l([i,d],r.rotationAngle);return r.onTouchStartOrOnMouseDown&&r.onTouchStartOrOnMouseDown({event:t}),Object.assign(Object.assign(Object.assign({},e),o),{initial:h.slice(),xy:h,start:t.timeStamp||0})}))},s=t=>{e(((e,n)=>{const s="touches"in t;if(s&&t.touches.length>1)return e;if(t.timeStamp-e.start>n.swipeDuration)return e.swiping?Object.assign(Object.assign({},e),{swiping:!1}):e;const{clientX:r,clientY:o}=s?t.touches[0]:t,[c,a]=l([r,o],n.rotationAngle),u=c-e.xy[0],d=a-e.xy[1],h=Math.abs(u),p=Math.abs(d),g=(t.timeStamp||0)-e.start,j=Math.sqrt(h*h+p*p)/(g||1),v=[u/(g||1),d/(g||1)],m=function(e,t,n,s){return e>t?n>0?"Right":"Left":s>0?"Down":"Up"}(h,p,u,d),w="number"===typeof n.delta?n.delta:n.delta[m.toLowerCase()]||i.delta;if(h\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default Header;\r\n","import { useState, useEffect } from \"react\";\r\n\r\nconst divideArrayIntoChunks = (array, chunkCount) => {\r\n const chunks = Array.from({ length: chunkCount }, () => []);\r\n array.forEach((item, index) => {\r\n chunks[index % chunkCount].push(item);\r\n });\r\n return chunks;\r\n};\r\n\r\nexport const useChunkCount = (initialChunkCount = 4) => {\r\n const [chunkCount, setChunkCount] = useState(initialChunkCount);\r\n\r\n useEffect(() => {\r\n const updateChunkCount = () => {\r\n const newChunkCount = window.innerWidth <= 768 ? initialChunkCount - 1 : initialChunkCount;\r\n\r\n if (newChunkCount !== chunkCount) {\r\n setChunkCount(newChunkCount);\r\n }\r\n };\r\n\r\n window.addEventListener('resize', updateChunkCount);\r\n updateChunkCount();\r\n\r\n return () => window.removeEventListener('resize', updateChunkCount);\r\n }, [initialChunkCount, chunkCount]);\r\n\r\n return chunkCount;\r\n}\r\n\r\n\r\nexport default divideArrayIntoChunks;","/* global document */\nimport * as React from \"react\";\nimport {\n AttachTouch,\n SwipeDirections,\n DOWN,\n SwipeEventData,\n HandledEvents,\n LEFT,\n RIGHT,\n Setter,\n ConfigurationOptions,\n SwipeableDirectionCallbacks,\n SwipeableHandlers,\n SwipeableProps,\n SwipeablePropsWithDefaultOptions,\n SwipeableState,\n SwipeCallback,\n TapCallback,\n UP,\n Vector2,\n} from \"./types\";\n\nexport {\n LEFT,\n RIGHT,\n UP,\n DOWN,\n SwipeDirections,\n SwipeEventData,\n SwipeableDirectionCallbacks,\n SwipeCallback,\n TapCallback,\n SwipeableHandlers,\n SwipeableProps,\n Vector2,\n};\n\nconst defaultProps: ConfigurationOptions = {\n delta: 10,\n preventScrollOnSwipe: false,\n rotationAngle: 0,\n trackMouse: false,\n trackTouch: true,\n swipeDuration: Infinity,\n touchEventOptions: { passive: true },\n};\nconst initialState: SwipeableState = {\n first: true,\n initial: [0, 0],\n start: 0,\n swiping: false,\n xy: [0, 0],\n};\nconst mouseMove = \"mousemove\";\nconst mouseUp = \"mouseup\";\nconst touchEnd = \"touchend\";\nconst touchMove = \"touchmove\";\nconst touchStart = \"touchstart\";\n\nfunction getDirection(\n absX: number,\n absY: number,\n deltaX: number,\n deltaY: number\n): SwipeDirections {\n if (absX > absY) {\n if (deltaX > 0) {\n return RIGHT;\n }\n return LEFT;\n } else if (deltaY > 0) {\n return DOWN;\n }\n return UP;\n}\n\nfunction rotateXYByAngle(pos: Vector2, angle: number): Vector2 {\n if (angle === 0) return pos;\n const angleInRadians = (Math.PI / 180) * angle;\n const x =\n pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);\n const y =\n pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);\n return [x, y];\n}\n\nfunction getHandlers(\n set: Setter,\n handlerProps: { trackMouse: boolean | undefined }\n): [\n {\n ref: (element: HTMLElement | null) => void;\n onMouseDown?: (event: React.MouseEvent) => void;\n },\n AttachTouch\n] {\n const onStart = (event: HandledEvents) => {\n const isTouch = \"touches\" in event;\n // if more than a single touch don't track, for now...\n if (isTouch && event.touches.length > 1) return;\n\n set((state, props) => {\n // setup mouse listeners on document to track swipe since swipe can leave container\n if (props.trackMouse && !isTouch) {\n document.addEventListener(mouseMove, onMove);\n document.addEventListener(mouseUp, onUp);\n }\n const { clientX, clientY } = isTouch ? event.touches[0] : event;\n const xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);\n\n props.onTouchStartOrOnMouseDown &&\n props.onTouchStartOrOnMouseDown({ event });\n\n return {\n ...state,\n ...initialState,\n initial: xy.slice() as Vector2,\n xy,\n start: event.timeStamp || 0,\n };\n });\n };\n\n const onMove = (event: HandledEvents) => {\n set((state, props) => {\n const isTouch = \"touches\" in event;\n // Discount a swipe if additional touches are present after\n // a swipe has started.\n if (isTouch && event.touches.length > 1) {\n return state;\n }\n\n // if swipe has exceeded duration stop tracking\n if (event.timeStamp - state.start > props.swipeDuration) {\n return state.swiping ? { ...state, swiping: false } : state;\n }\n\n const { clientX, clientY } = isTouch ? event.touches[0] : event;\n const [x, y] = rotateXYByAngle([clientX, clientY], props.rotationAngle);\n const deltaX = x - state.xy[0];\n const deltaY = y - state.xy[1];\n const absX = Math.abs(deltaX);\n const absY = Math.abs(deltaY);\n const time = (event.timeStamp || 0) - state.start;\n const velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);\n const vxvy: Vector2 = [deltaX / (time || 1), deltaY / (time || 1)];\n\n const dir = getDirection(absX, absY, deltaX, deltaY);\n\n // if swipe is under delta and we have not started to track a swipe: skip update\n const delta =\n typeof props.delta === \"number\"\n ? props.delta\n : props.delta[dir.toLowerCase() as Lowercase{title}
\r\n\r\n
\r\n\r\n {(showGrid && !slideIsOpen) && (\r\n \r\n
View Grid
\r\n\r\n {chunkedImages.map((chunk, chunkIndex) => (\r\n
\r\n )}\r\n\r\n {(!showGrid && slideIsOpen) && (\r\n <>\r\n \r\n {chunk.map((image, index) => (\r\n
\r\n ))}\r\n \r\n \r\n handleOnClick(chunkIndex, chunkCount, index)}\r\n className={styles.gridImg}\r\n />\r\n \r\n
\r\n ))}\r\n \r\n \r\n \r\n \r\n 
\r\n \r\n
\r\n {currentImageIndex + 1} / {images.length}
\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default Header;\r\n","import { useState, useEffect } from \"react\";\r\n\r\nconst divideArrayIntoChunks = (array, chunkCount) => {\r\n const chunks = Array.from({ length: chunkCount }, () => []);\r\n array.forEach((item, index) => {\r\n chunks[index % chunkCount].push(item);\r\n });\r\n return chunks;\r\n};\r\n\r\nexport const useChunkCount = (initialChunkCount = 4) => {\r\n const [chunkCount, setChunkCount] = useState(initialChunkCount);\r\n\r\n useEffect(() => {\r\n const updateChunkCount = () => {\r\n const newChunkCount = window.innerWidth <= 768 ? initialChunkCount - 1 : initialChunkCount;\r\n\r\n if (newChunkCount !== chunkCount) {\r\n setChunkCount(newChunkCount);\r\n }\r\n };\r\n\r\n window.addEventListener('resize', updateChunkCount);\r\n updateChunkCount();\r\n\r\n return () => window.removeEventListener('resize', updateChunkCount);\r\n }, [initialChunkCount, chunkCount]);\r\n\r\n return chunkCount;\r\n}\r\n\r\n\r\nexport default divideArrayIntoChunks;","const ProjectList = [\r\n {\r\n title: \"&nd STICK CHEEK\",\r\n category: \"Beauty\",\r\n date: \"2023.12\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Beauty/&nd%20STICK%20CHEEK/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Beauty/&nd%20STICK%20CHEEK/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Beauty/&nd%20STICK%20CHEEK/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Beauty/&nd%20STICK%20CHEEK/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"BETTER THAN CONTOUR\",\r\n category: \"Beauty\",\r\n date: \"2024.03\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Beauty/BETTER%20THAN%20CONTOUR/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Beauty/BETTER%20THAN%20CONTOUR/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Beauty/BETTER%20THAN%20CONTOUR/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Beauty/BETTER%20THAN%20CONTOUR/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"SHEER POWDER PEARLS\",\r\n category: \"Beauty\",\r\n date: \"2024.05\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Beauty/SHEER%20POWDER%20PEARLS/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Beauty/SHEER%20POWDER%20PEARLS/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Beauty/SHEER%20POWDER%20PEARLS/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Beauty/SHEER%20POWDER%20PEARLS/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"GLASTING COLOR GLOSS_JP\",\r\n category: \"Beauty\",\r\n date: \"2024.09\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Beauty/GLASTING%20COLOR%20GLOSS_JP/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Beauty/GLASTING%20COLOR%20GLOSS_JP/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Beauty/GLASTING%20COLOR%20GLOSS_JP/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Beauty/GLASTING%20COLOR%20GLOSS_JP/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"SHEER TINTED STICK\",\r\n category: \"Beauty\",\r\n date: \"2024.09\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Beauty/SHEER%20TINTED%20STICK/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Beauty/SHEER%20TINTED%20STICK/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Beauty/SHEER%20TINTED%20STICK/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Beauty/SHEER%20TINTED%20STICK/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"1\",\r\n category: \"Personal Work\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/1/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/1/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/1/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/1/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"2\",\r\n category: \"Personal Work\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/2/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/2/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/2/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/2/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"3\",\r\n category: \"Personal Work\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/3/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/3/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/3/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/3/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"4\",\r\n category: \"Personal Work\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/4/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/4/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/4/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/4/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"5\",\r\n category: \"Personal Work\",\r\n date: \"2022.05\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/5/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/5/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/5/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/5/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"6\",\r\n category: \"Personal Work\",\r\n date: \"2022.06\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/6/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/6/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/6/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/6/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"7\",\r\n category: \"Personal Work\",\r\n date: \"2023.02\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/7/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/7/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/7/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/7/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"8\",\r\n category: \"Personal Work\",\r\n date: \"2022.05\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/8/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/8/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/8/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/8/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"9\",\r\n category: \"Personal Work\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/9/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/9/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/9/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/9/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"10\",\r\n category: \"Personal Work\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/10/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/10/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/10/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Personal%20Work/10/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"1\",\r\n category: \"Profile\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Profile/1/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Profile/1/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Profile/1/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Profile/1/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"2\",\r\n category: \"Profile\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Profile/2/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Profile/2/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Profile/2/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Profile/2/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"3\",\r\n category: \"Profile\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Profile/3/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Profile/3/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Profile/3/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Profile/3/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"1\",\r\n category: \"Snap\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Snap/1/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Snap/1/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Snap/1/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Snap/1/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"2\",\r\n category: \"Snap\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Snap/2/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Snap/2/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Snap/2/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Snap/2/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"3\",\r\n category: \"Snap\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Snap/3/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Snap/3/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Snap/3/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Snap/3/1.webp`,\r\n }\r\n },\r\n {\r\n title: \"4\",\r\n category: \"Snap\",\r\n date: \"2022\",\r\n img: {\r\n small: `${process.env.PUBLIC_URL}/imgs/Snap/4/1-s.webp`,\r\n medium: `${process.env.PUBLIC_URL}/imgs/Snap/4/1-m.webp`,\r\n large: `${process.env.PUBLIC_URL}/imgs/Snap/4/1-l.webp`,\r\n xlarge: `${process.env.PUBLIC_URL}/imgs/Snap/4/1.webp`,\r\n }\r\n }\r\n];\r\n\r\nexport default ProjectList;","// extracted by mini-css-extract-plugin\nexport default {\"nav\":\"Category_nav__T50K5\",\"active\":\"Category_active__Bz3tR\",\"categoryButton\":\"Category_categoryButton__Z4Ogh\",\"categoryContainer\":\"Category_categoryContainer__2Y8kc\",\"open\":\"Category_open__px9HT\"};","import React, { useState } from 'react';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport styles from './Category.module.scss';\r\nimport CloseButton from '../Buttons/CloseButton';\r\n\r\nfunction Category({ selectedCategory }) {\r\n const navigate = useNavigate();\r\n const [categoryOpen, setCategoryOpen] = useState(false);\r\n\r\n const categories = [\r\n 'All',\r\n 'Beauty',\r\n 'Personal Work',\r\n 'Profile',\r\n 'Snap',\r\n 'Log'\r\n ];\r\n\r\n const toggleCategory = () => {\r\n setCategoryOpen((prevCategoryOpen) => !prevCategoryOpen);\r\n }\r\n\r\n const closeCategory = (category) => {\r\n setCategoryOpen(false);\r\n navigate(`/list?category=${category}`)\r\n }\r\n\r\n return (\r\n <>\r\n {title}
\r\n\r\n {selectedCategory === 'All' ? 'Category' : selectedCategory}\r\n
\r\n\r\n\r\n closeCategory(category)}\r\n >\r\n {category}\r\n \r\n ))}\r\n
\r\n\r\n \r\n {categories.map((category) => (\r\n navigate(`/list?category=${category}`)}\r\n >\r\n {category}\r\n \r\n ))}\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default Category;\r\n","import React from 'react';\r\nimport { Link, useLocation } from 'react-router-dom';\r\nimport LazyLoad from 'react-lazyload';\r\nimport styles from './List&Project.module.scss';\r\nimport ProjectList from '../../data/ProjectList';\r\nimport divideArrayIntoChunks, { useChunkCount } from '../../hooks/divideArrayIntoChunks';\r\nimport Header from '../../component/Layout/ProjectHeader';\r\nimport CopyrightBottom from '../../component/Layout/CopyrightBottom';\r\nimport Category from '../../component/Container/Category';\r\n\r\nfunction List() {\r\n const location = useLocation();\r\n const queryParams = new URLSearchParams(location.search);\r\n const selectedCategory = queryParams.get('category') || 'All';\r\n\r\n const filteredData = selectedCategory === 'All'\r\n ? ProjectList\r\n : ProjectList.filter(item => item.category === selectedCategory);\r\n\r\n const chunkCount = useChunkCount();\r\n const chunkedImages = divideArrayIntoChunks(filteredData, chunkCount);\r\n\r\n return (\r\n <>\r\n \r\n {chunkedImages.map((chunk, chunkIndex) => (\r\n
\r\n\r\n \r\n {chunk.map((image, index) => (\r\n \r\n \r\n \r\n {\r\n const aspectRatio = e.target.naturalHeight / e.target.naturalWidth;\r\n e.currentTarget.parentElement.style.paddingBottom = `${aspectRatio * 100}%`;\r\n }}\r\n />\r\n \r\n \r\n\r\n
\r\n ))}\r\n \r\n {image.title}\r\n {image.date}\r\n
\r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nexport default Header;\r\n","import { useState, useEffect } from \"react\";\r\n\r\nconst useMobileDetection = () => {\r\n const [isMobile, setIsMobile] = useState(false);\r\n \r\n useEffect(() => {\r\n setIsMobile(/android|iPhone|iPad|iPod/i.test(navigator.userAgent));\r\n }, []);\r\n\r\n return isMobile;\r\n};\r\n\r\nexport default useMobileDetection;","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"Contact_container__N9Sb1\",\"profileImg\":\"Contact_profileImg__Z9YBm\",\"side\":\"Contact_side__F+BBe\",\"linkBox\":\"Contact_linkBox__EbG-F\",\"linkType\":\"Contact_linkType__7ZvJ1\",\"link\":\"Contact_link__pljtZ\",\"copySuccess\":\"Contact_copySuccess__JxidM\",\"fadeInOut\":\"Contact_fadeInOut__+R45X\",\"siteBy\":\"Contact_siteBy__bZdW4\"};","import React, { useEffect, useState } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport styles from './Contact.module.scss';\r\nimport headerStyles from '../../component/Layout/ProjectHeader.module.scss'\r\nimport Header from '../../component/Layout/ProjectHeader';\r\nimport useMobileDetection from '../../hooks/useMobileDetection';\r\n\r\nfunction Contact() {\r\n const isMobile = useMobileDetection();\r\n\r\n useEffect(() => {\r\n const body = document.querySelector('body');\r\n const header = document.querySelector(`.${headerStyles.projectHeader}`);\r\n\r\n if (header) {\r\n body.style.backgroundColor = '#f5f5f5';\r\n header.style.position = 'fixed';\r\n header.style.backgroundColor = '#f5f5f5';\r\n }\r\n\r\n return () => {\r\n if (header) {\r\n body.style.backgroundColor = '';\r\n header.style.position = '';\r\n header.style.backgroundColor = '';\r\n }\r\n }\r\n }, [])\r\n\r\n const [copySuccess, setCopySuccess] = useState(false);\r\n\r\n const copyToClipboard = () => {\r\n const email = \"abcde@gmail.com\";\r\n navigator.clipboard.writeText(email).then(() => {\r\n if (isMobile) {\r\n alert(\"Copied to clipboard\");\r\n } else {\r\n setCopySuccess(true);\r\n setTimeout(() => {\r\n setCopySuccess(false);\r\n }, 2000);\r\n }\r\n }).catch(err => {\r\n console.error(\"Failed to copy: \", err);\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n {title}
\r\n\r\n 
\r\n\r\n
\r\n\r\n \r\n\r\n \r\n
\r\n \r\n Photographer based in Seoul, Korea\r\n
\r\n Currently affiliated with Rom&nd\r\n
\r\n \r\n
\r\n\r\n \r\n Currently affiliated with Rom&nd\r\n
\r\n \r\n
\r\n
\r\n \r\n E-mail\r\n SNS\r\n
\r\n \r\n
\r\n \r\n ajhjmj9@naver.com\r\n {!isMobile && copySuccess && copied to clipboard}\r\n
\r\n Instagram\r\n \r\n Site by \r\n Cho Minji\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default Contact;\r\n","// extracted by mini-css-extract-plugin\nexport default {\"projectHeader\":\"ProjectHeader_projectHeader__hdWRZ\",\"title\":\"ProjectHeader_title__SLl8W\"};"],"names":["_ref","title","_jsx","_Fragment","children","className","styles","projectHeader","useMobileDetection","isMobile","setIsMobile","useState","useEffect","test","navigator","userAgent","body","document","querySelector","header","headerStyles","style","backgroundColor","position","copySuccess","setCopySuccess","_jsxs","Header","container","profileImg","src","alt","side","info","linkBox","linkType","link","onClick","copyToClipboard","clipboard","writeText","then","alert","setTimeout","catch","err","console","error","Link","to","target","siteBy"],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/main.33505157.js b/static/js/main.33505157.js deleted file mode 100644 index e3a237f..0000000 --- a/static/js/main.33505157.js +++ /dev/null @@ -1,3 +0,0 @@ -/*! For license information please see main.33505157.js.LICENSE.txt */ -(()=>{"use strict";var e={914:(e,t,n)=>{n.d(t,{A:()=>l});var r=n(43),a=n(579);const l=function(e){let{onClick:t,style:n}=e;const[l,o]=(0,r.useState)(window.innerWidth<=479),i=()=>{o(window.innerWidth<=479)};return(0,r.useEffect)((()=>(window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)})),[]),(0,a.jsx)("div",{className:"close-button",onClick:t,style:{...n,...l?{margin:"0 3vw",top:"1vh"}:{margin:"-10px 8px 0"},fontSize:"20px",padding:"5px",position:"fixed",cursor:"pointer"},children:"\u2715"})}},592:(e,t,n)=>{n.d(t,{A:()=>a});n(43);var r=n(579);const a=function(){return(0,r.jsx)("div",{style:{display:"flex",justifyContent:"center",width:"100%"},children:(0,r.jsx)("span",{style:{position:"fixed",top:"2vh",zIndex:"1000",mixBlendMode:"difference",color:"#fff",fontSize:"clamp(2rem, 2.2rem, 2.5rem)",fontWeight:"700",letterSpacing:"4px"},children:"HEESU"})})}},387:(e,t,n)=>{function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t\r\n ✕\r\n
\r\n );\r\n}\r\n\r\nexport default CloseButton;\r\n","import React from 'react';\r\n\r\nfunction Logo() {\r\n return (\r\n \r\n HEESU\r\n
\r\n );\r\n}\r\n\r\nexport default Logo;\r\n","////////////////////////////////////////////////////////////////////////////////\n//#region Types and Constants\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * Actions represent the type of change to a location value.\n */\nexport enum Action {\n /**\n * A POP indicates a change to an arbitrary index in the history stack, such\n * as a back or forward navigation. It does not describe the direction of the\n * navigation, only that the current index changed.\n *\n * Note: This is the default action for newly created history objects.\n */\n Pop = \"POP\",\n\n /**\n * A PUSH indicates a new entry being added to the history stack, such as when\n * a link is clicked and a new page loads. When this happens, all subsequent\n * entries in the stack are lost.\n */\n Push = \"PUSH\",\n\n /**\n * A REPLACE indicates the entry at the current index in the history stack\n * being replaced by a new one.\n */\n Replace = \"REPLACE\",\n}\n\n/**\n * The pathname, search, and hash values of a URL.\n */\nexport interface Path {\n /**\n * A URL pathname, beginning with a /.\n */\n pathname: string;\n\n /**\n * A URL search string, beginning with a ?.\n */\n search: string;\n\n /**\n * A URL fragment identifier, beginning with a #.\n */\n hash: string;\n}\n\n// TODO: (v7) Change the Location generic default from `any` to `unknown` and\n// remove Remix `useLocation` wrapper.\n\n/**\n * An entry in a history stack. A location contains information about the\n * URL path, as well as possibly some arbitrary state and a key.\n */\nexport interface Location