From 250ad1c10bc673b87e62442dae54b92512653fec Mon Sep 17 00:00:00 2001 From: Aisha Date: Fri, 25 Apr 2025 03:22:46 +0530 Subject: [PATCH 1/2] created readme file for better understanding --- README.md | 133 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 111 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index a75ac52..5e4c28b 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,129 @@ -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. -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. From 9cab0d9eac66eae7d2a09335ffb95b76a9bf9551 Mon Sep 17 00:00:00 2001 From: Aisha Date: Fri, 25 Apr 2025 03:24:28 +0530 Subject: [PATCH 2/2] created readme file for better understanding --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 5e4c28b..f4ac8b1 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,7 @@ Netlify: Easily deploy and configure your portfolio with Netlify. πŸ“« 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 πŸͺͺ License