portfolify 2.0.0

package/templates/src/components/Projects.tsx

@@ -0,0 +1,130 @@
+import { motion } from 'framer-motion';
+import { ExternalLink, Github } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Project {
+    name: string;
+    description: string;
+    tech: string[];
+    github?: string;
+    demo?: string;
+}
+
+interface ProjectsProps {
+    projects: Project[];
+}
+
+export default function Projects({ projects }: ProjectsProps) {
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.2,
+            },
+        },
+    };
+
+    const cardVariants = {
+        hidden: { opacity: 0, y: 50 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: 0.6, ease: 'easeOut' },
+        },
+    };
+
+    return (
+        <section id="projects" 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">
+                        Featured <span className="gradient-text">Projects</span>
+                    </h2>
+                    <p className="text-muted-foreground text-lg">
+                        Some of my recent work
+                    </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"
+                >
+                    {projects.map((project, index) => (
+                        <motion.div
+                            key={index}
+                            variants={cardVariants}
+                            whileHover={{ scale: 1.05, y: -10 }}
+                            className={cn(
+                                'glass rounded-xl p-6 hover:glow-effect transition-all duration-300',
+                                'border border-border/50 hover:border-primary/50'
+                            )}
+                        >
+                            <h3 className="text-2xl font-bold mb-3 gradient-text">
+                                {project.name}
+                            </h3>
+
+                            <p className="text-muted-foreground mb-4 line-clamp-3">
+                                {project.description}
+                            </p>
+
+                            <div className="flex flex-wrap gap-2 mb-6">
+                                {project.tech.map((tech, i) => (
+                                    <span
+                                        key={i}
+                                        className="px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary border border-primary/20"
+                                    >
+                                        {tech}
+                                    </span>
+                                ))}
+                            </div>
+
+                            <div className="flex gap-3">
+                                {project.github && (
+                                    <a
+                                        href={project.github}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className={cn(
+                                            'flex items-center gap-2 px-4 py-2 rounded-lg',
+                                            'bg-muted hover:bg-muted/80 transition-colors',
+                                            'text-sm font-medium'
+                                        )}
+                                    >
+                                        <Github className="w-4 h-4" />
+                                        Code
+                                    </a>
+                                )}
+
+                                {project.demo && (
+                                    <a
+                                        href={project.demo}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className={cn(
+                                            'flex items-center gap-2 px-4 py-2 rounded-lg',
+                                            'bg-gradient-to-r from-primary to-secondary',
+                                            'text-sm font-medium hover:opacity-90 transition-opacity'
+                                        )}
+                                    >
+                                        <ExternalLink className="w-4 h-4" />
+                                        Demo
+                                    </a>
+                                )}
+                            </div>
+                        </motion.div>
+                    ))}
+                </motion.div>
+            </div>
+        </section>
+    );
+}

package/templates/src/components/SEO.tsx

@@ -0,0 +1,38 @@
+import { Helmet } from 'react-helmet-async';
+
+interface SEOProps {
+    title: string;
+    description: string;
+    name: string;
+    type?: string;
+}
+
+export default function SEO({ title, description, name, type = 'website' }: SEOProps) {
+    return (
+        <Helmet>
+            {/* Standard metadata tags */}
+            <title>{title}</title>
+            <meta name="description" content={description} />
+
+            {/* Open Graph tags */}
+            <meta property="og:type" content={type} />
+            <meta property="og:title" content={title} />
+            <meta property="og:description" content={description} />
+
+            {/* Twitter Card tags */}
+            <meta name="twitter:card" content="summary_large_image" />
+            <meta name="twitter:title" content={title} />
+            <meta name="twitter:description" content={description} />
+
+            {/* JSON-LD structured data */}
+            <script type="application/ld+json">
+                {JSON.stringify({
+                    '@context': 'https://schema.org',
+                    '@type': 'Person',
+                    name: name,
+                    description: description,
+                })}
+            </script>
+        </Helmet>
+    );
+}

package/templates/src/components/Skills.tsx

