🍱 create skills section

package.json

@@ -11,10 +11,12 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^1.1.2",
     "@vanilla-extract/css": "^1.13.0",
     "next": "^13.4.19",
     "react": "^18.2.0",
+    "react-animated-cursor": "^2.8.1",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

src/app/Cursor/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import AnimatedCursor from 'react-animated-cursor';
+
+export const Cursor: FC = () => {
+  return <AnimatedCursor color="37, 37, 37" />;
+};

src/app/Eyecatch/eyecatch.css.ts

@@ -1,12 +1,22 @@
-import { style } from "@vanilla-extract/css";
-
-const container = style({
-  marginBottom: '24px'
-})
+import { style } from '@vanilla-extract/css';
 
 const text = style({
-  background: 'linear-gradient(transparent 60%, #fbe32d 40%)'
-})
+  background: 'linear-gradient(transparent 60%, #fbe32d 40%)',
+});
+
+const OutlinedButton = style({
+  backgroundColor: '#F4F5F7',
+  ':hover': {
+    backgroundColor: '#252525',
+    color: '#F4F5F7',
+  },
+});
 
+const FilledButton = style({
+  ':hover': {
+    backgroundColor: '#fbe32d',
+    color: '#252525',
+  },
+});
 
-export { text, container }
+export { text, OutlinedButton, FilledButton };

src/app/Eyecatch/index.tsx

@@ -1,23 +1,28 @@
-import { Button, Container, Flex, Text } from "@radix-ui/themes"
-import type { FC } from "react"
+import { Button, Container, Flex, Text } from '@radix-ui/themes';
+import type { FC } from 'react';
 
-import * as style from "~/app/Eyecatch/eyecatch.css"
+import * as style from '~/app/Eyecatch/eyecatch.css';
 
 export const Eyecatch: FC = () => {
-  return(
-    <Flex direction={'column'} gap={'3'}>
-      <Container className={style.container}>
+  return (
+    <Flex direction={'column'} gap={'6'} mt={'9'}>
+      <Container>
         <Text weight={'bold'} size={'9'} className={style.text}>
-          Kenzo Wada.<br/>
+          Kenzo Wada.
+          <br />
           Modern, Young and Friendly Frontend Enginner Ever.
         </Text>
       </Container>
       <Container>
         <Flex gap={'6'}>
-          <Button size={'4'} variant="outline">❤️ about me</Button>
-          <Button size={'4'} >🤝 Contact Me!!</Button>
+          <Button size={'4'} variant="outline" className={style.OutlinedButton}>
+            ❤️ about me
+          </Button>
+          <Button size={'4'} className={style.FilledButton}>
+            🤝 Contact Me!!
+          </Button>
         </Flex>
       </Container>
     </Flex>
-  )
-}
+  );
+};

src/app/Header/header.css.ts

@@ -1,12 +1,18 @@
-import { style } from "@vanilla-extract/css";
+import { style } from '@vanilla-extract/css';
 
 const wrapper = style({
   padding: '12px',
   marginBottom: '24px',
   backgroundColor: '#FFFFFF',
-  boxShadow: "0px 5px 15px 0px rgba(0, 0, 0, 0.35)",
-  borderRadius: '12px'
-})
+  boxShadow: '0px 5px 15px 0px rgba(0, 0, 0, 0.35)',
+  borderRadius: '12px',
+});
 
-export {wrapper}
+const FilledButton = style({
+  ':hover': {
+    backgroundColor: '#fbe32d',
+    color: '#252525',
+  },
+});
 
+export { wrapper, FilledButton };

src/app/Header/index.tsx

@@ -1,15 +1,17 @@
-import { Box, Button, Flex, Text } from "@radix-ui/themes";
-import type { FC } from "react";
+import { Box, Button, Flex, Text } from '@radix-ui/themes';
+import type { FC } from 'react';
 
-import * as style from '~/app/Header/header.css'
+import * as style from '~/app/Header/header.css';
 
 export const Header: FC = () => {
   return (
     <Box className={style.wrapper}>
       <Flex display={'flex'} align={'center'} justify={'between'}>
-        <Text weight={'bold'} size={'6'}>{"Kenzo's Portfolio"}</Text>
-        <Button>🤝 contact me</Button>
+        <Text weight={'bold'} size={'6'}>
+          {"Kenzo's Portfolio"}
+        </Text>
+        <Button className={style.FilledButton}>🤝 contact me</Button>
       </Flex>
     </Box>
-  )
-}
+  );
+};

src/app/Skill/index.tsx

