update UI

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

src/app/layout.tsx

@@ -3,11 +3,12 @@ import '@radix-ui/themes/styles.css';
 import '~/styles/globalStyles.css';
 import '~/styles/theme-config.css';
 import type { Metadata } from 'next';
+import dynamic from 'next/dynamic';
 import { Caveat } from 'next/font/google';
 import type { ReactNode } from 'react';
 
-import { Cursor } from '~/app/Cursor';
-import { Header } from '~/app/Header';
+import { Cursor } from '~/components/Cursor';
+const Header = dynamic(() => import('~/components/Header'));
 
 interface Props {
   children: ReactNode;

src/app/page.tsx

@@ -1,8 +1,8 @@
 import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
 
-import { Eyecatch } from '~/app/Eyecatch';
-import { Skills } from '~/app/Skill';
-
+const Eyecatch = dynamic(() => import('~/sections/Eyecatch'));
+const Skills = dynamic(() => import('~/sections/Skill'));
 
 const TopPage: NextPage = () => {
   return (

src/components/Header/index.tsx

@@ -0,0 +1,20 @@
+import { Box, Button, Flex, Text } from '@radix-ui/themes';
+
+import * as style from '~/components/Header/header.css';
+
+const Header = () => {
+  return (
+    <section>
+      <Box className={style.wrapper} position={'sticky'} p={'3'}>
+        <Flex display={'flex'} align={'center'} justify={'between'}>
+          <Text weight={'bold'} size={'6'}>
+            {"Kenzo's Portfolio"}
+          </Text>
+          <Button className={style.FilledButton}>🤝 contact me</Button>
+        </Flex>
+      </Box>
+    </section>
+  );
+};
+
+export default Header;

src/sections/Eyecatch/index.tsx

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

src/sections/Skill/index.tsx

@@ -0,0 +1,71 @@
+import { Box, Container, Flex, Text } from '@radix-ui/themes';
+
+import * as style from '~/sections/Skill/skill.css';
+
+const skillData = [
+  {
+    title: 'Language',
+    levels: {
+      Skilled: [{ name: 'TypeScript' }, { name: 'JavaScript' }],
+      Able: [{ name: 'Go' }, { name: 'Python' }],
+      Interested: [{ name: 'Rust' }, { name: 'Dart' }],
+    },
+  },
+  {
+    title: 'Frontend Framework',
+    levels: {
+      Skilled: [{ name: 'React.js' }, { name: 'Next.js' }],
+      Able: [{ name: 'Astro.js' }, { name: 'Gatsby' }],
+      Interested: [{ name: 'Solid.js' }, { name: 'Svelte' }, { name: 'Remix' }, { name: 'qwik' }],
+    },
+  },
+  {
+    title: 'Runtime',
+    levels: {
+      Skilled: [{ name: 'Node.js' }],
+      Able: [{ name: 'bun' }],
+      Interested: [{ name: 'Deno' }],
+    },
+  },
+];
+
+const Skills = () => {
+  return (
+    <Flex direction="column" gap="6" mt="9">
+      <Container id="skills">
+        <Flex direction="column" gap="6">
+          <Text weight="bold" size="9">
+            # Skills.
+          </Text>
+          <Flex gap={'9'} justify={'between'} wrap={'wrap'}>
+            {skillData.map((category, categoryIndex) => (
+              <Flex direction="column" gap="3" key={categoryIndex}>
+                <Text weight="bold" size="8">
+                  [{category.title}]
+                </Text>
+                {Object.entries(category.levels).map(([level, skills], levelIndex) => (
+                  <Flex direction="column" gap="3" key={levelIndex}>
+                    <Box>
+                      <Text size={'7'} weight={'bold'} className={style.underlinedText}>
+                        - {level}
+                      </Text>
+                    </Box>
+                    <Flex gap="6" wrap="wrap">
+                      {skills.map((skill, skillIndex) => (
+                        <Flex key={skillIndex} align="center" gap="3">
+                          <Text size="6">{skill.name}</Text>
+                        </Flex>
+                      ))}
+                    </Flex>
+                  </Flex>
+                ))}
+              </Flex>
+            ))}
+          </Flex>
+        </Flex>
+      </Container>
+    </Flex>
+  );
+};
+
+export default Skills;

src/sections/Skill/skill.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+const underlinedText = style({
+  background: 'linear-gradient(transparent 60%, #fbe32d 40%)',
+});
+
+export { underlinedText };