🍱 create eyecatch

Kenzo-Wada · Aug 29, 2023 · cfa9cbf · cfa9cbf
1 parent 40b0696
commit cfa9cbf
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 8 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,4 +1,6 @@
 import type { StorybookConfig } from '@storybook/nextjs';
+import path from 'path';
+import { Configuration } from 'webpack';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -16,5 +18,14 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  webpackFinal: async (config: Configuration) => {
+    // 例: モジュール解決の設定を修正
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '~': path.resolve(__dirname, '../src'),
+    };
+    return config;
+  },
 };
 export default config;
diff --git a/src/app/Eyecatch/eyecatch.css.ts b/src/app/Eyecatch/eyecatch.css.ts
@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+
+const container = style({
+  marginBottom: '24px'
+})
+
+const text = style({
+  background: 'linear-gradient(transparent 60%, #fbe32d 40%)'
+})
+
+
+export { text, container }
diff --git a/src/app/Eyecatch/index.tsx b/src/app/Eyecatch/index.tsx
@@ -0,0 +1,23 @@
+import { Button, Container, Flex, Text } from "@radix-ui/themes"
+import type { FC } from "react"
+
+import * as style from "~/app/Eyecatch/eyecatch.css"
+
+export const Eyecatch: FC = () => {
+  return(
+    <Flex direction={'column'} gap={'3'}>
+      <Container className={style.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">❤️ about me</Button>
+          <Button size={'4'} >🤝 Contact Me!!</Button>
+        </Flex>
+      </Container>
+    </Flex>
+  )
+}
diff --git a/src/app/Header/header.css.ts b/src/app/Header/header.css.ts
@@ -0,0 +1,12 @@
+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'
+})
+
+export {wrapper}
+
diff --git a/src/app/Header/index.tsx b/src/app/Header/index.tsx
@@ -0,0 +1,15 @@
+import { Box, Button, Flex, Text } from "@radix-ui/themes";
+import type { FC } from "react";
+
+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>
+      </Flex>
+    </Box>
+  )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,8 @@ import type { Metadata } from 'next';
 import { Caveat } from 'next/font/google';
 import type { ReactNode } from 'react';
 
+import { Header } from '~/app/Header';
+
 interface Props {
   children: ReactNode;
 }
@@ -23,7 +25,10 @@ const RootLayout = (props: Props) => {
   return (
     <html lang="en">
       <body className={font.className}>
-        <Theme>{children}</Theme>
+        <Theme radius='large' hasBackground={false}>
+          <Header />
+          {children}
+        </Theme>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,9 +1,11 @@
-import { Text } from '@radix-ui/themes';
+import type { NextPage } from "next";
 
-const TopPage = () => {
+import { Eyecatch } from '~/app/Eyecatch'
+
+const TopPage: NextPage = () => {
   return (
     <main>
-      <Text>Hello World!</Text>
+      <Eyecatch />
     </main>
   );
 };

diff --git a/src/styles/globalStyles.css.ts b/src/styles/globalStyles.css.ts
@@ -1,13 +1,22 @@
 import { globalStyle } from '@vanilla-extract/css';
 
+const bgColor = '#F4F5F7';
+const gridColor = '#E3E4E6'; 
+
 globalStyle('html', {
   backgroundImage: `
-    repeating-linear-gradient(to bottom, #F7FAFC, #F7FAFC 1px, transparent 1px, transparent 24px),
-    repeating-linear-gradient(to right, #F7FAFC, #F7FAFC 1px, transparent 1px, transparent 24px)
+    repeating-linear-gradient(to bottom, ${gridColor}, ${gridColor} 1px, transparent 1px, transparent 24px),
+    repeating-linear-gradient(to right, ${gridColor}, ${gridColor} 1px, transparent 1px, transparent 24px)
   `,
   backgroundSize: '24px 24px',
+  backgroundColor: `${bgColor}`,
+  margin: '24px'
 });
 
-globalStyle('body,main', {
-  backgroundColor: 'transparent !important',
+globalStyle('body, body *', {
+  color: '#252525',
 });
+
+globalStyle('button', {
+  cursor: 'pointer'
+})
diff --git a/src/styles/theme-config.css b/src/styles/theme-config.css
@@ -1,3 +1,26 @@
 .radix-themes {
   --default-font-family: var(--font-caveat);
+  --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-9: #252525;
+  --accent-10: #0A0A0A;
+  --accent-11: #000000;
+  --accent-a1: var(--black-a1);
+  --accent-a2: var(--black-a2);
+  --accent-a3: var(--black-a3);
+  --accent-a4: var(--black-a4);
+  --accent-a5: var(--black-a5);
+  --accent-a6: var(--black-a6);
+  --accent-a7: var(--black-a7);
+  --accent-a8: var(--black-a8);
+  --accent-a9: var(--black-a9);
+  --accent-a10: var(--black-a10);
+  --accent-a11: var(--black-a11);
+  --accent-a12: var(--black-a1);
 }