I’ve got 3 pages, home, cv, about.
- cv page appears differently to other two pages, by which I mean the whole main body seems to move slightly towards left.
- Pixel width is still the same, but I don’t know exactly it differs
from the original state.
The interesting thing is,
- if I remove
mx-autoinlayout.tsx, the page width issue gets resolved and there comes consistency between the pages.
I think the reason is because it has some components causing the issue, but I don’t know why.
Problem :
Folder structure :
layout.tsx :
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className="${inter.className} antialiased min-h-screen min-w-fit flex flex-col items-center">
<main className="w-full pt-10 pb-80 px-8">
<div className="max-w-[820px] mx-auto">
<NavBar />
{children}
</div>
</main>
</body>
</html>
);
}
experience.tsx :
## experience.tsx
import { Skill, SkillProps, skillsDirectory
} from "../icons/skill";
type ExperienceProps = {
jobTitle: string;
company: string;
period: string;
content: string | string[];
skills?: (keyof typeof skillsDirectory)[];
}
export function Experience({jobTitle, company, period, content, skills}: ExperienceProps) {
const renderContent = () => {
if (Array.isArray(content)) {
return (
<ul className="list-disc list-inside font-light my-4">
{content.map((item, index) => (
<li
className=""
key={index}>
{item}
</li>
))}
</ul>
);
} else {
return <p className="font-light">{content}</p>
}
}
return (
<div className="flex flex-col md:flex-row mt-4">
<div className="w-1/4 pt-1.5">
<h4 className="font-light">{period}</h4>
</div>
<div className="w-3/4 pt-1 px-4 rounded-xl transition-all duration-75 hover:bg-inherit hover:shadow-md ">
<h4 className="text-lg font-light text-slate-900">{jobTitle}</h4>
<h4 className="text-md font-thin italic text-slate-400">@ {company}</h4>
{renderContent()}
<div className="flex flex-wrap gap-2 mb-4">
{skills?.map((skillKey) => (
<Skill key={skillKey} {...skillsDirectory[skillKey]} />
))}
</div>
</div>
</div>
);
}
summary.tsx :
## summary.tsx
import { Skill, skillsDirectory } from "../icons/skill"
import { FaStar } from "react-icons/fa";
import { Subtitle } from "./subtitle";
const summaryWidth = 40
const summaryHeight = 40
const SkillCategory = (
{stars, title, skills, width=summaryWidth, height=summaryHeight}:
{stars: number, title: string, skills: string[], width?: number, height?: number}
) => (
<div className="flex-grow">
<div className="flex flex-row">
<div className="flex pt-1">
{[...Array(stars)].map((_, i) => (
<FaStar key={i} className="hover:text-yellow-800 transition-all duration-600" />
))}
</div>
<h3 className="ml-2">{title}</h3>
</div>
<div className="flex flex-wrap gap-2">
{skills.map((skillKey: string) => (
<Skill key={skillKey} {...skillsDirectory[skillKey]} width={width} height={height} />
))}
</div>
</div>
)
export function Summary() {
const threeStars = ["python", "pytorch", "lightning", "docker", "fastapi"]
const twoStars = ["java", "springboot", "django", "flask"]
const oneStar = ["typescript", "nextjs", "tailwindcss"]
return <>
<Subtitle subtitle="Summary"/>
<div className="flex flex-wrap gap-2">
<SkillCategory stars={3} title="Professionally, frequently" skills={threeStars} />
<SkillCategory stars={2} title="Professionally, Occationally" skills={twoStars} />
<SkillCategory stars={1} title="Personally developed" skills={oneStar} />
</div>
</>
}
I would recommend you to change experience component to use fixed widths instead of percentages, something like this:
return (
<div className="flex flex-col md:flex-row mt-4">
<div className="w-full md:w-48 pt-1.5">
<h4 className="font-light">{period}</h4>
</div>
<div className="w-full md:flex-1 pt-1 px-4 rounded-xl transition-all duration-75 hover:bg-inherit hover:shadow-md">
<h4 className="text-lg font-light text-slate-900">{jobTitle}</h4>
<h4 className="text-md font-thin italic text-slate-400">@ {company}</h4>
{renderContent()}
<div className="flex flex-wrap gap-2 mb-4">
{skills?.map((skillKey) => (
<Skill key={skillKey} {...skillsDirectory[skillKey]} />
))}
</div>
</div>
</div>
);Also update the layout like this :
return (
<html lang="en">
<body className={`${inter.className} antialiased min-h-screen flex flex-col items-center`}>
<main className="w-full max-w-[820px] pt-10 pb-80 px-4 sm:px-6 lg:px-8">
<NavBar />
{children}
</main>
</body>
</html>
);3
Okay, I’ve got an answer from my colleague…
This is really simple one which doesn’t have to be related to tailwind css or NextJS.
The issue occurred because of a scroll bar which appeared on cv page for its lengthy content.
The solution I am suggested is to force all pages to have a scroll bar, which normally wouldn’t be a problem due to consistency in lengthy contents over all pages.