💄 トップページをしっかりした

92thunder · Feb 9, 2024 · e485abe · e485abe
1 parent 9b0a05f
commit e485abe
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 29 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Box, HStack, Heading, Stack } from "@chakra-ui/react"
+import { Box, HStack, Heading, Image, Stack } from "@chakra-ui/react"
 import { Link } from "@chakra-ui/next-js"
 
 export const Header: React.FC = () => {
@@ -12,17 +12,25 @@ export const Header: React.FC = () => {
 						sx={{ textDecoration: "none" }}
 						textDecoration="none"
 					>
-						92thunder.dev
+						<Image src="/icon.png" alt="icon" width="48px" height="48px" />
 					</Link>
 				</Heading>
 				<HStack spacing={4}>
 					<Box>
-						<Link color="brand.accent" fontWeight="600" href="/blog">
+						<Link
+							_hover={{ color: "brand.accent" }}
+							fontWeight="600"
+							href="/blog"
+						>
 							Blog
 						</Link>
 					</Box>
 					<Box>
-						<Link color="brand.accent" fontWeight="600" href="/about">
+						<Link
+							_hover={{ color: "brand.accent" }}
+							fontWeight="600"
+							href="/about"
+						>
 							About
 						</Link>
 					</Box>

diff --git a/components/HeroArea.tsx b/components/HeroArea.tsx
@@ -1,13 +1,15 @@
 "use client"
-import { Box, Heading, Text, VStack } from "@chakra-ui/react"
+import { Box, Heading, VStack } from "@chakra-ui/react"
 import { useEffect, useState } from "react"
+import { Header } from "./Header"
 
 export const HeroArea: React.FC = () => {
 	const bgColors = ["#313125", "#165C9A", "#C3B03E", "#2A493C", "#6F786B"]
 	const [currentBgColors, setCurrentBgColors] = useState<string[]>([])
 	const [scaleX, setScaleX] = useState<number>(1)
 	const [scaleY, setScaleY] = useState<number>(1)
 	const [gradientAngle, setGradientAngle] = useState<number>(0)
+
 	useEffect(() => {
 		const colors: string[] = []
 		const length = bgColors.length
@@ -28,27 +30,36 @@ export const HeroArea: React.FC = () => {
 		<>
 			<section>
 				<Box
-					h="calc(100vh - 76.8px)"
+					h="100vh"
 					sx={{
-						backgroundSize: "cover",
 						background: `url(./watercolor_bg.jpg), linear-gradient(${gradientAngle}deg, ${currentBgColors})`,
 						backgroundBlendMode: "hard-light",
 						transform: `scale(${scaleX}, ${scaleY})`,
+						backgroundSize: "cover",
 					}}
 				>
-					<VStack
+					<Box
+						sx={{ transform: `scale(${scaleX}, ${scaleY})` }}
+						w="100%"
 						h="100%"
-						justifyContent="center"
-						spacing="16px"
-						sx={{ transform: `scale(${1 / scaleX}, ${1 / scaleY})` }}
+						position="relative"
 					>
-						<Heading as="h2" fontSize={48}>
-							Hello, I&#39;m 92thunder
-						</Heading>
-						<Text fontSize={24} fontWeight="600">
-							A Web Developer Specializing in Front End Development
-						</Text>
-					</VStack>
+						<Header />
+						<VStack
+							h="calc(100vh - 96px)"
+							justifyContent="center"
+							position="absolute"
+							right="0"
+							left="0"
+							top="0"
+							bottom="0"
+							pointerEvents="none"
+						>
+							<Heading as="h2" fontSize="4em" m="0">
+								92thudner.dev
+							</Heading>
+						</VStack>
+					</Box>
 				</Box>
 			</section>
 		</>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -48,11 +48,9 @@ function MyApp({ Component, pageProps }: AppProps) {
 	return (
 		<ChakraProvider theme={chakraTheme}>
 			<Container maxW="100%" minW="container.md" p="0">
-				<Header />
-				<Box minH="calc(100vh - 76px)">
+				<Box minH="100vh">
 					<Component {...pageProps} />
 				</Box>
-				<Footer />
 			</Container>
 		</ChakraProvider>
 	)

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -1,16 +1,20 @@
 import { Box } from "@chakra-ui/react"
 import { NextPage } from "next"
+import { Header } from "../components/Header"
 
 const About: NextPage = () => {
 	return (
-		<Box p="24px" pt="2rem">
-			<dl>
-				<dt>About</dt>
-				<dd>
-					フロントエンドエンジニアとしてテックタッチ株式会社で働いています。
-				</dd>
-			</dl>
-		</Box>
+		<>
+			<Header />
+			<Box p="24px" pt="2rem">
+				<dl>
+					<dt>About</dt>
+					<dd>
+						フロントエンドエンジニアとしてテックタッチ株式会社で働いています。
+					</dd>
+				</dl>
+			</Box>
+		</>
 	)
 }
 

diff --git a/pages/blog/[id].tsx b/pages/blog/[id].tsx
@@ -18,6 +18,7 @@ import { ShareButtons } from "../../components/ShareButtons"
 import ChakraUIRenderer from "chakra-ui-markdown-renderer"
 import remarkGfm from "remark-gfm"
 import { CodeBlock } from "../../components/CodeBlock"
+import { Header } from "../../components/Header"
 
 export async function getStaticPaths() {
 	const results: Post[] = await getPosts()
@@ -115,6 +116,7 @@ const PostPage: NextPage = ({
 				<meta content="92thunder.dev" property="og:site_name" />
 				<meta content="https://92thunder.dev/ogp.png" property="og:image" />
 			</Head>
+			<Header />
 			<Box p="24px" pt="2rem">
 				<VStack alignItems="start" gap={10}>
 					<VStack alignItems="start">

diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -6,6 +6,7 @@ import styles from "../../styles/Home.module.css"
 import { Post } from "../../types"
 import { generateFeed } from "../../libs/generateFeed"
 import { Box, VStack } from "@chakra-ui/react"
+import { Header } from "../../components/Header"
 
 export const getStaticProps: GetStaticProps = async () => {
 	const results: Post[] = await getPosts()
@@ -47,6 +48,7 @@ const Blog: NextPage = ({
 				/>
 			</Head>
 
+			<Header />
 			<Box p="24px" pt="2rem">
 				<main className={styles.main}>
 					<VStack alignItems="start" spacing="16px">

diff --git a/public/icon.png b/public/icon.png