Skip to content

feat: refactored code to fully center main tabs #243

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

Open
madfozjer wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: refactored code to fully center main tabs #243

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
69 changes: 47 additions & 22 deletions app/cv/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ export default function CVPage() {
<div className="floating-orb w-32 h-32 sm:w-48 sm:h-48 bolt-gradient opacity-15 top-20 -left-24"></div>
<div className="floating-orb w-24 h-24 sm:w-36 sm:h-36 bolt-gradient opacity-20 bottom-20 -right-18"></div>
<div className="floating-orb w-40 h-40 sm:w-56 sm:h-56 bolt-gradient opacity-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>

{/* Grid pattern overlay */}
<div
<div
className="absolute inset-0 opacity-[0.02]"
style={{
backgroundImage: `url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23000000' fill-opacity='1'%3e%3ccircle cx='30' cy='30' r='1'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e")`,
}}
/>

<SiteHeader />
<main className="flex-1 relative z-10">
<main className="flex-1 relative z-10 mx-auto">
<div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
{/* Enhanced Header */}
<div className="text-center mb-8 sm:mb-12">
Expand All @@ -29,7 +29,7 @@ export default function CVPage() {
<span className="text-sm font-medium">CV Builder</span>
<Award className="h-4 w-4 text-blue-500" />
</div>

<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 sm:mb-6 leading-tight">
Build Your{" "}
<span className="bolt-gradient-text relative inline-block">
Expand All @@ -39,46 +39,64 @@ export default function CVPage() {
</div>
</span>
</h1>

<p className="text-base sm:text-lg lg:text-xl leading-7 sm:leading-8 text-muted-foreground max-w-2xl lg:max-w-3xl mx-auto px-4 sm:px-0">
Create a comprehensive{" "}
<span className="font-semibold text-yellow-600">academic CV</span>{" "}
highlighting your{" "}
<span className="font-semibold text-blue-600">achievements</span>,{" "}
<span className="font-semibold text-purple-600">research</span>, and{" "}
<span className="font-semibold bolt-gradient-text">career progression</span>
<span className="font-semibold text-purple-600">research</span>,
and{" "}
<span className="font-semibold bolt-gradient-text">
career progression
</span>
</p>

{/* Stats bar */}
<div className="mt-6 sm:mt-8 flex flex-wrap justify-center gap-4 sm:gap-6">
<div className="glass-effect px-4 py-2 rounded-full hover:scale-105 transition-transform duration-300">
<span className="bolt-gradient-text font-bold text-sm">Academic</span>
<span className="text-muted-foreground text-xs ml-1">Focus</span>
<span className="bolt-gradient-text font-bold text-sm">
Academic
</span>
<span className="text-muted-foreground text-xs ml-1">
Focus
</span>
</div>
<div className="glass-effect px-4 py-2 rounded-full hover:scale-105 transition-transform duration-300">
<span className="bolt-gradient-text font-bold text-sm">Research</span>
<span className="text-muted-foreground text-xs ml-1">Ready</span>
<span className="bolt-gradient-text font-bold text-sm">
Research
</span>
<span className="text-muted-foreground text-xs ml-1">
Ready
</span>
</div>
<div className="glass-effect px-4 py-2 rounded-full hover:scale-105 transition-transform duration-300">
<span className="bolt-gradient-text font-bold text-sm">Detailed</span>
<span className="text-muted-foreground text-xs ml-1">Format</span>
<span className="bolt-gradient-text font-bold text-sm">
Detailed
</span>
<span className="text-muted-foreground text-xs ml-1">
Format
</span>
</div>
</div>
</div>

{/* Enhanced Generator Container */}
<div className="glass-effect p-6 sm:p-8 rounded-2xl border border-yellow-400/20 relative overflow-hidden">
{/* Background shimmer effect */}
<div className="absolute inset-0 shimmer opacity-20"></div>

{/* Decorative elements */}
<div className="absolute top-4 right-4">
<Sparkles className="h-5 w-5 text-yellow-500 animate-pulse" />
</div>
<div className="absolute bottom-4 left-4">
<Star className="h-4 w-4 text-blue-500 animate-spin" style={{animationDuration: '3s'}} />
<Star
className="h-4 w-4 text-blue-500 animate-spin"
style={{ animationDuration: "3s" }}
/>
</div>

<div className="relative z-10">
<ResumeGenerator />
</div>
Expand All @@ -91,20 +109,27 @@ export default function CVPage() {
<div className="relative z-10">
<div className="flex items-center justify-center gap-2 mb-4">
<Zap className="h-5 w-5 text-yellow-500 animate-pulse" />
<span className="font-semibold bolt-gradient-text text-lg">Ready to showcase your expertise?</span>
<span className="font-semibold bolt-gradient-text text-lg">
Ready to showcase your expertise?
</span>
<Star className="h-5 w-5 text-blue-500 animate-pulse" />
</div>
<p className="text-muted-foreground text-sm mb-4">
Create a CV that highlights your academic and professional journey
Create a CV that highlights your academic and professional
journey
</p>
<div className="flex flex-wrap justify-center gap-3">
<div className="glass-effect px-4 py-2 rounded-full text-xs hover:scale-105 transition-transform duration-300">
<Award className="inline h-3 w-3 text-yellow-500 mr-1" />
<span className="bolt-gradient-text font-semibold">Academic Standard</span>
<span className="bolt-gradient-text font-semibold">
Academic Standard
</span>
</div>
<div className="glass-effect px-4 py-2 rounded-full text-xs hover:scale-105 transition-transform duration-300">
<Zap className="inline h-3 w-3 text-blue-500 mr-1" />
<span className="bolt-gradient-text font-semibold">Comprehensive</span>
<span className="bolt-gradient-text font-semibold">
Comprehensive
</span>
</div>
</div>
</div>
Expand All @@ -114,4 +139,4 @@ export default function CVPage() {
</main>
</div>
);
}
}
18 changes: 6 additions & 12 deletions app/diagram/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function DiagramPage() {
/>

<SiteHeader />
<main className="flex-1 relative z-10">
<main className="flex-1 relative z-10 mx-auto">
<div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
{/* Enhanced Header */}
<div className="text-center mb-8 sm:mb-12">
Expand All @@ -53,10 +53,7 @@ export default function DiagramPage() {

<p className="text-base sm:text-lg lg:text-xl leading-7 sm:leading-8 text-muted-foreground max-w-2xl lg:max-w-3xl mx-auto px-4 sm:px-0">
Design{" "}
<span className="font-semibold text-yellow-600">
flowcharts
</span>
,{" "}
<span className="font-semibold text-yellow-600">flowcharts</span>,{" "}
<span className="font-semibold text-blue-600">
system architectures
</span>
Expand Down Expand Up @@ -116,11 +113,7 @@ export default function DiagramPage() {
</div>

<div className="relative z-10">
{isLoading ? (
<DiagramGeneratorSkeleton />
) : (
<DiagramGenerator />
)}
{isLoading ? <DiagramGeneratorSkeleton /> : <DiagramGenerator />}
</div>
</div>

Expand All @@ -137,7 +130,8 @@ export default function DiagramPage() {
<Star className="h-5 w-5 text-blue-500 animate-pulse" />
</div>
<p className="text-muted-foreground text-sm mb-4">
Create professional diagrams that communicate complex concepts clearly
Create professional diagrams that communicate complex concepts
clearly
</p>
<div className="flex flex-wrap justify-center gap-3">
<div className="glass-effect px-4 py-2 rounded-full text-xs hover:scale-105 transition-transform duration-300">
Expand All @@ -160,4 +154,4 @@ export default function DiagramPage() {
</main>
</div>
);
}
}
2 changes: 1 addition & 1 deletion app/letter/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function LetterPage() {
/>

<SiteHeader />
<main className="flex-1 relative z-10">
<main className="flex-1 relative z-10 mx-auto">
<div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
{/* Enhanced Header */}
<div className="text-center mb-8 sm:mb-12">
Expand Down
2 changes: 1 addition & 1 deletion app/presentation/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function PresentationPage() {
/>

<SiteHeader />
<main className="flex-1 relative z-10">
<main className="flex-1 relative z-10 mx-auto">
<div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
{/* Enhanced Header */}
<div className="text-center mb-8 sm:mb-12">
Expand Down
Loading