create project page

src/app/layout.tsx

@@ -4,7 +4,6 @@ import StyledComponentsRegistry from '@/lib/registry';
 import { GlobalStyle } from '@/styles/GlobalStyle';
 import { theme } from '@/styles/theme';
 import { ThemeProvider } from 'styled-components';
-import localFont from 'next/font/local';
 import { Quicksand } from 'next/font/google';
 
 const font = Quicksand({

src/app/project/page.styled.ts

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+export const ContainerWrapper = styled.div`
+    margin-left: 320px;
+    height: 100vh;
+    background-color: ${({ theme }) => theme.colors.gray};
+
+    @media screen and (max-width: 1260px) {
+        margin-left: 0;
+    }
+`;
+
+export const Container = styled.div``;
+
+export const ProjectContainer = styled.div`
+    height: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    @media screen and (max-width: 1600px) {
+        max-width: 952px;
+    }
+
+    @media screen and (max-width: 904px) {
+        width: 364px;
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+`;
+
+export const ProjectList = styled.ul`
+    display: flex;
+    justify-content: space-between;
+    @media screen and (max-width: 904px) {
+        flex-wrap: wrap;
+    }
+`;

src/app/project/page.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import CProjectCard from '@/components/c-project-card';
+import CSideBar from '@/components/c-sidebar';
+import CSubHeader from '@/components/c-sub-header';
+import * as S from './page.styled';
+
+export default function ProjectPage() {
+    return (
+        <>
+            <CSideBar />
+            <S.ContainerWrapper>
+                <S.Container>
+                    <S.ProjectContainer>
+                        <CSubHeader title="Projects" />
+                        <S.ProjectList>
+                            <CProjectCard
+                                title="Portfolio V2"
+                                techStack={['ts', 'react', 'next', 'docker', 'aws']}
+                                description={
+                                    'Second iteration of portfolio developed using Next.js and deployed through AWS Amplify'
+                                }
+                                imgSrc="/image/Project/portfolio.jpg"
+                            />
+                            <CProjectCard
+                                title="Tastetionary"
+                                techStack={['ts', 'go', 'nest', 'react', 'next', 'docker', 'aws']}
+                                description={
+                                    'A lunchtime menu and restaurant assistant service, designed to streamline the menu selection process for busy working professionals by offering location-based recommendations for nearby dining options.'
+                                }
+                                imgSrc="/image/Project/taste.png"
+                            />
+                            <CProjectCard
+                                title="With Trip"
+                                techStack={['ts', 'go', 'mysql', 'react', 'next', 'docker', 'aws']}
+                                description={
+                                    'A travel-focused expense tracking web-application that users can document trip expenses individually or as a group.'
+                                }
+                                imgSrc="/image/Project/trip2.png"
+                            />
+                        </S.ProjectList>
+                    </S.ProjectContainer>
+                </S.Container>
+            </S.ContainerWrapper>
+        </>
+    );
+}

src/components/c-nav-button/index.tsx

@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion';
 import * as S from './page.styled';
 
 interface Props {
@@ -6,15 +7,28 @@ interface Props {
     clickEvent?: () => void;
 }
 
+const buttonVariants = {
+    transition: {
+        opacity: 1,
+        type: 'spring',
+        duration: 0.5,
+        bounce: 0.5,
+        delayChildren: 0.3,
+        staggerChildren: 0.2,
+    },
+};
+
 export default function CNavButton({ title, isActive, clickEvent }: Props) {
     return (
-        <S.Button
-            $isActive={isActive}
-            onClick={() => {
-                if (clickEvent) clickEvent();
-            }}
-        >
-            <S.Title>{title}</S.Title>
-        </S.Button>
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={buttonVariants}>
+            <S.Button
+                $isActive={isActive}
+                onClick={() => {
+                    if (clickEvent) clickEvent();
+                }}
+            >
+                <S.Title>{title}</S.Title>
+            </S.Button>
+        </motion.div>
     );
 }

src/components/c-project-card/page.styled.ts

@@ -1,18 +1,16 @@
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
-// import Image from "next/image";
 
 export const Container = styled.div`
-    width: 408px;
+    width: 350px;
     position: relative;
     overflow: hidden;
-    /* background-color: #fff; */
     border-radius: 25px;
     box-shadow: 4px 12px 30px 6px rgba(0, 0, 0, 0.09);
     cursor: pointer;
 
-    @media screen and (max-width: 1441px) {
-        width: 280px;
+    @media screen and (max-width: 1600px) {
+        width: 300px;
     }
 
     @media screen and (max-width: 904px) {
@@ -31,13 +29,11 @@ export const Content = styled.div`
     justify-content: center;
     padding: 20px;
     height: 300px;
-    /* min-height: 250px; */
 `;
 
 export const TitleContainer = styled(motion.div)`
     z-index: 1;
     position: relative;
-    /* color: #fff; */
 `;
 
 export const Title = styled.div`
@@ -53,9 +49,6 @@ export const ThumbNailContainer = styled.div`
 export const Thumbnail = styled.div`
     height: 300px;
     margin-top: 20px;
-    /* position: relative; */
-    /* position: absolute;
-    bottom: 0; */
 `;
 
 export const Image = styled.img`

src/components/c-sidebar/page.styled.ts

@@ -6,11 +6,10 @@ export const Wrapper = styled.div`
 `;
 
 export const Container = styled(motion.nav)<{ $active: boolean }>`
-    position: fixed;
-    min-width: 230px;
+    width: 320px;
     height: 100vh;
     max-height: 100vh;
-    min-width: 200px;
+    position: fixed;
     background-color: aliceblue;
     flex-direction: column;
     z-index: 2;

src/styles/theme.ts

@@ -3,6 +3,7 @@ import { DefaultTheme } from 'styled-components';
 const colors = {
     white: '#ffffff',
     black: '#000000',
+    gray: '#fbfbfb',
 };
 
 export const theme: DefaultTheme = {