Skip to content

Commit 5fe756d

Browse files
steadyfallsteadyfall
committed
feat: fixed styling to accomodate for other independent pages
1 parent b6c1385 commit 5fe756d

File tree

5 files changed

+49
-43
lines changed

5 files changed

+49
-43
lines changed

‎src/app/layout.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import "./globals.css";
55
import { detailsForMetadata } from "./config";
66
import Footer from "@/components/Footer";
77
import Navbar from "@/components/Navbar";
8+
import { cn } from "@/lib/utils";
89

910
const inter = Inter({ subsets: ['latin'] })
1011
const spaceMono = Space_Mono({
@@ -58,15 +59,19 @@ export default function RootLayout({
5859
// ${inter.className}
5960
return (
6061
<html lang="en" className={`${inter.className} ${spaceMono.variable}`} suppressHydrationWarning>
61-
<body suppressHydrationWarning>
62-
<div className={`min-h-screen bg-neutral-100 dark:bg-neutral-950 text-gray-800 dark:text-gray-200`}>
63-
<div className="transition-colors duration-300">
64-
<Providers>
65-
<Navbar />
66-
{children}
67-
<Footer />
68-
</Providers>
69-
</div>
62+
<body className={
63+
cn(
64+
"bg-neutral-100 dark:bg-neutral-950 text-gray-800 dark:text-gray-200",
65+
"transition-colors duration-300"
66+
)}
67+
suppressHydrationWarning
68+
>
69+
<div className="flex flex-col min-h-screen">
70+
<Providers>
71+
<Navbar />
72+
<div className="flex-grow mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">{children}</div>
73+
<Footer />
74+
</Providers>
7075
</div>
7176
</body>
7277
</html>

‎src/app/page.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,13 @@ import { personalDetails, experiencesArray, projectsArray, skillsArray } from '@
1010

1111
export default function Portfolio() {
1212
return (
13-
<div className="mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
13+
<main className="container py-6 z-1">
1414
<Header {...personalDetails} />
15-
<main className="container mx-auto py-8 z-1">
16-
<About />
17-
<Experiences arr={experiencesArray} />
18-
<Education />
19-
<Skills arr={skillsArray}/>
20-
<Projects arr={projectsArray} />
21-
</main>
22-
</div>
15+
<About />
16+
<Experiences arr={experiencesArray} />
17+
<Education />
18+
<Skills arr={skillsArray}/>
19+
<Projects arr={projectsArray} />
20+
</main>
2321
)
2422
}

‎src/components/Footer.tsx

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,34 @@ import { cn } from "@/lib/utils"
55
const Footer = () => {
66
return (
77
<footer className={cn(
8-
"py-16 text-gray-500 dark:text-gray-400 flex flex-col items-center justify-center sm:flex-row-reverse sm:justify-between",
9-
"mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl"
8+
"py-12 text-gray-500 dark:text-gray-400"
109
)}>
11-
<div className="flex justify-center md:justify-start space-x-4">
12-
<a href={personalDetails.githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
13-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-pink-500"
14-
>
15-
github <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
16-
</a>
17-
<a href={personalDetails.linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
18-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-thunderbird-600"
19-
>
20-
linkedin <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
21-
</a>
22-
<a href={`mailto:` + personalDetails.email} aria-label="Email"
23-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
24-
>
25-
email <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
26-
</a>
27-
</div>
28-
<div className="mt-6 sm:mt-0">
29-
&copy; 2024 {new URL(detailsForMetadata.baseUrl).hostname}
10+
<div className={cn(
11+
"flex flex-col items-center justify-center sm:flex-row-reverse sm:justify-between",
12+
"mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl"
13+
)}>
14+
<div className="flex justify-center md:justify-start space-x-4">
15+
<a href={personalDetails.githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
16+
className="inline-flex items-center hover:underline hover:underline-offset-2 text-pink-500"
17+
>
18+
github <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
19+
</a>
20+
<a href={personalDetails.linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
21+
className="inline-flex items-center hover:underline hover:underline-offset-2 text-thunderbird-600"
22+
>
23+
linkedin <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
24+
</a>
25+
<a href={`mailto:` + personalDetails.email} aria-label="Email"
26+
className="inline-flex items-center hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
27+
>
28+
email <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
29+
</a>
30+
</div>
31+
<div className="mt-6 sm:mt-0">
32+
&copy; 2024 {new URL(detailsForMetadata.baseUrl).hostname}
33+
</div>
3034
</div>
3135
</footer>
32-
3336
)
3437
}
3538

‎src/components/Header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Header = ({name, pronouns, currentEducation, currentJob, githubLink, linke
2323
useEffect(() => { setTimeout(() => { setCopiedId(undefined); }, 3000) }, [copied]);
2424

2525
return (
26-
<div className="container mx-auto py-8">
26+
<div className="container mx-auto mb-10">
2727
<div className="flex flex-col md:flex-row items-center justify-between">
2828
<BlurFade delay={BLUR_FADE_DELAY}>
2929
{(!isDesktop) && (

‎src/components/Navbar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ const Navbar = () => {
66
// const completion = useReadingProgress();
77

88
return (
9-
<header className="sticky top-0 z-50 py-6 backdrop-blur-xl mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
10-
<nav className="flex items-center justify-between">
9+
<header className="sticky top-0 z-50 py-6 backdrop-blur-xl">
10+
<nav className="flex items-center justify-between mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
1111
<ul className="flex gap-4 sm:gap-8" onClick={
1212
(event: React.SyntheticEvent) => {
1313
event.preventDefault();

0 commit comments

Comments
 (0)