diff --git a/README.md b/README.md index a75ac52..f4ac8b1 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,130 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# πŸ› οΈ My Site Builder (MSB) -## Getting Started +Welcome to **My Site Builder (MSB)** – a simple, beginner-friendly portfolio starter project built to help developers quickly set up and launch their personal websites. -First, run the development server: +This project is designed to be opened directly in **VS Code**, customized, and deployed – perfect for anyone looking to create their own professional portfolio. +--- + +## 🌐 Live Example + +Check out my own portfolio built using MSB: +πŸ‘‰ [aisha0320.github.io](https://aisha0320.github.io) + +--- + +## πŸš€ Quick Start + +### 1. Clone this repository + +```bash +git clone https://github.com/yourusername/msb.git + +### 2. Navigate to the folder + +```bash +cd msb + +### 3. Open in VS Code +```bash +code . +### 4. Install dependencies (if applicable) +If you're using React or another framework: + +```bash + +npm install +Or if you're using Yarn: +yarn install + +### 5. Start the development server ```bash npm run dev -# or +Or if you're using Yarn: yarn dev -# or -pnpm dev -# or -bun dev -``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. +πŸ“ Folder Structure +java +Copy +Edit +msb/ +β”œβ”€β”€ public/ +β”œβ”€β”€ src/ +β”‚ β”œβ”€β”€ components/ +β”‚ β”œβ”€β”€ pages/ +β”‚ └── styles/ +β”œβ”€β”€ .gitignore +β”œβ”€β”€ package.json +β”œβ”€β”€ README.md +└── ... +⚠️ Modify this section based on your actual folder structure (especially if you're not using React). + +## ✨ What You Can Customize: +Name, bio, contact info +Projects section – add links, descriptions, and tech stacks +Skills, work experience, education +Design and theme – adjust CSS for styling + +--- + +## ✨ How can you Update Your Portfolio Information + +Inside the `site.config.mjs` file, you can update: +- **Personal Information**: Name, bio, contact details. +- **Social Links**: Add your LinkedIn, GitHub, and other profiles. +- **Talks link from Youtube. + +### Using Git Environment Variables + +To fetch your repositories for the **Projects Section**, you'll need to set up your Git environment: + +1. **Generate a Git Token**: Go to GitHub settings, create a Personal Access Token (PAT) for accessing your repositories. +2. **Set Up the Git Token**: Add the token to your `.env` file or Git environment using: + + ```bash + GIT_TOKEN=your_personal_access_token + ``` + +3. **Link GitHub Repositories**: Inside `index.tsx`, use the `GIT_TOKEN` to fetch all your repositories with a script, like this: + + ```javascript + const fetchRepositories = async () => { + const response = await fetch('https://api.github.com/users/your-username/repos', { + headers: { + Authorization: `token ${process.env.GIT_TOKEN}` + } + }); + const repos = await response.json(); + return repos; + }; + ``` + +This will allow your portfolio to dynamically display all repositories linked to your GitHub account. + +--- -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. +🧠 Why I Made This +I created MSB to make it easier for developers (especially beginners) to build their personal sites without starting from scratch. It's clean, editable, and a great starting point for anyone wanting a digital presence. -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. +πŸ“¦ Deployment +Once you're happy with your portfolio, you can deploy it to the web using services like: -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. +GitHub Pages: Host your portfolio directly from your GitHub repository. +Vercel: Deploy with automatic deployment on each push. +Netlify: Easily deploy and configure your portfolio with Netlify. -## Learn More +πŸ“« Let’s Connect +If you use this project, I’d love to see what you create! +Feel free to connect with me on LinkedIn. +www.linkedin.com/in/agarwalaisha2000 -To learn more about Next.js, take a look at the following resources: -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +πŸͺͺ License +MIT License – feel free to use, modify, and share πŸ™Œ -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! +πŸ–₯️ Tech Stack +Let me know your tech stack (React or HTML/CSS) and I can tailor the setup for you even more accurately! I can also help you generate a thumbnail image for your GitHub repo if you need a nice visual at the top. -## Deploy on Vercel -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.