@@ -0,0 +1,107 @@
+import { motion } from 'framer-motion';
+import {
+    Code2,
+    Database,
+    Palette,
+    Terminal,
+    Wrench,
+    Zap,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface SkillsProps {
+    skills: string[];
+}
+
+// Icon mapping for common skills
+const getSkillIcon = (skill: string) => {
+    const lowerSkill = skill.toLowerCase();
+
+    if (lowerSkill.includes('react') || lowerSkill.includes('vue') || lowerSkill.includes('angular')) {
+        return Code2;
+    }
+    if (lowerSkill.includes('node') || lowerSkill.includes('express') || lowerSkill.includes('api')) {
+        return Terminal;
+    }
+    if (lowerSkill.includes('database') || lowerSkill.includes('sql') || lowerSkill.includes('mongo')) {
+        return Database;
+    }
+    if (lowerSkill.includes('css') || lowerSkill.includes('tailwind') || lowerSkill.includes('design')) {
+        return Palette;
+    }
+    if (lowerSkill.includes('typescript') || lowerSkill.includes('javascript')) {
+        return Zap;
+    }
+
+    return Wrench;
+};
+
+export default function Skills({ skills }: SkillsProps) {
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.1,
+            },
+        },
+    };
+
+    const itemVariants = {
+        hidden: { opacity: 0, scale: 0.8 },
+        visible: {
+            opacity: 1,
+            scale: 1,
+            transition: { duration: 0.4, ease: 'easeOut' },
+        },
+    };
+
+    return (
+        <section className="py-20 px-4 bg-muted/30">
+            <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">
+                        Skills & <span className="gradient-text">Technologies</span>
+                    </h2>
+                    <p className="text-muted-foreground text-lg">
+                        Tools and technologies I work with
+                    </p>
+                </motion.div>
+
+                <motion.div
+                    variants={containerVariants}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true }}
+                    className="flex flex-wrap justify-center gap-4"
+                >
+                    {skills.map((skill, index) => {
+                        const Icon = getSkillIcon(skill);
+
+                        return (
+                            <motion.div
+                                key={index}
+                                variants={itemVariants}
+                                whileHover={{ scale: 1.1, rotate: 5 }}
+                                className={cn(
+                                    'glass rounded-xl px-6 py-4 flex items-center gap-3',
+                                    'hover:glow-effect transition-all duration-300',
+                                    'border border-border/50 hover:border-primary/50'
+                                )}
+                            >
+                                <Icon className="w-5 h-5 text-primary" />
+                                <span className="font-medium text-foreground">{skill}</span>
+                            </motion.div>
+                        );
+                    })}
+                </motion.div>
+            </div>
+        </section>
+    );
+}

package/templates/src/components/ThemeToggle.tsx

@@ -0,0 +1,39 @@
+import { motion } from 'framer-motion';
+import { Sun, Moon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ThemeToggleProps {
+    isDarkMode: boolean;
+    toggleTheme: () => void;
+}
+
+export default function ThemeToggle({ isDarkMode, toggleTheme }: ThemeToggleProps) {
+    return (
+        <motion.button
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.5, duration: 0.3 }}
+            onClick={toggleTheme}
+            className={cn(
+                'fixed top-6 right-6 z-50',
+                'p-3 rounded-full glass',
+                'hover:glow-effect transition-all duration-300',
+                'hover:scale-110 active:scale-95',
+                'border border-border/50 hover:border-primary/50'
+            )}
+            aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+        >
+            <motion.div
+                initial={false}
+                animate={{ rotate: isDarkMode ? 0 : 180 }}
+                transition={{ duration: 0.3 }}
+            >
+                {isDarkMode ? (
+                    <Sun className="w-5 h-5 text-yellow-400" />
+                ) : (
+                    <Moon className="w-5 h-5 text-primary" />
+                )}
+            </motion.div>
+        </motion.button>
+    );
+}

package/templates/src/config/portfolio.json

