From 952c8f867f7347f69596d47b7fff5363bbbc25a6 Mon Sep 17 00:00:00 2001
From: wooooooood <13pft13@gmail.com>
Date: Sun, 26 Jun 2022 21:38:18 +0900
Subject: [PATCH 1/2] feat. initial mock up

---
 PetitProjects/Team3/package.json     |  3 +-
 PetitProjects/Team3/src/pages/G0.tsx | 94 ++++++++++++++++++++++++++++
 PetitProjects/Team3/yarn.lock        |  5 ++
 3 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 PetitProjects/Team3/src/pages/G0.tsx

diff --git a/PetitProjects/Team3/package.json b/PetitProjects/Team3/package.json
index efd0c57..29bd194 100644
--- a/PetitProjects/Team3/package.json
+++ b/PetitProjects/Team3/package.json
@@ -18,7 +18,8 @@
     "framer-motion": "^6.3.10",
     "jsdom": "^19.0.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-icons": "^4.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",
diff --git a/PetitProjects/Team3/src/pages/G0.tsx b/PetitProjects/Team3/src/pages/G0.tsx
new file mode 100644
index 0000000..61475da
--- /dev/null
+++ b/PetitProjects/Team3/src/pages/G0.tsx
@@ -0,0 +1,94 @@
+import { styled, keyframes } from '@stitches/react';
+import { motion } from 'framer-motion';
+import { BsGithub, BsLinkedin, BsInstagram } from 'react-icons/bs';
+
+const G0 = () => {
+  return (
+    <Wrapper>
+      <Card
+        animate={{
+          y: [0, 25, 0],
+          rotate: [-15, -15, -15],
+        }}
+        transition={{
+          duration: 2,
+          ease: 'easeInOut',
+          repeat: Infinity,
+        }}
+      >
+        <h1>G0</h1>
+        <p>Web Frontend Developer</p>
+        <ul>
+          <li>
+            <BsLinkedin />
+          </li>
+          <li>
+            <BsGithub />
+          </li>
+          <li>
+            <BsInstagram />
+          </li>
+        </ul>
+      </Card>
+    </Wrapper>
+  );
+};
+
+const gradient = keyframes({
+  '0%': {
+    backgroundPosition: '0% 50%',
+  },
+  '50%': {
+    backgroundPosition: '100% 50%',
+  },
+  '100%': {
+    backgroundPosition: '0% 50%',
+  },
+});
+
+const Wrapper = styled('div', {
+  height: '100%',
+  width: '100%',
+  background: 'linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)',
+  backgroundSize: '400% 400%',
+  animation: `${gradient} 15s ease infinite`,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const Card = styled(motion.div, {
+  padding: '2rem 3rem',
+  background: 'rgba( 255, 255, 255, 0.25 )',
+  boxShadow: 'rgba(17, 12, 46, 0.15) 0px 48px 100px 0px',
+  backdropFilter: 'blur( 13.5px )',
+  borderRadius: '20px',
+  border: '1px solid rgba( 255, 255, 255, 0.18 )',
+
+  textAlign: 'center',
+  color: 'white',
+
+  '& h1': {
+    fontSize: '3rem',
+  },
+
+  '& p': {
+    fontSize: '2rem',
+  },
+
+  '& ul': {
+    listStyle: 'none',
+    fontSize: '2rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    padding: '0',
+  },
+
+  '& li:hover': {
+    opacity: '0.7',
+    cursor: 'pointer',
+  },
+});
+
+export default G0;
diff --git a/PetitProjects/Team3/yarn.lock b/PetitProjects/Team3/yarn.lock
index e6b2f4a..b45ae3d 100644
--- a/PetitProjects/Team3/yarn.lock
+++ b/PetitProjects/Team3/yarn.lock
@@ -8852,6 +8852,11 @@ react-element-to-jsx-string@^14.3.4:
     is-plain-object "5.0.0"
     react-is "17.0.2"
 
+react-icons@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
+  integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
+
 react-inspector@^5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.1.tgz#58476c78fde05d5055646ed8ec02030af42953c8"

From 17a93bafa22d964f369f29f141175a108b49b9ee Mon Sep 17 00:00:00 2001
From: wooooooood <13pft13@gmail.com>
Date: Sun, 26 Jun 2022 22:37:01 +0900
Subject: [PATCH 2/2] update ui

---
 PetitProjects/Team3/src/pages/G0.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/PetitProjects/Team3/src/pages/G0.tsx b/PetitProjects/Team3/src/pages/G0.tsx
index 61475da..6a1f1f5 100644
--- a/PetitProjects/Team3/src/pages/G0.tsx
+++ b/PetitProjects/Team3/src/pages/G0.tsx
@@ -17,7 +17,9 @@ const G0 = () => {
         }}
       >
         <h1>G0</h1>
-        <p>Web Frontend Developer</p>
+        <p>
+          <span>Aesthetic</span> Web Frontend Developer
+        </p>
         <ul>
           <li>
             <BsLinkedin />
@@ -70,15 +72,23 @@ const Card = styled(motion.div, {
 
   '& h1': {
     fontSize: '3rem',
+    marginBottom: '0',
   },
 
   '& p': {
-    fontSize: '2rem',
+    fontSize: '1.75rem',
+    margin: 0,
+    padding: '0.75rem 0 1.5rem',
+  },
+
+  '& span': {
+    color: '#233165',
+    fontWeight: 700,
   },
 
   '& ul': {
     listStyle: 'none',
-    fontSize: '2rem',
+    fontSize: '2.25rem',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-around',