@@ -0,0 +1,75 @@
+import { Badge, Box, Container, Flex, Text } from '@radix-ui/themes';
+import type { FC } from 'react';
+
+export const Skills: FC = () => {
+  return (
+    <Flex direction={'column'} gap={'6'} mt={'9'}>
+      <Container>
+        <Flex display={'flex'} justify={'center'}>
+          <Text weight={'bold'} size={'9'}>
+            # Skills.
+          </Text>
+        </Flex>
+        <Flex direction={'column'} gap={'3'}>
+          <Text weight={'bold'} size={'8'}>
+            [Frontend Framework]
+          </Text>
+          <Flex display={'flex'} align={'center'} gap={'3'}>
+            <Text size={'6'}>- React.js</Text>
+            <Box>
+              <Badge color="crimson">Skilled</Badge>
+            </Box>
+          </Flex>
+          <Flex display={'flex'} align={'center'} gap={'3'}>
+            <Text size={'6'}>- Next.js</Text>
+            <Box>
+              <Badge color="crimson">Skilled</Badge>
+            </Box>
+          </Flex>
+          <Flex display={'flex'} align={'center'} gap={'3'}>
+            <Text size={'6'}>- vite.js</Text>
+            <Box>
+              <Badge color="crimson">Skilled</Badge>
+            </Box>
+          </Flex>
+          <Flex display={'flex'} align={'center'} gap={'3'}>
+            <Text size={'6'}>- Astro.js</Text>
+            <Box>
+              <Badge color="teal">Able</Badge>
+            </Box>
+          </Flex>
+          <Flex display={'flex'} align={'center'} gap={'3'}>
+            <Text size={'6'}>- Gatsby</Text>
+            <Box>
+              <Badge color="teal">Able</Badge>
+            </Box>
+          </Flex>
+          <Flex display={'flex'} align={'center'} gap={'3'}>
+            <Text size={'6'}>- Solid.js</Text>
+            <Box>
+              <Badge color="indigo">Interested</Badge>
+            </Box>
+          </Flex>
+          <Flex display={'flex'} align={'center'} gap={'3'}>
+            <Text size={'6'}>- Svelte</Text>
+            <Box>
+              <Badge color="indigo">Interested</Badge>
+            </Box>
+          </Flex>
+          <Flex display={'flex'} align={'center'} gap={'3'}>
+            <Text size={'6'}>- Remix</Text>
+            <Box>
+              <Badge color="indigo">Interested</Badge>
+            </Box>
+          </Flex>
+          <Flex display={'flex'} align={'center'} gap={'3'}>
+            <Text size={'6'}>- qwik</Text>
+            <Box>
+              <Badge color="indigo">Interested</Badge>
+            </Box>
+          </Flex>
+        </Flex>
+      </Container>
+    </Flex>
+  );
+};

src/app/Skill/skill.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+const star = style({});
+
+export { star };

src/app/layout.tsx

@@ -6,6 +6,7 @@ import type { Metadata } from 'next';
 import { Caveat } from 'next/font/google';
 import type { ReactNode } from 'react';
 
+import { Cursor } from '~/app/Cursor';
 import { Header } from '~/app/Header';
 
 interface Props {
@@ -25,7 +26,8 @@ const RootLayout = (props: Props) => {
   return (
     <html lang="en">
       <body className={font.className}>
-        <Theme radius='large' hasBackground={false}>
+        <Cursor />
+        <Theme radius="large" hasBackground={false}>
           <Header />
           {children}
         </Theme>

src/app/page.tsx

@@ -1,11 +1,13 @@
-import type { NextPage } from "next";
+import type { NextPage } from 'next';
 
-import { Eyecatch } from '~/app/Eyecatch'
+import { Eyecatch } from '~/app/Eyecatch';
+import { Skills } from '~/app/Skill';
 
 const TopPage: NextPage = () => {
   return (
     <main>
       <Eyecatch />
+      <Skills />
     </main>
   );
 };

src/styles/globalStyles.css.ts

@@ -1,7 +1,7 @@
 import { globalStyle } from '@vanilla-extract/css';
 
 const bgColor = '#F4F5F7';
-const gridColor = '#E3E4E6'; 
+const gridColor = '#E3E4E6';
 
 globalStyle('html', {
   backgroundImage: `
@@ -10,13 +10,10 @@ globalStyle('html', {
   `,
   backgroundSize: '24px 24px',
   backgroundColor: `${bgColor}`,
-  margin: '24px'
+  margin: '24px',
+  cursor: 'none',
 });
 
 globalStyle('body, body *', {
   color: '#252525',
 });
-
-globalStyle('button', {
-  cursor: 'pointer'
-})

src/styles/theme-config.css

@@ -1,16 +1,16 @@
 .radix-themes {
   --default-font-family: var(--font-caveat);
-  --accent-1: #EFEFEF;
-  --accent-2: #D6D6D6;
-  --accent-3: #BCBCBC;
-  --accent-4: #A3A3A3;
+  --accent-1: #efefef;
+  --accent-2: #d6d6d6;
+  --accent-3: #bcbcbc;
+  --accent-4: #a3a3a3;
   --accent-5: #898989;
   --accent-6: #707070;
   --accent-7: #565656;
-  --accent-8: #3D3D3D;
+  --accent-8: #3d3d3d;
   --accent-9: #252525;
-  --accent-10: #0A0A0A;
-  --accent-11: #000000;
+  --accent-10: #161616;
+  --accent-11: #0a0a0a;
   --accent-a1: var(--black-a1);
   --accent-a2: var(--black-a2);
   --accent-a3: var(--black-a3);