@@ -0,0 +1,61 @@
+{
+    "name": "John Doe",
+    "role": "Full Stack Developer",
+    "bio": "Passionate developer building amazing web experiences with modern technologies.",
+    "skills": [
+        "React",
+        "TypeScript",
+        "Node.js",
+        "Tailwind CSS"
+    ],
+    "projects": [
+        {
+            "name": "Example Project",
+            "description": "A cool project built with React and TypeScript",
+            "tech": [
+                "React",
+                "TypeScript",
+                "Vite"
+            ],
+            "github": "https://github.com/username/project",
+            "demo": "https://example.com"
+        }
+    ],
+    "enableBlog": true,
+    "enableDarkMode": true,
+    "defaultDarkMode": true,
+    "social": {
+        "github": "username",
+        "linkedin": "username",
+        "twitter": "username",
+        "email": "hello@example.com",
+        "instagram": "",
+        "behance": "",
+        "dribbble": "",
+        "youtube": "",
+        "tiktok": "",
+        "phone": ""
+    },
+    "theme": "modern-dark",
+    "themeConfig": {
+        "name": "Modern Developer",
+        "value": "modern-dark",
+        "category": "Developer",
+        "colors": {
+            "primary": "220 90% 56%",
+            "secondary": "280 80% 60%",
+            "accent": "340 82% 52%",
+            "background": "224 71% 4%",
+            "foreground": "213 31% 91%",
+            "muted": "223 47% 11%",
+            "backgroundLight": "0 0% 100%",
+            "foregroundLight": "224 71% 4%",
+            "mutedLight": "220 14% 96%"
+        },
+        "defaultRole": "Full Stack Developer",
+        "defaultSkills": ["React", "Node.js", "TypeScript", "Python", "AWS", "Docker"],
+        "emoji": "💻"
+    },
+    "siteUrl": "https://example.com",
+    "portfolioType": "Developer"
+}

package/templates/src/content/blog/welcome.mdx

@@ -0,0 +1,29 @@
+---
+title: "Welcome to My Blog"
+date: "2026-01-23"
+excerpt: "This is my first blog post using MDX. Learn how to customize and add more posts."
+tags: ["welcome", "intro", "mdx"]
+---
+
+# Welcome to My Blog!
+
+This is a sample blog post written in **MDX**. You can use all the power of Markdown with React components.
+
+## Getting Started
+
+To add a new blog post:
+
+1. Create a new `.mdx` file in `src/content/blog/`
+2. Add frontmatter with title, date, excerpt, and tags
+3. Write your content using Markdown and JSX
+
+## Code Example
+
+```typescript
+const greeting = "Hello, World!";
+console.log(greeting);
+```
+
+## What's Next?
+
+Start customizing your portfolio and adding more content. Happy blogging! 🚀

package/templates/src/lib/blog.ts

@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+
+export interface BlogPost {
+    slug: string;
+    title: string;
+    date: string;
+    excerpt: string;
+    tags: string[];
+    content?: string;
+}
+
+// Sample blog posts - in production, these would be loaded from MDX files
+export const blogPosts: BlogPost[] = [
+    {
+        slug: 'welcome',
+        title: 'Welcome to My Blog',
+        date: new Date().toISOString().split('T')[0],
+        excerpt: 'This is my first blog post using MDX. Learn how to customize and add more posts.',
+        tags: ['welcome', 'intro', 'mdx']
+    },
+    {
+        slug: 'getting-started-react',
+        title: 'Getting Started with React',
+        date: new Date(Date.now() - 86400000).toISOString().split('T')[0],
+        excerpt: 'Learn the fundamentals of React and build your first component.',
+        tags: ['react', 'javascript', 'tutorial']
+    },
+    {
+        slug: 'typescript-tips',
+        title: 'TypeScript Tips and Tricks',
+        date: new Date(Date.now() - 172800000).toISOString().split('T')[0],
+        excerpt: 'Improve your TypeScript skills with these practical tips.',
+        tags: ['typescript', 'tips', 'best-practices']
+    }
+];
+
+export function useBlogPosts() {
+    const [posts, setPosts] = useState<BlogPost[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        // Simulate loading blog posts
+        setPosts(blogPosts);
+        setLoading(false);
+    }, []);
+
+    return { posts, loading };
+}
+
+export function formatDate(dateString: string): string {
+    return new Date(dateString).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+}
+
+export function getReadingTime(content: string): string {
+    const wordsPerMinute = 200;
+    const words = content.split(/\s+/).length;
+    const minutes = Math.ceil(words / wordsPerMinute);
+    return `${minutes} min read`;
+}

