Skip to content

Commit 7722f37

Browse files
cherriaecherriae
committed
Add things to portofolio
1 parent 3af4873 commit 7722f37

19 files changed

Lines changed: 554 additions & 329 deletions

‎.gitignore‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
yarn-error.log
38+
39+
# BUCK
40+
buck-out/
41+
\.buckd/
42+
*.keystore
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
50+
51+
fastlane/report.xml
52+
fastlane/Preview.html
53+
fastlane/screenshots
54+
55+
.next/

‎app/layout.tsx‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -44,28 +44,32 @@ export default function RootLayout({
4444
<head/>
4545
<body
4646
className={clsx(
47-
"min-h-screen bg-background w-full scroll-smooth",
47+
"min-h-screen bg-background font-sans antialiased",
4848
fontSans.variable
4949
)}
5050
>
51-
<Providers themeProps={{attribute: "class", defaultTheme: "light", children: children}}>
52-
<main className="px-0">
53-
{children}
54-
</main>
55-
<footer className="bottom-0 w-full relative flex py-3 p-6 text-start z-0 bg-[#c0cbff]">
56-
<div className={"secondary container items-start justify-start md:ml-20"}>
57-
<span className={"font-bold"}>©2023-2024 Jerry</span>
58-
</div>
59-
<Link
60-
isExternal
61-
className="main flex justify-items-end gap-1 text-current"
62-
href="https://github.com/cherriae"
63-
title="Cherriae"
64-
>
65-
<span className={"secondary"}>Made and built by</span>
66-
<p className="text-primary">Jerry</p>
67-
</Link>
68-
</footer>
51+
<Providers themeProps={{attribute: "class", defaultTheme: "light"}}>
52+
<div className="relative flex flex-col min-h-screen">
53+
{/* <main className="mx-auto flex-grow"> */}
54+
{children}
55+
{/* </main> */}
56+
<footer className="w-full py-3 px-6 bg-[#c0cbff]">
57+
<div className="mx-auto flex flex-col md:flex-row justify-between items-center">
58+
<div className="secondary mb-2 md:mb-0">
59+
<span className="font-bold">©2023-2024 Jerry</span>
60+
</div>
61+
<Link
62+
isExternal
63+
className="main flex items-center gap-1 text-current"
64+
href="https://github.com/cherriae"
65+
title="Cherriae"
66+
>
67+
<span className="secondary">Made and built by</span>
68+
<p className="text-primary">Jerry</p>
69+
</Link>
70+
</div>
71+
</footer>
72+
</div>
6973
</Providers>
7074
</body>
7175
</html>

‎app/page.tsx‎

Lines changed: 86 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -8,46 +8,69 @@ import { GithubIcon } from "@/components/icons";
88
import { InstagramIcon } from "@/components/ui/utils/icons";
99
import { IconSvgProps } from "@/types";
1010

11-
1211
const SocialLink = ({ href, icon: Icon, label } : {href: string, icon: React.FC<IconSvgProps>, label: string}) => (
13-
<a
14-
href={href}
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
className="main"
18-
aria-label={label}
12+
<motion.a
13+
initial={{ scale: 0, opacity: 0 }}
14+
animate={{ scale: 1, opacity: 1 }}
15+
whileHover={{ scale: 1.1, rotate: 5 }}
16+
whileTap={{ scale: 0.95 }}
17+
href={href}
18+
target="_blank"
19+
rel="noopener noreferrer"
20+
className="main transition-all duration-300 hover:text-primary"
21+
aria-label={label}
1922
>
20-
<Icon size={43} />
21-
</a>
22-
);
23+
<Icon size={43} />
24+
</motion.a>
25+
);
2326

27+
const fadeInUp = {
28+
initial: { opacity: 0, y: 20 },
29+
animate: { opacity: 1, y: 0 },
30+
transition: { duration: 0.5 }
31+
};
2432

2533
export default function Home() {
2634
return (
27-
<div className="">
28-
<HeroHighlight className={"hero"}>
29-
<motion.h1
30-
initial={{
31-
opacity: 0,
32-
y: 20,
33-
}}
34-
animate={{
35-
opacity: 1,
36-
y: [20, -5, 0],
37-
}}
38-
transition={{
39-
duration: 0.5,
40-
ease: [0.4, 0.0, 0.2, 1],
41-
}}
42-
className="main text-2xl px-4 md:text-4xl lg:text-5xl font-bold text-neutral-700 dark:text-white max-w-4xl leading-relaxed lg:leading-snug text-center mx-auto "
35+
<motion.div
36+
initial={{ opacity: 0 }}
37+
animate={{ opacity: 1 }}
38+
transition={{ duration: 0.5 }}
39+
>
40+
<HeroHighlight className="hero min-h-[40vh] flex items-center justify-center py-12">
41+
<motion.div
42+
initial={{ opacity: 0, y: 20 }}
43+
animate={{ opacity: 1, y: 0 }}
44+
transition={{ duration: 0.7, ease: [0.4, 0.0, 0.2, 1] }}
45+
className="text-center max-w-3xl mx-auto px-4"
4346
>
44-
Hi, my name is {" "}
45-
<Highlight className="text-black dark:text-white">
46-
Jerry
47-
</Highlight>.
48-
<br/>
49-
<p className={"secondary text-4xl"}>I build and program things</p>
50-
<div className="flex flex-row justify-center gap-3 my-3">
47+
<motion.h1
48+
className="main text-2xl md:text-4xl lg:text-5xl font-bold text-neutral-700 dark:text-white"
49+
initial={{ scale: 0.5, opacity: 0 }}
50+
animate={{ scale: 1, opacity: 1 }}
51+
transition={{ duration: 0.5, delay: 0.2 }}
52+
>
53+
Hi, my name is{" "}
54+
<Highlight className="text-black dark:text-white">
55+
Jerry
56+
</Highlight>
57+
</motion.h1>
58+
59+
<motion.p
60+
className="secondary text-xl md:text-2xl lg:text-3xl mt-3"
61+
initial={{ opacity: 0, x: -20 }}
62+
animate={{ opacity: 1, x: 0 }}
63+
transition={{ duration: 0.5, delay: 0.4 }}
64+
>
65+
I build and program things
66+
</motion.p>
67+
68+
<motion.div
69+
className="flex flex-row justify-center gap-4 mt-6"
70+
initial={{ opacity: 0, y: 20 }}
71+
animate={{ opacity: 1, y: 0 }}
72+
transition={{ duration: 0.5, delay: 0.6 }}
73+
>
5174
<SocialLink
5275
href="https://github.com/cherriae"
5376
icon={GithubIcon}
@@ -58,12 +81,36 @@ export default function Home() {
5881
icon={InstagramIcon}
5982
label="Instagram Profile"
6083
/>
61-
</div>
62-
</motion.h1>
84+
</motion.div>
85+
</motion.div>
6386
</HeroHighlight>
64-
<AboutSection/>
65-
<ProjectSection/>
66-
<Contacts/>
67-
</div>
87+
88+
<motion.div
89+
initial={{ opacity: 0 }}
90+
whileInView={{ opacity: 1 }}
91+
viewport={{ once: true }}
92+
transition={{ duration: 0.6 }}
93+
>
94+
<AboutSection/>
95+
</motion.div>
96+
97+
<motion.div
98+
initial={{ opacity: 0 }}
99+
whileInView={{ opacity: 1 }}
100+
viewport={{ once: true }}
101+
transition={{ duration: 0.6 }}
102+
>
103+
<ProjectSection/>
104+
</motion.div>
105+
106+
<motion.div
107+
initial={{ opacity: 0 }}
108+
whileInView={{ opacity: 1 }}
109+
viewport={{ once: true }}
110+
transition={{ duration: 0.6 }}
111+
>
112+
<Contacts/>
113+
</motion.div>
114+
</motion.div>
68115
);
69116
}

‎app/providers.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ export function Providers({children, themeProps}: PropsWithChildren<ProvidersPro
1717

1818
return (
1919
<NextUIProvider navigate={router.push}>
20-
<NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
20+
<NextThemesProvider defaultTheme="light" enableSystem={true} {...themeProps}>
21+
<div className="min-h-screen">
22+
{children}
23+
</div>
24+
</NextThemesProvider>
2125
</NextUIProvider>
2226
);
2327
}

‎components/ui/about.tsx‎

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,49 @@ import {Link} from "@nextui-org/link";
44

55
const AboutSection: React.FC = () => {
66
return (
7-
<section className="aboutme h-[60rem] relative overflow-hidden bg-gradient-to-br from-[#ffffff] via-[#a0b1ff] to-[#ddd6fe]">
8-
<h1 className='text-center text-6xl main mt-10'>About me</h1>
9-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-10 p-8">
10-
<div className={"grid place-items-center"}>
11-
<Image
12-
src={"/logo.jpg"}
13-
alt={"Me"}
14-
className={"mt-10"}
15-
/>
16-
</div>
17-
<div className={"mt-10 secondary text-lg"}>
18-
<p>Hey! I&quot;m Jerry! I&quot;m just someone who just code and do programming for fun. I like to read, play
19-
chess, and basketball. I am a part of <Link href={"https://bthsrobotics.com"} target={"_blank"}>Team
20-
334 (FRC)</Link> for I am a programmer.</p>
21-
<br/>
22-
<p>🌱 Currently Learning how to code Java</p>
23-
<p>😄 Pronouns: He/Him</p>
24-
<div>
25-
<Image width={"500"} height={300}
26-
src={"https://discord-readme-badge.vercel.app/api?id=827660621662257162"} alt={"discord"}
27-
className={"my-10"}/>
7+
<section className="relative overflow-hidden bg-gradient-to-br from-[#ffffff] via-[#a0b1ff] to-[#ddd6fe] py-20">
8+
<div className="container mx-auto px-4">
9+
<h1 className='text-center text-5xl font-bold main mb-16'>About me</h1>
10+
11+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
12+
<div className="flex justify-center">
13+
<Image
14+
src="/logo.jpg"
15+
alt="Me"
16+
className="rounded-2xl shadow-lg max-w-[300px] w-full"
17+
/>
18+
</div>
19+
20+
<div className="space-y-6 secondary text-lg">
21+
<p className="leading-relaxed">
22+
Hey! I'm Jerry! I'm just someone who codes and programs for fun.
23+
I like to read, play chess, and basketball. I am a programmer at{" "}
24+
<Link
25+
href="https://bthsrobotics.com"
26+
target="_blank"
27+
className="text-primary hover:underline"
28+
>
29+
Team 334 (FRC)
30+
</Link>.
31+
</p>
32+
33+
<div className="space-y-2">
34+
<p>🌱 Currently Learning how to code Java</p>
35+
<p>😄 Pronouns: He/Him</p>
36+
</div>
37+
38+
<div className="pt-4">
39+
<Image
40+
width={500}
41+
height={300}
42+
src="https://discord-readme-badge.vercel.app/api?id=827660621662257162"
43+
alt="discord"
44+
className="rounded-lg shadow-md"
45+
/>
46+
</div>
2847
</div>
2948
</div>
3049
</div>
31-
{/* <div className="absolute bottom-0 left-0 w-full">
32-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
33-
<path
34-
fill="#0099ff"
35-
fillOpacity="1"
36-
d="M0,128L34.3,117.3C68.6,107,137,85,206,90.7C274.3,96,343,128,411,144C480,160,549,160,617,160C685.7,160,754,160,823,133.3C891.4,107,960,53,1029,58.7C1097.1,64,1166,128,1234,154.7C1302.9,181,1371,171,1406,165.3L1440,160L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
37-
></path>
38-
</svg>
39-
</div> */}
4050
</section>
4151
);
4252
};

0 commit comments

Comments
 (0)