Skip to content

Commit

Permalink
🎨 style: ヒーローセクションの実装 #193
Browse files Browse the repository at this point in the history 
* 🎨 style: ヒーローセクション SP実装

* 🎨 style: ヒーローセクション PC実装

* 🐛 fix: アニメーション名ミスタイプ修正

* 🐛 fix: ヒーローセクション絵文字ランダム選択のロジックのミス修正

* 🐛 fix: デバック用コードの削除

* 🐛 fix: 不要なフラグメントの削除

コンソールに、Warningでkey関連のエラーとdivを使ってねといった記述があり、フラグメントを取り除いたところ解決。

* 🐛 fix: 不明瞭、間違った定数名の変更、統一
  • Loading branch information
@pss-aileen
pss-aileen authored May 26, 2024
1 parent a3be167 commit 892316d
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 48 deletions.
76 changes: 29 additions & 47 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import Image from "next/image";
import { basePath } from "../../next.config";
export const BASE_PATH = basePath ? basePath : "";
import GitHubIcon from "@mui/icons-material/GitHub";
import ShareIcon from "@mui/icons-material/Share";
import { SITE_NAME } from "../../lib/constants";
import KeyboardDoubleArrowDownSharpIcon from "@mui/icons-material/KeyboardDoubleArrowDownSharp";
import GradientBackground from "@/components/gradient-background";
import ScreenEmojis from "@/components/screen-emojis";
import EmojiShower from "@/components/hero-section-emoji-shower";

