Skip to content

feat: redesign website layout with right-side TOC and cleaner UI #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Zheckan wants to merge 1 commit into from
Closed

feat: redesign website layout with right-side TOC and cleaner UI #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

105 changes: 44 additions & 61 deletions src/app/(main)/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,72 +16,55 @@ const sections: Section[] = [
export default function HomeComponent() {
const router = useRouter();

const totalItems = sections.length;
const columns = 3;

const colSpanClasses: { [key: number]: string } = {
2: 'md:col-span-2',
3: 'md:col-span-3',
6: 'md:col-span-6',
};

return (
<div className='flex min-h-screen flex-col items-center gap-8 py-8 md:justify-center lg:justify-center'>
<div className='max-w-6xl px-4 text-center'>
<h1 className='text-balance font-bold font-sans text-2xl md:text-3xl lg:text-4xl'>
<div className='flex min-h-screen flex-col items-center justify-center px-4 py-16'>
<div className='mb-12 text-center'>
<p className='mb-2 font-medium text-xs text-yellow-500 uppercase tracking-widest'>
Interview preparation
</p>
<h1 className='text-balance font-bold text-3xl text-white md:text-4xl lg:text-5xl'>
Any interview prep
</h1>
<p className='mt-3 text-sm text-zinc-500'>
Choose a topic to start preparing
</p>
</div>
<div className='grid max-w-6xl grid-cols-1 gap-6 px-4 md:grid-cols-6'>
{sections.map((section, index) => {
const rowNumber = Math.floor(index / columns);
const isLastRow =
rowNumber === Math.floor((totalItems - 1) / columns);

const itemsOnLastRow = totalItems % columns;
const itemsOnThisRow =
isLastRow && itemsOnLastRow > 0 ? itemsOnLastRow : columns;

const colSpan = Math.round(6 / itemsOnThisRow);

const className = `rounded-lg border border-zinc-800 bg-zinc-900/90 p-6 shadow-sm transition-colors duration-200 hover:border-zinc-600 ${
colSpanClasses[colSpan]
}`;

return (
<button
className={`${className} flex flex-col text-left`}
disabled={section.inProgress}
key={`${section.title}-${section.level}`}
onClick={() => router.push(section.href)}
type='button'
>
<div className='flex-grow'>
<div className='mb-2'>
<h2 className='font-bold text-xl text-zinc-100'>
{section.title}
</h2>
{section.level && (
<span className='font-medium text-sm text-yellow-500'>
{section.level}
</span>
)}
{section.inProgress && (
<span className='ml-2 text-red-400 text-sm'>
(in progress)
</span>
)}
</div>
<p className='mb-4 text-sm text-zinc-400 leading-relaxed'>
{section.description}
</p>
</div>
<div className='flex items-center font-medium text-sm text-zinc-500'>
{section.inProgress ? 'Coming soon...' : 'Start learning →'}
</div>
</button>
);
})}
<div className='grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'>
{sections.map((section) => (
<button
className='group flex flex-col rounded-xl border border-zinc-800/60 bg-zinc-900/40 p-6 text-left backdrop-blur-sm transition-all duration-200 hover:border-zinc-700 hover:bg-zinc-900/60'
disabled={section.inProgress}
key={`${section.title}-${section.level}`}
onClick={() => router.push(section.href)}
type='button'
>
<div className='flex-grow'>
{section.level && (
<span className='mb-2 inline-block rounded-full bg-yellow-500/10 px-2.5 py-0.5 font-medium text-[11px] text-yellow-500'>
{section.level}
</span>
)}
<h2 className='mb-1.5 font-semibold text-lg text-white'>
{section.title}
</h2>
{section.inProgress && (
<span className='mb-2 inline-block text-red-400/80 text-xs'>
In progress
</span>
)}
<p className='text-sm text-zinc-400 leading-relaxed'>
{section.description}
</p>
</div>
<div className='mt-4 flex items-center font-medium text-sm text-zinc-600 transition-colors group-hover:text-zinc-400'>
{section.inProgress ? 'Coming soon' : 'Start learning'}
<span className='ml-1 transition-transform group-hover:translate-x-0.5'>
&rarr;
</span>
</div>
</button>
))}
</div>
</div>
);
Expand Down
97 changes: 44 additions & 53 deletions src/app/frontend/junior/frontend-junior.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,65 +39,56 @@ const sections: Section[] = [
export default function FrontendJunior() {
const router = useRouter();

const totalItems = sections.length;
const columns = 3;

const colSpanClasses: { [key: number]: string } = {
2: 'md:col-span-2',
3: 'md:col-span-3',
6: 'md:col-span-6',
};

return (
<div className='flex min-h-screen flex-col items-center gap-8 py-8 md:justify-center lg:justify-center'>
<div className='max-w-6xl px-4 text-center'>
<h1 className='text-balance font-bold font-sans text-2xl md:text-3xl lg:text-4xl'>
Junior Frontend Developer Preparation
<div className='flex min-h-screen flex-col items-center justify-center px-4 py-16'>
<div className='mb-12 text-center'>
<p className='mb-2 font-medium text-xs text-yellow-500 uppercase tracking-widest'>
Frontend
</p>
<h1 className='text-balance font-bold text-3xl text-white md:text-4xl lg:text-5xl'>
Junior Developer Preparation
</h1>
<p className='mb-4 text-sm text-zinc-400 leading-relaxed'>
(in development, &apos;in progress&apos; parts are not completed)
<p className='mt-3 text-sm text-zinc-500'>
Topics marked as &ldquo;in progress&rdquo; are still being written
</p>
</div>
<div className='grid max-w-6xl grid-cols-1 gap-6 px-4 md:grid-cols-6'>
{sections.map((section, index) => {
const rowNumber = Math.floor(index / columns);
const isLastRow =
rowNumber === Math.floor((totalItems - 1) / columns);

const itemsOnLastRow = totalItems % columns;
const itemsOnThisRow =
isLastRow && itemsOnLastRow > 0 ? itemsOnLastRow : columns;

const colSpan = Math.round(6 / itemsOnThisRow);

const className = `rounded-lg border border-zinc-800 bg-zinc-900/90 p-6 shadow-sm transition-colors duration-200 hover:border-zinc-600 ${
colSpanClasses[colSpan]
}`;

return (
<button
className={`${className} flex flex-col text-left`}
key={section.title}
onClick={() => router.push(section.href)}
type='button'
>
<div className='flex-grow'>
<h2 className='mb-3 font-bold text-xl text-zinc-100'>
{section.title}{' '}
{section.inProgress && (
<span className='text-red-400'>(in progress)</span>
)}
</h2>
<p className='mb-4 text-sm text-zinc-400 leading-relaxed'>
{section.description}
</p>
</div>
<div className='flex items-center font-medium text-sm text-zinc-500'>
Learn more →
<div className='grid w-full max-w-4xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'>
{sections.map((section) => (
<button
className={`group flex flex-col rounded-xl border p-5 text-left backdrop-blur-sm transition-all duration-200 ${
section.inProgress
? 'cursor-default border-zinc-800/40 bg-zinc-900/20 opacity-60'
: 'border-zinc-800/60 bg-zinc-900/40 hover:border-zinc-700 hover:bg-zinc-900/60'
}`}
disabled={section.inProgress}
key={section.title}
onClick={() => !section.inProgress && router.push(section.href)}
type='button'
>
<div className='flex-grow'>
<h2 className='mb-1 font-semibold text-base text-white'>
{section.title}
</h2>
{section.inProgress && (
<span className='mb-1.5 inline-block rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] text-zinc-500'>
In progress
</span>
)}
<p className='text-[13px] text-zinc-400 leading-relaxed'>
{section.description}
</p>
</div>
{!section.inProgress && (
<div className='mt-3 flex items-center font-medium text-[13px] text-zinc-600 transition-colors group-hover:text-zinc-400'>
Start learning
<span className='ml-1 transition-transform group-hover:translate-x-0.5'>
&rarr;
</span>
</div>
</button>
);
})}
)}
</button>
))}
</div>
</div>
);
Expand Down
Loading
Loading