|
1 | 1 | <div align="center"> |
2 | 2 | <img src="./frontend/public/images/favicon.avif" alt="Saqib Bedar" width="200" /> |
3 | | - <h1>Saqib Bedar</h1> |
4 | | - <p>Computer Science Student | Full Stack Developer | Open Source Builder | Tech Educator </p> |
| 3 | + <h1>Developer Portfolio Template (Vite + React)</h1> |
| 4 | + <p>Content-driven, SEO-friendly portfolio starter with a contact API (Express + Nodemailer)</p> |
5 | 5 | </div> |
6 | 6 |
|
7 | 7 | <p align="center"> |
8 | 8 | <a href="https://saqibbedar.github.io"> |
9 | | - <img src="https://img.shields.io/badge/Live%20Site-Portfolio-111827?style=flat&labelColor=111827" alt="Live Site" /> |
| 9 | + <img src="https://img.shields.io/badge/Live%20Demo-GitHub%20Pages-111827?style=flat&labelColor=111827" alt="Live Demo" /> |
10 | 10 | </a> |
11 | 11 | <a href="https://github.com/saqibbedar/saqibbedar.github.io"> |
12 | 12 | <img src="https://img.shields.io/github/stars/saqibbedar/saqibbedar.github.io?style=flat&color=f5b301&label=Stars" alt="GitHub Stars" /> |
|
19 | 19 | </a> |
20 | 20 | <img src="https://img.shields.io/github/last-commit/saqibbedar/saqibbedar.github.io?style=flat&color=6366f1" alt="Last Commit" /> |
21 | 21 | <img src="https://img.shields.io/badge/Frontend-Vite%20%2B%20React-1f2937?style=flat" alt="Frontend Stack" /> |
| 22 | + <img src="https://img.shields.io/badge/Styling-Tailwind%20CSS-1f2937?style=flat" alt="Tailwind CSS" /> |
22 | 23 | <img src="https://img.shields.io/badge/Backend-Express%20%2B%20Nodemailer-1f2937?style=flat" alt="Backend Stack" /> |
23 | 24 | </p> |
24 | 25 |
|
25 | | -# Saqib Bedar's Developer Portfolio |
| 26 | +--- |
26 | 27 |
|
27 | | -This repository powers my personal portfolio website [`(Live Demo)`](https://saqibbedar.github.io). It is a clean, content-driven portfolio built to showcase who I am, what I build, what I teach, and how I like to work. |
| 28 | +## About |
28 | 29 |
|
29 | | -It is designed to stay simple for editing and strong in structure. Most site content lives in JSON files and lightweight asset modules, so updates are quick and the code remains easy to maintain. |
| 30 | +This repository powers my personal website, but it is also intentionally built as a **reusable, open-source portfolio template**. |
30 | 31 |
|
31 | | -## What This Project Contains |
| 32 | +It’s **content-driven**: most updates can be done by editing **JSON + Markdown** files (projects, blogs, FAQs, services, sitemap, documents), without changing core UI logic. |
32 | 33 |
|
33 | | -The portfolio is split into two parts: |
| 34 | +### Tech Stack |
| 35 | +- **Frontend:** Vite + React + React Router + Tailwind CSS |
| 36 | +- **Backend:** Express + Nodemailer (contact form API) |
| 37 | +- **Content:** JSON + Markdown |
| 38 | +- **Deploy:** GitHub Pages (frontend) + Vercel (backend) |
34 | 39 |
|
35 | | -- `frontend/` - a Vite + React application that renders the public portfolio |
36 | | -- `backend/` - a small Express + Nodemailer mail service used by the contact form |
| 40 | +--- |
37 | 41 |
|
38 | | -The site also includes: |
| 42 | +## Features |
39 | 43 |
|
40 | | -- project and blog content |
41 | | -- FAQs about me |
42 | | -- certifications and education |
43 | | -- bootcamps and speaking history |
44 | | -- services I offer |
45 | | -- sitemap and utility pages |
46 | | -- markdown-based legal docs |
| 44 | +- Content-driven portfolio (edit JSON/Markdown to update the site) |
| 45 | +- Projects, blogs, courses, FAQs, services pages |
| 46 | +- Built-in search + structured views |
| 47 | +- SEO utilities (sitemap + metadata modules) |
| 48 | +- Contact form backed by Express API (Nodemailer) |
| 49 | +- Designed for easy customization and maintenance |
| 50 | + |
| 51 | +--- |
| 52 | + |
| 53 | +## Use this template (fast setup) |
| 54 | + |
| 55 | +> **Template users (important):** this repo includes a Google Search Console verification file in the root: |
| 56 | +> `google90204ddbeb9f3cf5.html` |
| 57 | +> If you deploy your own copy, **remove it** or **replace it with your own verification file**, otherwise it will verify the site for the original owner instead of you. |
| 58 | +
|
| 59 | +### 1) Create your own copy |
| 60 | +- Click **Use this template** (recommended), or fork the repo. |
| 61 | +- Rename it to: `<your-username>.github.io` (for GitHub Pages user site) |
| 62 | + |
| 63 | +### 2) Customize content (no heavy coding) |
| 64 | +Start here: |
| 65 | +- `frontend/public/data/json/` (projects, blogs, courses, FAQs, services, sitemap, etc.) |
| 66 | +- `frontend/public/data/blogs/` (Markdown blog posts) |
| 67 | +- `frontend/public/data/docs/` (Markdown legal/docs) |
| 68 | +- `frontend/src/assets/common/author.js` (your profile) |
| 69 | +- `frontend/src/assets/common/skills.js` (skills list) |
| 70 | +- `frontend/src/assets/common/footer.js` (footer/social links) |
| 71 | + |
| 72 | +### 3) Run locally |
| 73 | +Follow the **Quick Start** section below to run frontend + backend locally. |
| 74 | + |
| 75 | +### 4) Deploy |
| 76 | +- Frontend → **GitHub Pages** |
| 77 | +- Backend → **Vercel** |
| 78 | +Then set environment variables exactly as documented below. |
| 79 | + |
| 80 | +--- |
47 | 81 |
|
48 | 82 | ## Quick Start |
49 | 83 |
|
|
0 commit comments