portfolify 2.0.0

package/templates/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

package/templates/src/App.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import Hero from './components/Hero';
+import Projects from './components/Projects';
+import Skills from './components/Skills';
+import Blog from './components/Blog';
+import Footer from './components/Footer';
+import SEO from './components/SEO';
+import ThemeToggle from './components/ThemeToggle';
+import portfolioData from './config/portfolio.json';
+
+function App() {
+    const [isDarkMode, setIsDarkMode] = useState(() => {
+        // Check localStorage first, then use config default
+        const stored = localStorage.getItem('theme');
+        if (stored) return stored === 'dark';
+        return portfolioData.defaultDarkMode ?? true;
+    });
+
+    useEffect(() => {
+        // Apply theme class to document
+        if (isDarkMode) {
+            document.documentElement.classList.add('dark');
+            document.documentElement.classList.remove('light');
+        } else {
+            document.documentElement.classList.add('light');
+            document.documentElement.classList.remove('dark');
+        }
+        localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+    }, [isDarkMode]);
+
+    const toggleTheme = () => {
+        setIsDarkMode(prev => !prev);
+    };
+
+    return (
+        <>
+            <SEO
+                title={`${portfolioData.name} - ${portfolioData.role}`}
+                description={portfolioData.bio}
+                name={portfolioData.name}
+            />
+            <div className="min-h-screen bg-background text-foreground transition-colors duration-300">
+                {portfolioData.enableDarkMode && (
+                    <ThemeToggle isDarkMode={isDarkMode} toggleTheme={toggleTheme} />
+                )}
+                <Hero data={portfolioData} />
+                <Projects projects={portfolioData.projects} />
+                <Skills skills={portfolioData.skills} />
+                {portfolioData.enableBlog && <Blog />}
+                <Footer social={portfolioData.social} name={portfolioData.name} />
+            </div>
+        </>
+    );
+}
+
+export default App;

package/templates/src/components/Blog.tsx

@@ -0,0 +1,119 @@
+import { motion } from 'framer-motion';
+import { Calendar, Clock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+// Sample blog posts - in a real app, these would come from MDX files
+const blogPosts = [
+    {
+        title: 'Getting Started with React and TypeScript',
+        excerpt: 'Learn how to set up a modern React project with TypeScript and best practices.',
+        date: '2024-01-15',
+        readTime: '5 min read',
+        slug: 'react-typescript-guide',
+    },
+    {
+        title: 'Building Performant Web Applications',
+        excerpt: 'Tips and tricks for optimizing your web applications for better performance.',
+        date: '2024-01-10',
+        readTime: '8 min read',
+        slug: 'performant-web-apps',
+    },
+    {
+        title: 'Modern CSS Techniques',
+        excerpt: 'Explore the latest CSS features and how to use them in your projects.',
+        date: '2024-01-05',
+        readTime: '6 min read',
+        slug: 'modern-css-techniques',
+    },
+];
+
+export default function Blog() {
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.2,
+            },
+        },
+    };
+
+    const cardVariants = {
+        hidden: { opacity: 0, y: 30 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: 0.6, ease: 'easeOut' },
+        },
+    };
+
+    return (
+        <section className="py-20 px-4">
+            <div className="max-w-6xl mx-auto">
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.6 }}
+                    className="text-center mb-16"
+                >
+                    <h2 className="text-4xl md:text-5xl font-bold mb-4">
+                        Latest <span className="gradient-text">Blog Posts</span>
+                    </h2>
+                    <p className="text-muted-foreground text-lg">
+                        Thoughts, tutorials, and insights
+                    </p>
+                </motion.div>
+
+                <motion.div
+                    variants={containerVariants}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true }}
+                    className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+                >
+                    {blogPosts.map((post, index) => (
+                        <motion.article
+                            key={index}
+                            variants={cardVariants}
+                            whileHover={{ scale: 1.03, y: -5 }}
+                            className={cn(
+                                'glass rounded-xl p-6 hover:glow-effect transition-all duration-300',
+                                'border border-border/50 hover:border-primary/50 cursor-pointer'
+                            )}
+                        >
+                            <h3 className="text-xl font-bold mb-3 gradient-text">
+                                {post.title}
+                            </h3>
+
+                            <p className="text-muted-foreground mb-4 line-clamp-2">
+                                {post.excerpt}
+                            </p>
+
+                            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                                <div className="flex items-center gap-1">
+                                    <Calendar className="w-4 h-4" />
+                                    {new Date(post.date).toLocaleDateString('en-US', {
+                                        month: 'short',
+                                        day: 'numeric',
+                                        year: 'numeric',
+                                    })}
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <Clock className="w-4 h-4" />
+                                    {post.readTime}
+                                </div>
+                            </div>
+
+                            <div className="mt-4 pt-4 border-t border-border/50">
+                                <span className="text-primary font-medium hover:underline">
+                                    Read more →
+                                </span>
+                            </div>
+                        </motion.article>
+                    ))}
+                </motion.div>
+            </div>
+        </section>
+    );
+}

