skip to Main Content

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-auto in layout.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 :

enter image description here

Folder structure :

enter image description here

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>
  </>
}

2

Answers


  1. Chosen as BEST ANSWER

    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.


  2. 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>
      );
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search