From 3c1d244fe9baa518e9f7500dd26a379c6c79db11 Mon Sep 17 00:00:00 2001 From: Thesaru-p Date: Thu, 26 Mar 2026 01:46:25 +0530 Subject: [PATCH 1/6] feat: add theme provider and toggle components; integrate next-themes for dark mode support - Updated package.json and package-lock.json to include next-themes - Created ThemeProvider component to wrap application in theme context - Implemented ThemeToggle component for switching between light and dark themes - Added a new rewrite.js file to generate the main page with a header, features, and footer --- app/globals.css | 10 + app/layout.tsx | 15 +- app/page.tsx | 791 ++++++++++++++-------------------- components/theme-provider.tsx | 9 + components/theme-toggle.tsx | 23 + package-lock.json | 24 ++ package.json | 1 + rewrite.js | 232 ++++++++++ 8 files changed, 637 insertions(+), 468 deletions(-) create mode 100644 components/theme-provider.tsx create mode 100644 components/theme-toggle.tsx create mode 100644 rewrite.js diff --git a/app/globals.css b/app/globals.css index b5f563a..c8d9ff9 100644 --- a/app/globals.css +++ b/app/globals.css @@ -120,3 +120,13 @@ @apply bg-background text-foreground; } } + +@keyframes grid { + 0% { transform: translateY(-50px); } + 100% { transform: translateY(0); } +} + +@keyframes grid-move { + 0% { background-position: 0 0; } + 100% { background-position: 0 4rem; } +} diff --git a/app/layout.tsx b/app/layout.tsx index 0e417e4..b558634 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; import { ToastProvider } from "@/components/ui/toast"; +import { ThemeProvider } from "@/components/theme-provider"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -38,13 +39,13 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - - - {children} - + + + + + {children} + + ); diff --git a/app/page.tsx b/app/page.tsx index 420c7b4..8969808 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,520 +1,389 @@ +"use client"; + import Link from "next/link"; -import { Button } from "@/components/ui/button"; -import { Card, CardContent } from "@/components/ui/card"; -import { Badge } from "@/components/ui/badge"; -import { - Sparkles, - Wand2, - LayoutTemplate, - Upload, - MousePointerClick, - Palette, - Zap, +import { ThemeToggle } from "@/components/theme-toggle"; +import { + Layers, + Globe, + Zap, CheckCircle2, - Star, - ArrowRight, + Code2, + Sparkles, + LayoutTemplate } from "lucide-react"; +const FillButton = ({ href, children, isPrimary = false, className = "" }: { href: string; children: React.ReactNode; isPrimary?: boolean; className?: string }) => ( + + + + + + {children} + + +); + export default function Home() { + const scrollToTop = (e: React.MouseEvent) => { + e.preventDefault(); + window.scrollTo({ + top: 0, + behavior: "smooth" + }); + }; + return ( -
-
-
- -
- -
- Portfolium - - -
- - - - - +
+ {/* 3D Perspective Neon Grid Background */} +
+
+ {/* Subtle horizon glow */} +
+
+ + {/* HEADER */} +
+
+
+ {/* Logo */} + +
+ +
+ Portfolium -
-
-
+ + {/* Desktop Navigation */} + -
-
-
-
-
-
-
- - ✨ AI-Powered Portfolio Builder - -

- Build Your Portfolio
- - in Minutes - -

-

- AI-powered creator tools to help you craft a stunning professional portfolio. No design skills required. -

-
- - - - - - -
-
-
-
-
-
- -
-

Portfolio Preview

-
-
+ {/* Actions */} +
+
+
+ + Log in +
-
-
+ +
-
-
-
-

Everything You Need

-

- Powerful features to create, customize, and publish your portfolio in minutes -

+ {/* HERO SECTION - Left Box Split */} +
+
+ {/* Ambient Background Glow (No Grid) */} +
+ {/* Ambient glow centers */} +
+
-
- - -
- -
-

AI Portfolio Builder

-

- Build your portfolio from a simple prompt. Our AI creates a personalized layout just for you. -

- - - - - -
- -
-

Start With Templates

-

- Choose from dozens of modern, professionally designed templates tailored to your industry. -

- - - - -
- -
-

Upload Your CV

-

- Upload your existing CV and watch as our AI automatically generates portfolio sections. -

- - - - - -
- +
+ {/* Left Side: Name and Description */} +
+
+ Portfolium 2.0 is live +
+

+ Developer Portfolios, Built Differently. +

+

+ Stop wrestling with CSS. We instantly generate, customize, and deploy stunning developer portfolios with zero design skills required. +

+
+ + Start Building Free + + + Explore Features + +
+ +
+
+ {[1,2,3].map(i => ( +
+ user +
+ ))} +
+
-

Full Drag-and-Drop Editing

-

- Intuitive visual editor lets you drag, drop, and customize every element with ease. -

- - + Joined by 1,000+ developers +
+
- - -
- + {/* Right Side: Visual Graphic Content */} +
+ {/* Backdrop Mockup Window */} +
+
+
+
+
+
+
+
portfolium.sh/app
-

Custom Sections & Themes

-

- Add custom sections, choose color themes, and personalize fonts to match your brand. -

- - - - - -
- + {/* Mockup Body Content */} +
+
+
+ avatar +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-

Publish With One Click

-

- Deploy your portfolio instantly with a custom domain or shareable link. No hosting needed. -

- - -
-
-
- -
-
-
-

How It Works

-

Three simple steps to your perfect portfolio

-
-
-
-
- 1
-

Choose or Upload

-

- Select a template that fits your style or upload your existing CV to get started instantly. -

-
-
-
- 2 + {/* Overlapping Floating Element */} +
+
+
+ +
+
+
Theme Successfully Applied
+
Minimalist Developer UI
+
+
+
+
+ Live Preview ✓ +
+
-

Customize with AI

-

- Use our AI tools and drag-and-drop editor to personalize content, colors, and layout. -

+
+
-
-
- 3 -
-

Publish & Share

-

- Publish your portfolio with one click and share your unique link with the world. -

+ {/* Section Spacer */} +
+ + {/* FEATURES SECTION */} +
+
+
+

Everything you need to stand out

+

Focus on your shipping and coding. We automate the presentation so you can show off your best work.

-
-
-
-
-
-
-

Beautiful Templates

-

- Professional designs crafted for every industry and style -

-
-
- {[1, 2, 3, 4, 5, 6].map((i) => ( - -
-
-
- -

Template {i}

+
+ {[ + { icon: , title: "Beautiful Templates", desc: "Choose from dozens of professionally designed themes. Customize colors and typography instantly." }, + { icon: , title: "Lightning Fast", desc: "Static generation and global edge caching ensures your portfolio loads instantly anywhere." }, + { icon: , title: "Custom Domains", desc: "Bring your own domain or use our free .portfolium subdomain. SSL certificates included by default." }, + ].map((feature, idx) => ( +
+
+ {feature.icon}
+

{feature.title}

+

{feature.desc}

- - ))} -
-
- + ))} +
-
-
+ -
-
-
-

Loved by Creators

-

- Join thousands of professionals showcasing their work -

-
-
- - -
- {[1, 2, 3, 4, 5].map((star) => ( - - ))} -
-

- "Portfolium made it so easy to create a professional portfolio. The AI suggestions were spot on!" -

-
-
-
-

Sarah Johnson

-

UX Designer

-
-
- - + {/* Section Spacer */} +
- - -
- {[1, 2, 3, 4, 5].map((star) => ( - - ))} -
-

- "I went from CV to published portfolio in under 10 minutes. Game changer for job hunting!" -

-
-
-
-

Michael Chen

-

Software Engineer

-
-
- - + {/* TEMPLATES SECTION */} +
+
+
+
+

Curated Designer Themes

+

Start with a stunning template designed for conversion. Switch them with a single click without rebuilding your data.

+
+ + Browse All + +
- - -
- {[1, 2, 3, 4, 5].map((star) => ( - - ))} +
+ {[ + { name: "Minimalist Developer", cat: "Software Engineering", color: "from-violet-500/20 to-fuchsia-500/20", icon: "violet" }, + { name: "Creative Director", cat: "Design & Product", color: "from-emerald-500/20 to-teal-500/20", icon: "emerald" }, + { name: "Executive Noir", cat: "Leadership & Management", color: "from-zinc-500/20 to-stone-500/20", icon: "zinc" }, + ].map((theme, i) => ( +
+
+
+
+ +
+
+ Pro +
+
+
+
+
+
+
+
+
+

{theme.name}

+

{theme.cat}

+
-

- "The templates are beautiful and the customization options are endless. Highly recommend!" -

-
-
-
-

Emily Rodriguez

-

Marketing Manager

-
-
- - + ))} +
-
-
+
-
-
-
-

Simple Pricing

-

- Start free and upgrade as you grow -

-
-
- - -
-

Free

-
- $0 - /month + {/* Section Spacer */} +
+ + {/* PRICING SECTION */} +
+
+
+

Simple, transparent pricing

+

Start for free, upgrade when you need more power.

+
+ +
+ {/* Free Card */} +
+
+
-
-
    -
  • - - 1 Portfolio -
    • -
  • - - Basic Templates +

    Hobbyist

    +
    $0/mo
    +
      +
    • + 1 Portfolio Site
      • -
    • - - AI Assistant +
    • + Basic Templates
      • -
    • - - Portfolium Subdomain +
    • + .portfolium.io subdomain
    - - - - - -
    - - Most Popular - + Get Started Free
    - -
    -

    Pro

    -
    - $12 - /month + + {/* Pro Card */} +
    +
    +
    -
    -
      -
    • - - Unlimited Portfolios -
      • -
    • - - Premium Templates -
      • -
    • - - Advanced AI Features +
      + Most Popular +
      +

      Professional

      +
      $12/mo
      +
        +
      • + Unlimited Portfolio Sites
        • -
      • - - Custom Domain +
      • + Premium Templates
        • -
      • - - Analytics Dashboard +
      • + Custom Root Domain (CNAME)
        • -
      • - - Priority Support +
      • + Analytics Dashboard
      - - - + Upgrade to Pro +
    +
    -
-
+
+ -
-
-
-

Start building your portfolio today

-

- Join thousands of professionals who trust Portfolium to showcase their work -

- - - -
-
-
+ {/* FOOTER */} +