package/templates/src/components/Footer.tsx

@@ -0,0 +1,206 @@
+import { Github, Linkedin, Twitter, Mail, Heart, Instagram, Youtube, Phone, Music, Palette } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface FooterProps {
+    social: {
+        github?: string;
+        linkedin?: string;
+        twitter?: string;
+        email?: string;
+        instagram?: string;
+        behance?: string;
+        dribbble?: string;
+        youtube?: string;
+        tiktok?: string;
+        phone?: string;
+    };
+    name: string;
+}
+
+export default function Footer({ social, name }: FooterProps) {
+    const currentYear = new Date().getFullYear();
+
+    const normalizeLink = (url: string, baseUrl: string) => {
+        if (!url) return '';
+        if (url.startsWith('http') || url.startsWith('mailto:') || url.startsWith('tel:')) return url;
+        return `${baseUrl}/${url.replace(/^@/, '')}`;
+    };
+
+    return (
+        <footer className="py-12 px-4 border-t border-border/50 bg-muted/20">
+            <div className="max-w-6xl mx-auto">
+                <div className="flex flex-col items-center gap-6">
+                    {/* Social Links */}
+                    <div className="flex flex-wrap justify-center gap-4">
+                        {social.github && (
+                            <a
+                                href={normalizeLink(social.github, 'https://github.com')}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={cn(
+                                    'p-3 rounded-full glass hover:glow-effect transition-all duration-300',
+                                    'hover:scale-110 active:scale-95'
+                                )}
+                                aria-label="GitHub"
+                            >
+                                <Github className="w-5 h-5" />
+                            </a>
+                        )}
+
+                        {social.linkedin && (
+                            <a
+                                href={normalizeLink(social.linkedin, 'https://linkedin.com/in')}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={cn(
+                                    'p-3 rounded-full glass hover:glow-effect transition-all duration-300',
+                                    'hover:scale-110 active:scale-95'
+                                )}
+                                aria-label="LinkedIn"
+                            >
+                                <Linkedin className="w-5 h-5" />
+                            </a>
+                        )}
+
+                        {social.twitter && (
+                            <a
+                                href={normalizeLink(social.twitter, 'https://twitter.com')}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={cn(
+                                    'p-3 rounded-full glass hover:glow-effect transition-all duration-300',
+                                    'hover:scale-110 active:scale-95'
+                                )}
+                                aria-label="Twitter"
+                            >
+                                <Twitter className="w-5 h-5" />
+                            </a>
+                        )}
+
+                        {social.instagram && (
+                            <a
+                                href={normalizeLink(social.instagram, 'https://instagram.com')}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={cn(
+                                    'p-3 rounded-full glass hover:glow-effect transition-all duration-300',
+                                    'hover:scale-110 active:scale-95'
+                                )}
+                                aria-label="Instagram"
+                            >
+                                <Instagram className="w-5 h-5" />
+                            </a>
+                        )}
+
+                        {social.youtube && (
+                            <a
+                                href={normalizeLink(social.youtube, 'https://youtube.com')}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={cn(
+                                    'p-3 rounded-full glass hover:glow-effect transition-all duration-300',
+                                    'hover:scale-110 active:scale-95'
+                                )}
+                                aria-label="YouTube"
+                            >
+                                <Youtube className="w-5 h-5" />
+                            </a>
+                        )}
+
+                        {social.behance && (
+                            <a
+                                href={normalizeLink(social.behance, 'https://behance.net')}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={cn(
+                                    'p-3 rounded-full glass hover:glow-effect transition-all duration-300',
+                                    'hover:scale-110 active:scale-95'
+                                )}
+                                aria-label="Behance"
+                            >
+                                <Palette className="w-5 h-5" />
+                            </a>
+                        )}
+
+                        {social.dribbble && (
+                            <a
+                                href={normalizeLink(social.dribbble, 'https://dribbble.com')}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={cn(
+                                    'p-3 rounded-full glass hover:glow-effect transition-all duration-300',
+                                    'hover:scale-110 active:scale-95'
+                                )}
+                                aria-label="Dribbble"
+                            >
+                                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm7.938 5.5a10.27 10.27 0 012.312 6.375c-3.375-.688-6.375-.688-9-.375.375-.75.375-.75.75-1.5C15.875 9.125 18.5 7.625 19.938 5.5zM12 1.75c2.688 0 5.125 1.063 6.938 2.75-1.313 1.875-3.688 3.375-5.313 4.125-1.687-3-3.562-5.438-4.125-6.188A10.2 10.2 0 0112 1.75zm-4.063.938c.563.75 2.438 3.188 4.125 6.063-4.312 1.125-8.063 1.125-9 1.125.687-3.25 2.625-6 4.875-7.188zM1.75 12v-.375c1.125.063 5.625 0 10.313-1.313.313.563.563 1.125.875 1.688-4.688 1.313-7.875 4.5-9.375 6.563A10.196 10.196 0 011.75 12zm10.25 10.25c-2.438 0-4.687-.813-6.5-2.188 1.313-1.875 4.125-4.813 8.438-6.188 1.125 3 2.063 6.375 2.438 8.063a10.3 10.3 0 01-4.376.313zm6.063-1.688c-.375-1.563-1.188-4.688-2.25-7.5 2.438-.313 5.063 0 8.063.563-.563 3-2.625 5.625-5.813 6.937z"/>
+                                </svg>
+                            </a>
+                        )}
+
+                        {social.tiktok && (
+                            <a
+                                href={normalizeLink(social.tiktok, 'https://tiktok.com/@')}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={cn(
+                                    'p-3 rounded-full glass hover:glow-effect transition-all duration-300',
+                                    'hover:scale-110 active:scale-95'
+                                )}
+                                aria-label="TikTok"
+                            >
+                                <Music className="w-5 h-5" />
+                            </a>
+                        )}
+
+                        {social.email && (
+                            <a
+                                href={social.email.startsWith('mailto:') ? social.email : `mailto:${social.email}`}
+                                className={cn(
+                                    'p-3 rounded-full glass hover:glow-effect transition-all duration-300',
+                                    'hover:scale-110 active:scale-95'
+                                )}
+                                aria-label="Email"
+                            >
+                                <Mail className="w-5 h-5" />
+                            </a>
+                        )}
+
+                        {social.phone && (
+                            <a
+                                href={social.phone.startsWith('tel:') ? social.phone : `tel:${social.phone}`}
+                                className={cn(
+                                    'p-3 rounded-full glass hover:glow-effect transition-all duration-300',
+                                    'hover:scale-110 active:scale-95'
+                                )}
+                                aria-label="Phone"
+                            >
+                                <Phone className="w-5 h-5" />
+                            </a>
+                        )}
+                    </div>
+
+                    {/* Built with Portfolify Badge */}
+                    <a
+                        href="https://github.com/halloffame12/portfolify"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className={cn(
+                            'px-4 py-2 rounded-full glass hover:glow-effect transition-all duration-300',
+                            'flex items-center gap-2 text-sm hover:scale-105'
+                        )}
+                    >
+                        Built with <Heart className="w-4 h-4 text-red-500 fill-red-500" /> using{' '}
+                        <span className="gradient-text font-semibold">Portfolify</span>
+                    </a>
+
+                    {/* Copyright */}
+                    <p className="text-muted-foreground text-sm">
+                        © {currentYear} {name}. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </footer>
+    );
+}

