create-foliokit 0.0.0-stage → 1.0.1

package/templates/default/data.ts

@@ -0,0 +1,169 @@
+/*
+ * FolioKit Portfolio Configuration
+ *
+ * Customize your portfolio by editing the information in this file.
+ * Replace the sample content with your own details.
+ *
+ * You generally do not need to edit the React components or other source
+ * files to update your personal information, projects, skills, or links.
+ *
+ * Icon Reference Links:
+ * - Technical Skills: https://skillicons.dev
+ * - Social & Brand Icons: https://simpleicons.org
+ */
+
+import type { PortfolioConfig } from './types.js'
+export type { Skill, Project, ContentItem, Testimonial, SocialIcon, PortfolioConfig } from './types.js'
+
+export const portfolioConfig: PortfolioConfig = {
+  // Personal Information
+  profile: {
+    name: 'Your Name',
+    profileImage: '/avatar-placeholder.png', // Replace with '/my-photo.jpg' after copying your photo into public/.
+    headline: 'Full Stack Developer',
+    introduction: "Hey, there! I'm a",
+    about: `Hey, there! I'm a developer who loves building products that people actually use. Write a couple of sentences here about who you are, what you do, and what you're currently working on.
+
+Use this space to talk about your experience, the kinds of problems you enjoy solving, and the technologies you reach for most often.
+
+Wrap up with what you're excited about right now — side projects, open source, or whatever you're learning next`,
+    location: 'Delhi, India',
+    timeZone: 'Asia/Kolkata', // IANA time zone for the live clock
+    timeZoneLabel: 'IST',
+    quote: 'Build with curiosity. Share what you learn.',
+  },
+
+  // Social Links
+  // Add, edit, remove, or reorder your social media profiles.
+  // Find brand icons at: https://simpleicons.org (built-in icons: 'mail', 'file-text')
+  socialIcons: [
+    { label: 'GitHub', icon: 'github', url: 'https://github.com/your-username', color: '#f2f0e9' },
+    { label: 'LinkedIn', icon: 'linkedin', url: 'https://linkedin.com/in/your-username', color: '#0a66c2' },
+    { label: 'Instagram', icon: 'instagram', url: 'https://instagram.com/your-username', color: '#e4405f' },
+    { label: 'X', icon: 'x', url: 'https://x.com/your-username', color: '#f2f0e9' },
+  ],
+
+  // Work Experience
+  // Add, edit, remove, or reorder work history. Leave empty ([]) to hide this section.
+  // Optional logo: copy an image to public/ and set image: '/company-logo.png'. Omit image to show the Logo placeholder.
+  experience: [
+    {
+      title: 'Your Role',
+      organization: 'Company Name',
+      organizationUrl: 'https://example.com', // Placeholder: replace with the company website URL.
+      image: '', // Set to '/company-logo.png' after copying the image into public/.
+      imageAlt: 'Company Name logo',
+      imagePlaceholder: '/experience-logo-placeholder.png',
+      location: 'City, Country', // Replace with the role's location, or leave '' to hide it.
+      date: 'Month YYYY – Present',
+      description: 'Replace this sample with your role, company, and dates.',
+    },
+  ],
+
+  // Education
+  // Add, edit, remove, or reorder education. Leave empty ([]) to hide this section.
+  education: [
+    {
+      title: 'Degree or Program',
+      organization: 'Your University',
+      organizationUrl: 'https://example.com', // Placeholder: replace with the university website URL.
+      image: '', // Set to '/school-logo.png' after copying the image into public/.
+      imageAlt: 'University logo',
+      location: 'City, Country', // Replace with the school's location, or leave '' to hide it.
+      date: 'YYYY – YYYY',
+      description: 'Add your major, score, or another education detail here.',
+    },
+  ],
+
+  // Skills
+  // Add, edit, remove, or reorder skills.
+  // Find skill icon identifiers at: https://skillicons.dev
+  skills: [
+    { name: 'HTML', icon: 'html', category: 'Frontend' },
+    { name: 'CSS', icon: 'css', category: 'Frontend' },
+    { name: 'JavaScript', icon: 'js', category: 'Frontend' },
+    { name: 'React', icon: 'react', category: 'Frontend' },
+    { name: 'TypeScript', icon: 'ts', category: 'Frontend' },
+    { name: 'Tailwind CSS', icon: 'tailwind', category: 'Frontend' },
+    { name: 'Vite', icon: 'vite', category: 'Tools' },
+    { name: 'Redux', icon: 'redux', category: 'Frontend' },
+    { name: 'Markdown', icon: 'md', category: 'Tools' },
+    { name: 'Node.js', icon: 'nodejs', category: 'Backend' },
+    { name: 'Express.js', icon: 'express', category: 'Backend' },
+    { name: 'MongoDB', icon: 'mongodb', category: 'Backend' },
+    { name: 'MySQL', icon: 'mysql', category: 'Backend' },
+    { name: 'PostgreSQL', icon: 'postgres', category: 'Backend' },
+    { name: 'C', icon: 'c', category: 'Languages' },
+    { name: 'Python', icon: 'python', category: 'Languages' },
+    { name: 'Java', icon: 'java', category: 'Languages' },
+    { name: 'Postman', icon: 'postman', category: 'Tools' },
+    { name: 'VS Code', icon: 'vscode', category: 'Tools' },
+    { name: 'Git', icon: 'git', category: 'Tools' },
+    { name: 'GitHub', icon: 'github', category: 'Tools' },
+    { name: 'npm', icon: 'npm', category: 'Tools' },
+    { name: 'GitHub Actions', icon: 'githubactions', category: 'Tools' },
+  ],
+
+  // Projects
+  // Add, edit, remove, or reorder projects. Set featured: true to highlight in the 3D gallery.
+  // Technology icon identifiers also come from: https://skillicons.dev
+  projects: [
+    {
+      name: 'Project One',
+      category: 'PROJECT CATEGORY',
+      description: 'Add a short description of this project, the problem it solves, and what you built.',
+      image: '/project-placeholder.png', // Replace with '/my-project.png' after copying it into public/.
+      imageAlt: 'Project image placeholder, 1200 by 675 pixels',
+      technologies: [{ name: 'React', icon: 'react' }, { name: 'TypeScript', icon: 'ts' }],
+      featured: true, // Highlights project in the 3D magazine gallery
+    },
+    {
+      name: 'Project Two',
+      category: 'PROJECT CATEGORY',
+      description: 'Describe another project here. Replace the title, image, and technology stack in data.ts.',
+      image: '/project-placeholder.png', // Replace with '/my-project.png' after copying it into public/.
+      imageAlt: 'Project image placeholder, 1200 by 675 pixels',
+      technologies: [{ name: 'Node.js', icon: 'nodejs' }, { name: 'Express.js', icon: 'express' }, { name: 'MongoDB', icon: 'mongodb' }],
+    },
+    {
+      name: 'Project Three',
+      category: 'PROJECT CATEGORY',
+      description: 'Use this space to explain what you made and the tools or technologies you used.',
+      image: '/project-placeholder.png', // Replace with '/my-project.png' after copying it into public/.
+      imageAlt: 'Project image placeholder, 1200 by 675 pixels',
+      technologies: [{ name: 'Python', icon: 'python' }, { name: 'C', icon: 'c' }, { name: 'Java', icon: 'java' }],
+    },
+  ],
+
+  // Testimonials
+  // Add, edit, remove, or reorder testimonials. Leave empty ([]) to hide this section.
+  testimonials: [
+    {
+      name: 'Person One',
+      role: 'Role or designation',
+      message: 'Replace this placeholder with a genuine testimonial before publishing.',
+    },
+    {
+      name: 'Person Two',
+      role: 'Role or designation',
+      message: 'Replace this placeholder with a genuine testimonial before publishing.',
+    },
+    {
+      name: 'Person Three',
+      role: 'Role or designation',
+      message: 'Replace this placeholder with a genuine testimonial before publishing.',
+    },
+  ],
+
+  // Contact
+  contact: {
+    email: 'hello@example.com',
+  },
+
+  // SEO & Metadata
+  seo: {
+    title: '{{name}} — {{headline}}',
+    description: '{{name}} is a {{headline}} building useful, thoughtful web experiences.',
+  },
+}
+

package/templates/default/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="A developer portfolio." />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Developer Portfolio" />
+    <meta property="og:description" content="A developer portfolio." />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Developer Portfolio" />
+    <meta name="twitter:description" content="A developer portfolio." />
+    <title>Developer Portfolio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>