package/templates/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

package/templates/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
+import App from './App';
+import './styles/globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <HelmetProvider>
+            <App />
+        </HelmetProvider>
+    </React.StrictMode>,
+);

package/templates/src/styles/globals.css

@@ -0,0 +1,123 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Default (dark mode) */
+  :root {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+    --primary: 220 90% 56%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 280 80% 60%;
+    --secondary-foreground: 210 40% 98%;
+    --accent: 340 82% 52%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+    --radius: 0.5rem;
+  }
+
+  /* Dark mode */
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+  }
+
+  /* Light mode */
+  .light {
+    --background: 0 0% 100%;
+    --foreground: 224 71% 4%;
+    --muted: 220 14% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+  }
+}
+
+@layer utilities {
+  .glass {
+    background: rgba(255, 255, 255, 0.05);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .light .glass {
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+  }
+
+  .gradient-text {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-secondary to-accent;
+  }
+
+  .glow-effect {
+    box-shadow: 0 0 20px rgba(var(--primary), 0.3);
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+
+  .animate-glow {
+    animation: glow 2s ease-in-out infinite alternate;
+  }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+}
+
+@keyframes glow {
+  from { filter: brightness(1); }
+  to { filter: brightness(1.2); }
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--primary));
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--secondary));
+}
+
+/* Theme transition */
+body {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}

package/templates/tailwind.config.js

@@ -0,0 +1,65 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    darkMode: ['class'],
+    content: [
+        './index.html',
+        './src/**/*.{js,ts,jsx,tsx}',
+    ],
+    theme: {
+        extend: {
+            colors: {
+                border: 'hsl(var(--border))',
+                input: 'hsl(var(--input))',
+                ring: 'hsl(var(--ring))',
+                background: 'hsl(var(--background))',
+                foreground: 'hsl(var(--foreground))',
+                primary: {
+                    DEFAULT: 'hsl(var(--primary))',
+                    foreground: 'hsl(var(--primary-foreground))',
+                },
+                secondary: {
+                    DEFAULT: 'hsl(var(--secondary))',
+                    foreground: 'hsl(var(--secondary-foreground))',
+                },
+                accent: {
+                    DEFAULT: 'hsl(var(--accent))',
+                    foreground: 'hsl(var(--accent-foreground))',
+                },
+                muted: {
+                    DEFAULT: 'hsl(var(--muted))',
+                    foreground: 'hsl(var(--muted-foreground))',
+                },
+            },
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+            },
+            keyframes: {
+                'fade-in': {
+                    '0%': { opacity: '0', transform: 'translateY(10px)' },
+                    '100%': { opacity: '1', transform: 'translateY(0)' },
+                },
+                'slide-in': {
+                    '0%': { transform: 'translateX(-100%)' },
+                    '100%': { transform: 'translateX(0)' },
+                },
+                'glow': {
+                    '0%, 100%': { boxShadow: '0 0 20px rgba(var(--primary), 0.5)' },
+                    '50%': { boxShadow: '0 0 40px rgba(var(--primary), 0.8)' },
+                },
+                'float': {
+                    '0%, 100%': { transform: 'translateY(0px)' },
+                    '50%': { transform: 'translateY(-20px)' },
+                },
+            },
+            animation: {
+                'fade-in': 'fade-in 0.5s ease-out',
+                'slide-in': 'slide-in 0.5s ease-out',
+                'glow': 'glow 2s ease-in-out infinite',
+                'float': 'float 3s ease-in-out infinite',
+            },
+        },
+    },
+    plugins: [],
+}