package/templates/src/components/Hero.tsx

@@ -0,0 +1,182 @@
+import { motion } from 'framer-motion';
+import { Github, Linkedin, Mail, Download, Twitter } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface HeroProps {
+    data: {
+        name: string;
+        role: string;
+        bio: string;
+        social: {
+            github?: string;
+            linkedin?: string;
+            twitter?: string;
+            email?: string;
+        };
+    };
+}
+
+export default function Hero({ data }: HeroProps) {
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.2,
+                delayChildren: 0.3,
+            },
+        },
+    };
+
+    const itemVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: 0.6, ease: 'easeOut' },
+        },
+    };
+
+    const normalizeLink = (url: string, baseUrl: string) => {
+        if (!url) return '';
+        if (url.startsWith('http') || url.startsWith('mailto:')) return url;
+        return `${baseUrl}/${url.replace(/^@/, '')}`;
+    };
+
+    return (
+        <section className="min-h-screen flex items-center justify-center px-4 py-20 relative overflow-hidden">
+            {/* Animated background gradient */}
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 opacity-30 animate-pulse" />
+
+            {/* Floating orbs */}
+            <div className="absolute top-20 left-10 w-72 h-72 bg-primary/30 rounded-full blur-3xl animate-float" />
+            <div className="absolute bottom-20 right-10 w-96 h-96 bg-secondary/30 rounded-full blur-3xl animate-float" style={{ animationDelay: '1s' }} />
+
+            <motion.div
+                className="max-w-4xl mx-auto text-center relative z-10"
+                variants={containerVariants}
+                initial="hidden"
+                animate="visible"
+            >
+                <motion.div variants={itemVariants}>
+                    <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold mb-6">
+                        Hi, I'm{' '}
+                        <span className="gradient-text animate-glow">
+                            {data.name}
+                        </span>
+                    </h1>
+                </motion.div>
+
+                <motion.div variants={itemVariants}>
+                    <h2 className="text-2xl md:text-4xl font-semibold text-muted-foreground mb-8">
+                        {data.role}
+                    </h2>
+                </motion.div>
+
+                <motion.p
+                    variants={itemVariants}
+                    className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-12 leading-relaxed"
+                >
+                    {data.bio}
+                </motion.p>
+
+                <motion.div
+                    variants={itemVariants}
+                    className="flex flex-wrap gap-4 justify-center mb-12"
+                >
+                    {data.social.github && (
+                        <a
+                            href={normalizeLink(data.social.github, 'https://github.com')}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={cn(
+                                'px-6 py-3 rounded-lg glass hover:glow-effect transition-all duration-300',
+                                'flex items-center gap-2 hover:scale-105 active:scale-95'
+                            )}
+                        >
+                            <Github className="w-5 h-5" />
+                            GitHub
+                        </a>
+                    )}
+
+                    {data.social.linkedin && (
+                        <a
+                            href={normalizeLink(data.social.linkedin, 'https://linkedin.com/in')}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={cn(
+                                'px-6 py-3 rounded-lg glass hover:glow-effect transition-all duration-300',
+                                'flex items-center gap-2 hover:scale-105 active:scale-95'
+                            )}
+                        >
+                            <Linkedin className="w-5 h-5" />
+                            LinkedIn
+                        </a>
+                    )}
+
+                    {data.social.twitter && (
+                        <a
+                            href={normalizeLink(data.social.twitter, 'https://twitter.com')}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={cn(
+                                'px-6 py-3 rounded-lg glass hover:glow-effect transition-all duration-300',
+                                'flex items-center gap-2 hover:scale-105 active:scale-95'
+                            )}
+                        >
+                            <Twitter className="w-5 h-5" />
+                            Twitter
+                        </a>
+                    )}
+
+                    {data.social.email && (
+                        <a
+                            href={data.social.email.startsWith('mailto:') ? data.social.email : `mailto:${data.social.email}`}
+                            className={cn(
+                                'px-6 py-3 rounded-lg glass hover:glow-effect transition-all duration-300',
+                                'flex items-center gap-2 hover:scale-105 active:scale-95'
+                            )}
+                        >
+                            <Mail className="w-5 h-5" />
+                            Email
+                        </a>
+                    )}
+
+                    <button
+                        className={cn(
+                            'px-6 py-3 rounded-lg bg-gradient-to-r from-primary to-secondary hover:glow-effect transition-all duration-300',
+                            'flex items-center gap-2 hover:scale-105 active:scale-95 font-semibold'
+                        )}
+                    >
+                        <Download className="w-5 h-5" />
+                        Resume
+                    </button>
+                </motion.div>
+
+                <motion.div
+                    variants={itemVariants}
+                    className="flex justify-center"
+                >
+                    <a
+                        href="#projects"
+                        title="Scroll to projects"
+                        aria-label="Scroll to projects section"
+                        className="text-muted-foreground hover:text-foreground transition-colors animate-bounce"
+                    >
+                        <svg
+                            className="w-6 h-6"
+                            fill="none"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+                        </svg>
+                    </a>
+                </motion.div>
+            </motion.div>
+        </section>
+    );
+}