SquidSpirit
0e08db5c34
All checks were successful
Frontend CI / build (push) Successful in 1m22s
### Description - Implement the home page about me section - Terminal styled self introduction - Animated Motto ### Package Changes _No response_ ### Screenshots | Desktop (2K 2160x1440) | Mobile (iPhone16 Pro 390x844) | | --- | --- | | <video src="attachments/a6ce3af0-1f25-4f79-89af-191e2148949f" title="Screencast From 2025-01-20 03-23-37.mp4" controls></video> | <video src="attachments/59e4ae24-dc16-4a56-88a9-11b9912c8fd4" title="Screencast From 2025-01-20 03-32-20.mp4" controls></video> | ### Reference Resolves #7 ### Checklist - [x] A milestone is set Reviewed-on: #26 Co-authored-by: SquidSpirit <squid@squidspirit.com> Co-committed-by: SquidSpirit <squid@squidspirit.com>
19 lines
785 B
TypeScript
19 lines
785 B
TypeScript
import AnimatedMark from "@/lib/home/framework/ui/AnimatedMark";
|
|
|
|
export default function Motto() {
|
|
return (
|
|
<div className="mx-auto flex h-screen max-w-screen-xl flex-col items-center justify-center gap-y-2.5 px-4 md:gap-y-8 md:px-6">
|
|
<div className="flex w-[19rem] flex-col gap-y-3 text-3xl font-bold text-gray-800 md:w-[38rem] md:gap-y-4 md:text-6xl">
|
|
<div className="flex w-full flex-row items-center justify-start gap-x-2.5">
|
|
<span>Keep</span>
|
|
<AnimatedMark text="Learning" direction="left" />
|
|
</div>
|
|
<div className="flex w-full flex-row items-center justify-end gap-x-2.5 md:gap-x-4">
|
|
<AnimatedMark text="Keep" direction="right" />
|
|
<span>Progressing</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|