diff --git a/abid b/abid new file mode 100644 index 0000000..3409f4e --- /dev/null +++ b/abid @@ -0,0 +1,387 @@ +/* +README (short): + +This is a single-file React + Tailwind portfolio template intended to be dropped into a standard React app (Create React App, Vite, Next.js page, etc.). + +How to use: +1. Create a React app (Vite or CRA) and install Tailwind CSS following the official Tailwind docs: https://tailwindcss.com/docs/guides. +2. Place this file as `src/App.jsx` (or as a page component in Next.js) and import in your entry point. +3. Replace the sample data in the `projects` and `profile` objects with your real content (text, images, links). +4. Run the dev server and edit freely. The component uses Tailwind utility classes and no external packages. + +What this file contains: +- A responsive single-page portfolio layout +- Hero, About, Skills, Projects, Experience, Contact, Footer +- Dark mode toggle (client-side only) +- JSON-like data block at top for easy editing + +Notes for customization: +- Swap images by placing them in `public/` and referencing `/your-image.png` in the `projects` data. +- To add pages or a blog, convert sections into routes (React Router or Next.js pages). + +*/ + +import React, { useState } from "react"; + +// ----------------------------- +// EDITABLE DATA +// ----------------------------- +const profile = { + name: "Your Name", + title: "Full-Stack Developer & Problem Solver", + location: "City, Country", + email: "youremail@example.com", + github: "https://github.com/yourusername", + linkedin: "https://www.linkedin.com/in/yourusername/", + about: `I build fast, accessible, and delightful web applications. I enjoy solving hard problems, clean architecture, and mentoring others. Open to freelance and full-time opportunities.`, +}; + +const skills = [ + "JavaScript (ES6+)", + "React / Next.js", + "Node.js / Express", + "TypeScript", + "Tailwind CSS", + "Docker", + "Postgres / MongoDB", + "Testing (Jest, React Testing Library)", +]; + +const projects = [ + { + id: 1, + title: "Project One", + description: + "A short description describing what this project does, the tech used, and the impact.", + tech: ["React", "Node", "Postgres"], + github: "https://github.com/yourusername/project-one", + demo: "https://project-one.example.com", + image: "/project-1.png", // put a screenshot in public/ + }, + { + id: 2, + title: "Project Two", + description: + "A short description that highlights the problem you solved and a standout technical decision.", + tech: ["Next.js", "Vercel"], + github: "https://github.com/yourusername/project-two", + demo: "https://project-two.example.com", + image: "/project-2.png", + }, + { + id: 3, + title: "Algorithms & Challenges", + description: + "Collection of algorithm solutions and performance-focused challenges (C++, Python).", + tech: ["C++", "Python"], + github: "https://github.com/yourusername/algorithms", + demo: "", + image: "/project-3.png", + }, +]; + +// ----------------------------- +// SMALL UI HELPERS +// ----------------------------- +function IconExternal() { + return ( + + + + + ); +} + +function Tag({ children }) { + return ( + + {children} + + ); +} + +// ----------------------------- +// MAIN APP +// ----------------------------- +export default function App() { + const [dark, setDark] = useState(true); + const [filter, setFilter] = useState("All"); + + const techSet = ["All", ...Array.from(new Set(projects.flatMap((p) => p.tech)))]; + + const visibleProjects = projects.filter((p) => { + if (filter === "All") return true; + return p.tech.includes(filter); + }); + + return ( +
+
+
+ +
+ + +
+
+ + + +
+ + +
+
+ +
+
+ ); +} + +// ----------------------------- +// COMPONENTS +// ----------------------------- +function Header({ dark, setDark, profile }) { + return ( +
+
+

{profile.name}

+

{profile.title}

+
+ +
+ GitHub + LinkedIn + + +
+
+ ); +} + +function Hero({ profile }) { + return ( +
+
+
+

Hi, I’m {profile.name}.

+

{profile.title} — based in {profile.location}.

+ +

{profile.about}

+ +
+ + View GitHub + + + + Contact Me + +
+
+ +
+
+
+ {profile.name.split(" ").map((n) => n[0]).slice(0,2).join("")} +
+
{profile.title}
+
+
+
+
+ ); +} + +function Projects({ projects, techSet, filter, setFilter }) { + return ( +
+
+

Projects

+ +
+ + +
+
+ +
+ {projects.map((p) => ( +
+
+
+

{p.title}

+

{p.description}

+ +
+ {p.tech.map((t) => ( + {t} + ))} +
+ +
+ {p.demo && ( + Live demo + )} + + {p.github && ( + Source + )} +
+
+ +
+ {/* Replace with an if you add screenshots to public/ */} + Screenshot +
+
+
+ ))} +
+
+ ); +} + +function Skills({ skills }) { + return ( +
+

Skills

+
+ {skills.map((s) => ( + {s} + ))} +
+
+ ); +} + +function About({ about }) { + return ( +
+

About

+

{about}

+
+ ); +} + +function Experience() { + // Minimal placeholder — replace with your jobs, internships or education + const items = [ + { + role: "Software Engineer Intern", + company: "Startup X", + period: "Jun 2023 - Sep 2023", + bullets: ["Built a dashboard with React and Charting library.", "Improved API performance by 30%."] + }, + { + role: "Teaching Assistant", + company: "CS Dept", + period: "2022 - 2024", + bullets: ["Led weekly labs for data structures and algorithms."] + }, + ]; + + return ( +
+

Experience

+
+ {items.map((it, idx) => ( +
+
+
+

{it.role}

+

{it.company}

+
+
{it.period}
+
+
    + {it.bullets.map((b, i) => ( +
  • {b}
    • + ))} +
+
+ ))} +
+
+ ); +} + +function Contact({ profile }) { + return ( +
+

Contact

+

Email: {profile.email}

+

Location: {profile.location}

+ +
{ e.preventDefault(); window.location.href = `mailto:${profile.email}`; }}> + + +