How to Set Up and Customize This Portfolio

🛠 Installation Guide

Follow the steps below to get your personal portfolio site up and running.

1. Create a Next.js App with Tailwind CSS and TypeScript
   Copy

   npx create-next-app@latest my-portfolio --typescript
   cd my-portfolio
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

   Then configure your tailwind.config.js and globals.css as per the Tailwind CSS docs.

   👉 Or visit the official Next.js installation guide for the latest instructions.

2. Install the Portfolio Generator Package
   Copy

   npm install @bikeshkit/portfolio-generator

3. Update Your app/page.tsx

   Replace the contents with the following:

   Copy

   "use client";
   import { PortfolioHome } from "@bikeshkit/portfolio-generator";
   import data from "../data.json";
   
   export default function Home() {
     return <PortfolioHome {...data} />;
   }

4. Create a src/data.json file

   Paste the following sample content:

   Copy

   {
     "name": "John Doe",
     "githubUrl": "https://github.com/johndoe",
     "linkedinUrl": "https://linkedin.com/in/johndoe",
     "email": "john@example.com",
     "projects": [
       {
         "title": "My Portfolio",
         "description": "Built with Next.js and Tailwind.",
         "url": "https://github.com/johndoe/portfolio"
       }
     ],
     "skills": ["React", "Next.js", "Node.js"]
   }

🎨 What You Can Customize

• name: Your full name to display.
• githubUrl: Your GitHub profile link.
• linkedinUrl: Your LinkedIn profile link.
• email: Your email for the contact button.
• projects: Array of projects (title, description, url).
• skills: Array of your technical skills.

🔁 Updating Your Portfolio

To change the content of this portfolio (like your name, links, projects, skills, and email), update the JSON file at:

src/data.json

After editing data.json, restart your development server if needed, and your updates will appear on the site.