import contributors from "../../Contributors.json";
import {
Expand All @@ -19,56 +21,36 @@ export default function Home() {

return (
<>
<section className="mx-auto mt-20 max-w-2xl px-6 lg:-mb-4 lg:mt-4 lg:flex lg:h-screen lg:max-w-7xl lg:items-center lg:gap-10">
<div className="lg:flex-1">
<p className="hidden bg-stone-100 px-4 py-2 lg:inline-block">
<span className="text-2xl font-bold text-red-600">
{contributorsNumber}
</span>
人が参加中！
</p>
<div className="my-8 w-full lg:hidden">
<Image
src={`${BASE_PATH}/logo.svg`}
width={640}
height={324}
alt="logo"
className="mx-auto w-[70%] max-w-[400px]"
/>
</div>
<p className="mt-4 text-2xl font-bold lg:text-3xl">
誰でも簡単に
<br />
コントリビューション体験 🚀
</p>
<h2 className="mt-4 hidden bg-red-600 px-4 py-2 text-5xl font-bold text-white lg:inline-block">
{SITE_NAME}
</h2>
<div className="mt-4 text-sm leading-relaxed lg:text-lg">
<p>
初心者でも簡単に参加できる日本語のオープンソースプロジェクトです。
</p>
<p>
Git/GitHubの実践的な使い方や、オープンソースでコラボレーションする作法を学べます
🌟
<section className="relative h-screen overflow-hidden">
<EmojiShower />
<div className="absolute bottom-0 left-0 h-20 w-full bg-gradient-to-t from-white to-transparent"></div>
<div className="relative z-10 mx-auto flex h-full items-center justify-start lg:max-w-screen-xl">
<div className=" px-4 lg:px-0">
<h1 className="text-4xl font-bold leading-snug lg:text-6xl lg:leading-normal">
オープンソース
<br className="lg:hidden" />
プロジェクトに
<br />
参加しよう
</h1>
<p className="mt-6 lg:mt-6 lg:text-lg lg:leading-loose">
日本語のチュートリアルでGitHubの使い方を学び、
<br className="hidden lg:block" />
共同開発を体験しましょう。思ったより簡単です。
</p>

<div className="mt-8 flex flex-col items-start gap-4 lg:mt-12 lg:flex-row">
<button className="flex h-12 w-40 items-center justify-center gap-2 rounded-full bg-red-600 px-4 text-center text-white duration-300 hover:opacity-60">
<GitHubIcon className="text-2xl" />
GitHub
</button>
<button className="flex h-12 w-40 items-center justify-center gap-2 rounded-full border border-stone-800 bg-white px-4 text-red-600 duration-300 hover:opacity-60">
<ShareIcon className="text-2xl" />
Share
</button>
</div>
</div>
</div>
<div className="hidden lg:inline-block lg:flex-[0.8]">
<Image
src={`${BASE_PATH}/logo.svg`}
width={640}
height={324}
alt="logo"
className="w-full"
/>
</div>
<p className="mx-auto mb-10 mt-5 rounded-sm bg-stone-100 px-4 py-2 text-center lg:hidden">
<span className="text-2xl font-bold text-red-600">
{contributorsNumber}
</span>
人が参加中！
</p>
</section>

<GradientBackground mainColor={latestContributorsColor}>
Expand Down
131 changes: 131 additions & 0 deletions src/components/hero-section-emoji-shower.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import { Noto_Emoji } from "next/font/google";

const emojiFont = Noto_Emoji({
subsets: ["emoji"],
weight: "300",
display: "swap",
});

const EmojiShower: React.FC = () => {
const emojis = [
"😊",
"😂",
"❤️",
"👍",
"🎉",
"🥳",
"😎",
"💖",
"👏",
"🤔",
"😆",
"🔥",
"✨",
"🥺",
"🤗",
"😁",
"😅",
"🙌",
"😇",
"🍕",
"🎈",
"🎶",
"🌟",
"🍰",
"💪",
"🌸",
"🎂",
"🎁",
"🌞",
"🍔",
"🎨",
"💃",
"🎊",
"🕺",
"🚀",
"🌈",
"🌍",
"🧁",
"🎵",
"🍿",
"🏆",
"🧸",
"🎮",
"👑",
"🍓",
"🎲",
"🚴",
"🍟",
"🦄",
"🌺",
];

const randomEmojis = [];

for (let i = 1; i <= 7; i++) {
const randomNumber = Math.floor(Math.random() * 50);
randomEmojis.push(emojis[randomNumber]);
}

const textRainbowColors = [
"text-rose-500",
"text-orange-500",
"text-yellow-500",
"text-lime-500",
"text-sky-500",
"text-indigo-500",
"text-purple-500",
];

const bgRainbowColors = [
"bg-rose-100",
"bg-orange-100",
"bg-yellow-100",
"bg-lime-100",
"bg-sky-100",
"bg-indigo-100",
"bg-purple-100",
];

const animationsSp = [
"animate-[topToBottomAtHeroSp_6s_linear_infinite]",
"animate-[topToBottomAtHeroSp_6.5s_linear_infinite]",
"animate-[topToBottomAtHeroSp_7s_linear_infinite]",
"animate-[topToBottomAtHeroSp_7.5s_linear_infinite]",
"animate-[topToBottomAtHeroSp_8s_linear_infinite]",
"animate-[topToBottomAtHeroSp_8.5s_linear_infinite]",
"animate-[topToBottomAtHeroSp_9s_linear_infinite]",
"animate-[topToBottomAtHeroSp_9.5s_linear_infinite]",
];

const animationsPc = [
"lg:animate-[topToBottomAtHeroPc_6s_linear_infinite]",
"lg:animate-[topToBottomAtHeroPc_6.5s_linear_infinite]",
"lg:animate-[topToBottomAtHeroPc_7s_linear_infinite]",
"lg:animate-[topToBottomAtHeroPc_7.5s_linear_infinite]",
"lg:animate-[topToBottomAtHeroPc_8s_linear_infinite]",
"lg:animate-[topToBottomAtHeroPc_8.5s_linear_infinite]",
"lg:animate-[topToBottomAtHeroPc_9s_linear_infinite]",
"lg:animate-[topToBottomAtHeroPc_9.5s_linear_infinite]",
];

return (
<div className=" absolute -right-2 -top-8 z-0 flex h-[150vh] rotate-12 lg:-top-[15vh] lg:right-4 lg:rotate-[25deg]">
{randomEmojis.map((emoji, index) => {
return (
<div
key={index}
className={`${emojiFont.className} ${textRainbowColors[index]} ${bgRainbowColors[index]}
px-1 text-3xl lg:px-2 lg:text-6xl`}
>
<div className={`${animationsSp[index]} ${animationsPc[index]}`}>
{emoji}
</div>
</div>
);
})}
</div>
);
};

export default EmojiShower;
20 changes: 19 additions & 1 deletion tailwind.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { transform } from "next/dist/build/swc";
import type { Config } from "tailwindcss";

const config: Config = {
Expand All @@ -18,7 +19,6 @@ const config: Config = {
transform: "translateX(95vw)",
},
},

vertical: {
from: {
transform: "translateY(0)",
Expand All @@ -27,6 +27,24 @@ const config: Config = {
transform: "translateY(80vh)",
},
},
topToBottomAtHeroSp: {
from: {
transform: "translateY(0)",
},

to: {
transform: "translateY(110vh)",
},
},
topToBottomAtHeroPc: {
from: {
transform: "translateY(0)",
},

to: {
transform: "translateY(150vh)",
},
},
},
},
plugins: [],
Expand Down

0 comments on commit 892316d

Please sign in to comment.