From 80fb25c6d46c952dc667f85a0605b3f12e2b580b Mon Sep 17 00:00:00 2001 From: NewtonSchool Date: Thu, 20 Aug 2026 12:06:43 +0530 Subject: [PATCH 1/7] Add dark mode toggle and local fallback data Adds a sun/moon toggle button in the header that switches between light and dark themes. Respects system preference on first visit and remembers the users choice via localStorage. Also adds local fallback data so sample profiles render when previewing without the GitHub API. Generated with Codebuff Co-Authored-By: Codebuff --- css/style.css | 86 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 13 ++++++-- js/app.js | 24 +++++++++++++- js/local-data.js | 34 +++++++++++++++++++ 4 files changed, 153 insertions(+), 4 deletions(-) create mode 100644 js/local-data.js diff --git a/css/style.css b/css/style.css index b3acf30..a078703 100644 --- a/css/style.css +++ b/css/style.css @@ -593,3 +593,89 @@ code { gap: 12px; } } + +/* ======================================== + Header Actions & Theme Toggle + ======================================== */ + +.header-actions { + display: flex; + align-items: center; + gap: 8px; +} + +.theme-toggle { + width: 36px; + height: 36px; + border-radius: 8px; + border: 1px solid var(--border); + background: var(--bg-card); + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: border-color 0.15s, color 0.15s; +} + +.theme-toggle:hover { + border-color: var(--accent); + color: var(--accent); +} + +.theme-toggle .icon-moon { + display: none; +} + +/* ======================================== + Dark Mode + ======================================== */ + +body.dark { + --bg: #0d0d0d; + --bg-card: #171717; + --text: #e5e5e5; + --text-secondary: #999; + --border: #2a2a2a; + --accent: #60a5fa; + --accent-light: #1e2a3a; + --success: #4ade80; +} + +body.dark .theme-toggle .icon-sun { + display: none; +} + +body.dark .theme-toggle .icon-moon { + display: block; +} + +body.dark .json-block { + background: #111; + border: 1px solid #2a2a2a; +} + +body.dark .card-initials { + background: #1e2a3a; +} + +body.dark .search-box input, +body.dark .filter-wrap select { + background: var(--bg-card); + color: var(--text); + border-color: var(--border); +} + +body.dark .how-step-num { + background: var(--bg-card); + border-color: var(--border); +} + +body.dark .mobile-menu-btn span { + background: var(--text); +} + +body.dark .header-nav.open { + background: var(--bg-card); + border-color: var(--border); +} diff --git a/index.html b/index.html index 2535f40..a934118 100644 --- a/index.html +++ b/index.html @@ -20,9 +20,15 @@ How it works GitHub - +
+ + +
@@ -161,6 +167,7 @@

What your profile.json looks like + diff --git a/js/app.js b/js/app.js index 86d5467..02a84af 100644 --- a/js/app.js +++ b/js/app.js @@ -243,7 +243,16 @@ renderCards(students); }) .catch(function (err) { - loadingEl.innerHTML = '

Could not load profiles. Check the repository configuration in js/config.js.

'; + // Fallback to local data if API unavailable (e.g. opening file locally) + if (typeof LOCAL_PROFILES !== "undefined" && LOCAL_PROFILES.length > 0) { + students = LOCAL_PROFILES; + loadingEl.style.display = "none"; + updateStats(); + buildTechFilter(); + renderCards(students); + } else { + loadingEl.innerHTML = '

Could not load profiles. Check the repository configuration in js/config.js.

'; + } console.error("DevWall error:", err); }); @@ -258,6 +267,19 @@ nav.classList.toggle("open"); }); } + + // Dark mode toggle + var themeBtn = document.getElementById("theme-toggle"); + var savedTheme = localStorage.getItem("devwall-theme"); + if (savedTheme === "dark" || (!savedTheme && window.matchMedia("(prefers-color-scheme: dark)").matches)) { + document.body.classList.add("dark"); + } + if (themeBtn) { + themeBtn.addEventListener("click", function () { + document.body.classList.toggle("dark"); + localStorage.setItem("devwall-theme", document.body.classList.contains("dark") ? "dark" : "light"); + }); + } } if (document.readyState === "loading") { diff --git a/js/local-data.js b/js/local-data.js new file mode 100644 index 0000000..29696e1 --- /dev/null +++ b/js/local-data.js @@ -0,0 +1,34 @@ +/** + * Local fallback data. + * Used when the GitHub API isn't available (e.g. opening index.html locally). + * In production, the API auto-discovers profiles from the students/ directory. + */ +var LOCAL_PROFILES = [ + { + name: "Alice Wang", + github: "alice_w", + about: "I like making weird websites.", + favoriteTech: "HTML/CSS", + image: "", + _folder: "alice_w", + _noImage: true + }, + { + name: "Bob Fischer", + github: "bob_dev", + about: "Trying JavaScript for the first time.", + favoriteTech: "JavaScript", + image: "", + _folder: "bob_dev", + _noImage: true + }, + { + name: "Carlos Mendes", + github: "carlosmg", + about: "Here to build something cool.", + favoriteTech: "Python", + image: "", + _folder: "carlosmg", + _noImage: true + } +]; From f0148df15323c9b8e7426d580d4c1806e3f40922 Mon Sep 17 00:00:00 2001 From: NewtonSchool Date: Thu, 20 Aug 2026 12:52:38 +0530 Subject: [PATCH 2/7] Add CONTRIBUTING.md with reviewer guidelines Beginner-friendly guide for students making their first PR and a checklist for teachers/TAs reviewing and merging Pull Requests. Generated with Codebuff Co-Authored-By: Codebuff --- CONTRIBUTING.md | 146 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 CONTRIBUTING.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..1b98534 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,146 @@ +# Contributing Guide + +This document is for **students** making their first contribution and for **reviewers** (teachers/TAs) merging Pull Requests. + +--- + +## For Students + +### What to do + +1. Fork this repository +2. Find or create `students/your-github-username/` +3. Add a `profile.json` file with your details +4. Optionally add a `photo.jpg` in the same folder +5. Commit and open a Pull Request + +### profile.json format + +```json +{ + "name": "Your Name", + "github": "your-github-username", + "about": "A short bio about yourself.", + "favoriteTech": "JavaScript", + "image": "" +} +``` + +| Field | Required | Notes | +|-------|----------|-------| +| `name` | Yes | Your full name | +| `github` | Yes | Your GitHub username (must match your folder name) | +| `about` | Yes | One sentence about yourself | +| `favoriteTech` | No | Something you're learning or know | +| `image` | No | Path to photo, e.g. `"./photo.jpg"`. Leave empty for initials. | + +### Common mistakes + +- **Wrong folder name:** Your folder must match your GitHub username exactly +- **Invalid JSON:** Missing commas, trailing commas, or unmatched quotes +- **Missing fields:** At minimum, include `name`, `github`, and `about` +- **Photo too large:** Keep images under 500KB + +--- + +## For Reviewers + +### Before merging a PR, check: + +#### 1. File structure + +The student's folder should be at: +``` +students//profile.json +``` + +Optional: +``` +students//photo.jpg +``` + +#### 2. profile.json validity + +- [ ] File is valid JSON (no trailing commas, proper quoting) +- [ ] `name` field exists and is a non-empty string +- [ ] `github` field matches the folder name +- [ ] `about` field exists and is a non-empty string +- [ ] `image` field is either empty string or `"./photo.jpg"` +- [ ] No additional fields that could break the site + +#### 3. Content checks + +- [ ] Name looks real (not "test", "asdf", or placeholder) +- [ ] About is a real sentence (not lorem ipsum) +- [ ] No offensive or inappropriate content +- [ ] No malicious links or scripts + +#### 4. Photo (if included) + +- [ ] File is actually an image (JPEG, PNG, or WebP) +- [ ] File size is reasonable (under 500KB) +- [ ] Image is appropriate for a class project + +### Valid profile.json example + +```json +{ + "name": "Rahul Kumar", + "github": "rahul_dev", + "about": "Trying web development for the first time.", + "favoriteTech": "JavaScript", + "image": "./photo.jpg" +} +``` + +### Minimal valid example + +```json +{ + "name": "Jane Doe", + "github": "janedoe", + "about": "Here to learn and build things." +} +``` + +### Invalid examples + +**Trailing comma (will break JSON):** +```json +{ + "name": "Jane", + "github": "jane", +} +``` + +**Missing required field:** +```json +{ + "name": "Jane" +} +``` + +**GitHub username mismatch:** +- Folder: `students/janedoe/` +- JSON: `"github": "jane_doe"` (underscore vs no underscore) + +### Quick JSON validation + +You can validate JSON online at [jsonlint.com](https://jsonlint.com) or ask the student to check in their editor. + +### Merge checklist + +1. Approve the PR if all checks pass +2. Merge using "Squash and merge" (keeps main history clean) +3. The GitHub Pages deployment will auto-update the site +4. Tell the student to check the live site + +### If a PR has issues + +Leave a comment explaining what needs to be fixed. Common fixes: + +- "Your JSON has a trailing comma after the last field. Remove it." +- "Your `github` field doesn't match your folder name. Please fix." +- "Your file is missing the `about` field. Please add it." + +Be encouraging. This is their first PR. From 452cd81d557ca8813981c8418c209c6e71b2f6e3 Mon Sep 17 00:00:00 2001 From: NewtonSchool Date: Thu, 20 Aug 2026 12:59:35 +0530 Subject: [PATCH 3/7] Set GitHub owner to ssagar1999 in config Generated with Codebuff Co-Authored-By: Codebuff --- js/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/config.js b/js/config.js index 2d0cacc..a24b3a1 100644 --- a/js/config.js +++ b/js/config.js @@ -8,7 +8,7 @@ */ var CONFIG = { // Your GitHub username or organization - owner: "YOUR_GITHUB_USERNAME", + owner: "ssagar1999", // The repository name (e.g. "our-dev-wall") repo: "our-dev-wall", From 2c9f6b5a8ce8fa5ab18cc6be948009ea9c057825 Mon Sep 17 00:00:00 2001 From: akshitsharma-lang Date: Thu, 20 Aug 2026 14:52:54 +0530 Subject: [PATCH 4/7] added code --- students/akshitsir/profile.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 students/akshitsir/profile.json diff --git a/students/akshitsir/profile.json b/students/akshitsir/profile.json new file mode 100644 index 0000000..516de6c --- /dev/null +++ b/students/akshitsir/profile.json @@ -0,0 +1,7 @@ +{ + "name": "akshit", + "github": "akshitsharma-lang", + "about": "maths teacher", + "favoriteTech": "JavaScript", + "image": "data:image/jpeg;base64,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" +} \ No newline at end of file From 3ac7675aac529d81bbe7d20c7e8a82358b40b4ab Mon Sep 17 00:00:00 2001 From: NewtonSchool Date: Thu, 20 Aug 2026 17:54:50 +0530 Subject: [PATCH 5/7] Simplify README for absolute beginners Rewrote the README with simpler language, visual step-by-step layout, troubleshooting section, and a clear table showing what students need to touch vs what they don't. Generated with Codebuff Co-Authored-By: Codebuff --- README.md | 221 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 131 insertions(+), 90 deletions(-) diff --git a/README.md b/README.md index 1d36a02..67bb66e 100644 --- a/README.md +++ b/README.md @@ -1,149 +1,190 @@ # 👋 Our Dev Wall -A class project where every student adds their own profile card to a shared wall. +**This is a website built by our class.** -This website is built by the students. Every card you see was added by a classmate as their very first pull request on GitHub. +Every student adds their own card. Your card goes on this wall after your first Pull Request is merged. --- -## What is this? +## 🎯 Your one task -This is a simple website that shows a wall of student profiles. Each student adds their own card by editing a JSON file and opening a Pull Request. +> Add your name, a short bio, and your favourite tech to the website. Then raise a PR. That's it. -**Your task:** Add your own card to the wall. That's it. +**It should take about 5 minutes.** --- -## How to add your card +## 📝 Do this, step by step -### Step 1: Fork this repository +### 1. Click Fork -1. Click the **Fork** button at the top-right of this page. -2. This creates your own copy of the project under your GitHub account. -3. Wait for it to finish. You'll be redirected to your copy. +Look at the top-right of this page. Click the button that says **Fork**. -### Step 2: Find or create your folder +This makes a copy of the project in your GitHub account. -1. In your forked repository, go to the **`students/`** folder. -2. Look for a folder with **your GitHub username** (for example, `rahul_dev/`). -3. If your folder doesn't exist, create it: - - Click **"Add file" → "Create new file"** - - Name it: `students/your-github-username/profile.json` - - For example: `students/janedoe/profile.json` +Wait a few seconds. You will be taken to your copy. -### Step 3: Edit your profile.json +--- + +### 2. Go to the students folder + +Click on the **`students/`** folder. + +You will see folders like this: + +``` +students/ + alice_w/ + bob_dev/ + carlosmg/ +``` + +These are example students. Yours will go here too. + +--- + +### 3. Create your folder + +Click **"Add file" → "Create new file"** + +Type this as the file name (replace `yourusername` with your actual GitHub username): + +``` +students/yourusername/profile.json +``` + +> ⚠️ Your username must be **exactly** your GitHub username. Not your real name. Not a nickname. + +--- + +### 4. Paste this and change the details -Open your `profile.json` file and paste this template. Change the values to match your details: +Delete everything in the file. Paste this: ```json { - "name": "Your Name", - "github": "your-github-username", - "about": "A short sentence about yourself.", + "name": "Your Full Name", + "github": "yourusername", + "about": "Write one sentence about yourself.", "favoriteTech": "JavaScript", "image": "" } ``` -**What each field means:** +**Now change each line to match you:** -| Field | What to write | Example | -|-------|--------------|---------| -| `name` | Your full name | `"Rahul Kumar"` | -| `github` | Your GitHub username (exactly as it appears) | `"rahul_dev"` | -| `about` | One sentence about yourself | `"Trying web development for the first time."` | -| `favoriteTech` | Something you're learning or already know | `"JavaScript"` | -| `image` | Path to your photo (leave empty for initials) | `"./photo.jpg"` | +| Line | Change it to | Example | +|------|-------------|---------| +| `"name"` | Your real name | `"Priya Sharma"` | +| `"github"` | Your GitHub username | `"priya_dev"` | +| `"about"` | One sentence about you | `"Trying to build my first website."` | +| `"favoriteTech"` | Something you're learning | `"Python"` | +| `"image"` | Leave as `""` for now | `""` | -**About field examples** — keep it casual: +**Need ideas for your about line?** - "I like making weird websites." -- "Trying JavaScript for the first time." -- "I have no idea what I'm doing yet." -- "Here to build something cool." +- "No idea what I'm doing yet." +- "Here to learn something new." +- "Future full-stack developer (hopefully)." +- "I just want to break stuff and fix it." -### Step 4: Add a photo (optional) +--- + +### 5. Save it + +Click the green button that says **"Commit changes"**. + +Type a message like: `Add my profile` + +Click **"Commit changes"** again. -1. Take a photo of yourself (or use any picture). -2. Name it `photo.jpg`. -3. Put it in the same folder as your `profile.json`. -4. In your `profile.json`, set `"image": "./photo.jpg"`. -5. Keep the image small — under 500KB is ideal. +--- -### Step 5: Commit your changes +### 6. Open a Pull Request -1. Go back to your repository. -2. Click **"Commit changes"**. -3. Write a message like: `Add my profile` -4. Click **"Commit changes"** again. +Now go to the **original repository** (not your fork). -### Step 6: Open a Pull Request +> How? Go to your fork. Look for a message that says something like "This branch is X commits behind [original repo]." Click **"Contribute" → "Open pull request"**. -1. Go to the original repository (not your fork). -2. You should see a yellow banner: **"Compare & pull request"**. Click it. - - If you don't see it, go to **Pull requests → New pull request**. -3. Add a title like: `Add Rahul's profile` -4. Click **"Create pull request"**. +You will see a page that says **"Open a pull request"**. -### Step 7: Done! 🎉 +Type a title like: `Add Priya's profile` -Your teacher will review and merge your Pull Request. Once merged, your card will appear on the Dev Wall. +Click **"Create pull request"**. --- -## What happens after my PR is merged? +### 7. Done! 🎉 + +Your teacher will merge your PR. Once merged, your card appears on the website. -Your profile card will appear on the website automatically. The website reads the `students/` folder and renders every profile it finds. +Tell your teacher: **"I just made my first Pull Request!"** --- -## FAQ +## ❓ Problems? Read this -**Q: What if I made a mistake?** -Edit your `profile.json` file and push another commit. The Pull Request will update automatically. +**"I don't see my folder"** +→ You have to create it yourself in Step 3. -**Q: What if my folder already exists?** -Just open the existing `profile.json` file and edit it. Don't create a new folder. +**"I made a mistake"** +→ Edit your `profile.json` file. Commit again. Your PR will update automatically. -**Q: What if two students have the same name?** -That's why we use GitHub usernames as folder names. `rahul_dev` and `rahulk23` are different folders. +**"I don't know my GitHub username"** +→ Click your profile picture (top-right of GitHub). Your username is shown under your name. -**Q: What if my Pull Request has conflicts?** -Your teacher will help you resolve them. Don't worry about it. +**"I don't have a photo"** +→ That's fine! The website shows your initials instead. You can add a photo later. -**Q: Can I see the website before my PR is merged?** -Open `index.html` in your browser to preview locally. Or just wait for your teacher to merge it! +**"It says my JSON has an error"** +→ Check for: + - Missing commas between lines + - Extra comma at the end + - Missing quotes around text + - Copy-paste the template exactly and only change the values --- -## Project structure +## 🖼️ Adding a photo (optional, later) -``` -├── index.html ← The main web page -├── css/style.css ← The styles -├── js/config.js ← Repository settings (teacher edits this) -├── js/app.js ← Loads and displays student profiles -├── students/ ← Student folders go here -│ ├── rahul_dev/ -│ │ ├── profile.json -│ │ └── photo.jpg -│ └── janedoe/ -│ └── profile.json -├── README.md ← You're reading this -└── LICENSE -``` +1. Take a photo of yourself +2. Rename it to `photo.jpg` +3. Put it in your folder (`students/yourusername/photo.jpg`) +4. Change this line in your `profile.json`: + - Before: `"image": ""` + - After: `"image": "./photo.jpg"` +5. Commit and push + +Keep the photo small — under 500KB. + +--- + +## 🔍 Want to check your work? + +Before you submit your PR, you can open `index.html` in your browser to see if your card looks right. + +Just double-click the `index.html` file in your fork on GitHub, or clone your fork and open it locally. + +--- + +## 📁 What's in this project? + +You don't need to understand all of this. Just know: + +| File | What it does | Do you touch it? | +|------|-------------|-----------------| +| `index.html` | The web page | No | +| `css/style.css` | The colours and layout | No | +| `js/app.js` | Loads student cards | No | +| `students/` | **Your folder goes here** | **Yes!** | +| `README.md` | This file | No | --- -## Quick reference +**You only touch one thing: `students/yourusername/profile.json`** -| What you want to do | Where | -|---------------------|-------| -| Add your profile | `students/your-username/profile.json` | -| Add your photo | `students/your-username/photo.jpg` | -| Change your bio | Edit the `about` field in your `profile.json` | -| Change your tech | Edit the `favoriteTech` field | -| Fix a typo | Edit your `profile.json` and commit | +Everything else is already set up for you. --- -Built with ❤️ by the class. Happy coding! +Made with ❤️ by the class. From 2fd3ab0040446d127d760cea3545bbd3ee3d572c Mon Sep 17 00:00:00 2001 From: NewtonSchool Date: Thu, 20 Aug 2026 18:02:52 +0530 Subject: [PATCH 6/7] Add progress bar, certificate page, and share buttons - Class contribution progress bar showing X/90 students joined - Personalized first PR certificate page at /certificate.html?name=... - Trophy share button on each student card linking to certificate - Total students configurable in js/config.js Generated with Codebuff Co-Authored-By: Codebuff --- certificate.html | 321 +++++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 54 ++++++++ index.html | 13 ++ js/app.js | 22 +++- js/config.js | 3 + 5 files changed, 412 insertions(+), 1 deletion(-) create mode 100644 certificate.html diff --git a/certificate.html b/certificate.html new file mode 100644 index 0000000..6443c6f --- /dev/null +++ b/certificate.html @@ -0,0 +1,321 @@ + + + + + + First PR Certificate + + + + + + + +
+ +
+
+
🎓
+

Your First PR Certificate

+

Enter your name to generate your certificate

+
+ + +
+ +
+
+ + + +
+ +
Link copied to clipboard!
+ + + + diff --git a/css/style.css b/css/style.css index a078703..6ade7f0 100644 --- a/css/style.css +++ b/css/style.css @@ -188,6 +188,48 @@ code { background: var(--border); } +/* ======================================== + Contribution Progress + ======================================== */ + +.progress-section { + padding: 0 0 40px; +} + +.progress-header { + display: flex; + align-items: baseline; + justify-content: space-between; + margin-bottom: 8px; +} + +.progress-text { + font-size: 14px; + color: var(--text-secondary); +} + +.progress-count { + font-size: 14px; + font-weight: 600; + color: var(--accent); +} + +.progress-bar { + width: 100%; + height: 8px; + background: var(--border); + border-radius: 4px; + overflow: hidden; +} + +.progress-fill { + height: 100%; + background: var(--accent); + border-radius: 4px; + width: 0%; + transition: width 0.8s ease; +} + /* ======================================== Section Headings ======================================== */ @@ -394,6 +436,18 @@ code { height: 13px; } +.card-share { + font-size: 14px; + text-decoration: none; + opacity: 0.5; + transition: opacity 0.15s; +} + +.card-share:hover { + opacity: 1; + text-decoration: none; +} + /* ======================================== Empty / Loading States ======================================== */ diff --git a/index.html b/index.html index a934118..2d68a05 100644 --- a/index.html +++ b/index.html @@ -60,6 +60,19 @@

Everyone has to start somewhere.

+ +
+
+
+ Loading... + +
+
+
+
+
+
+
diff --git a/js/app.js b/js/app.js index 02a84af..0c3fb11 100644 --- a/js/app.js +++ b/js/app.js @@ -163,12 +163,16 @@ '↗'; } + var certUrl = "certificate.html?name=" + encodeURIComponent(student.name || "") + + (student.github ? "&github=" + encodeURIComponent(student.github) : ""); + var shareHtml = '\u{1F3C6}'; + card.innerHTML = photoHtml + '

' + escapeHtml(student.name || "Anonymous") + '

' + '
@' + escapeHtml(student.github || "unknown") + '
' + (student.about ? '

"' + escapeHtml(student.about) + '"

' : '

') + - '
' + techHtml + linkHtml + '
'; + '
' + techHtml + linkHtml + shareHtml + '
'; return card; } @@ -191,6 +195,22 @@ statStudents.textContent = students.length; statProfiles.textContent = students.length; statPrs.textContent = students.length; + + // Update progress bar + var total = CONFIG.totalStudents || 90; + var count = students.length; + var pct = Math.min(Math.round((count / total) * 100), 100); + var progressText = document.getElementById("progress-text"); + var progressCount = document.getElementById("progress-count"); + var progressFill = document.getElementById("progress-fill"); + if (progressText) progressText.textContent = "Class progress"; + if (progressCount) progressCount.textContent = count + " / " + total + " students"; + if (progressFill) { + // Animate after a short delay + setTimeout(function () { + progressFill.style.width = pct + "%"; + }, 100); + } } function buildTechFilter() { diff --git a/js/config.js b/js/config.js index a24b3a1..599fac3 100644 --- a/js/config.js +++ b/js/config.js @@ -16,6 +16,9 @@ var CONFIG = { // Branch to fetch from branch: "main", + // Total number of students in the class (for the progress bar) + totalStudents: 90, + // How many profiles to show (set to 0 for unlimited) limit: 0, From e7476b3aaf4d42f076ad2bdb77f6f4dac6c03da8 Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Thu, 20 Aug 2026 19:16:38 +0530 Subject: [PATCH 7/7] added code --- students/Prince/profile.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 students/Prince/profile.json diff --git a/students/Prince/profile.json b/students/Prince/profile.json new file mode 100644 index 0000000..4f04b76 --- /dev/null +++ b/students/Prince/profile.json @@ -0,0 +1,7 @@ +{ + "name": "Prince", + "github": "priince0", + "about": "Eager to learn.", + "favoriteTech": "JavaScript, ai", + "image": "n" +} \ No newline at end of file