Portfolio — Sampath Gujarathi

A clean, responsive developer portfolio built with Next.js 15, Tailwind CSS, and TypeScript. All content lives in a single page with no CMS or external data source required.

🔗 Live: gujarathisampath.github.io/portfolio (update if different)

---

✨ Features

• Next.js 15 App Router — file-based routing and server components out of the box
• Dark / Light Mode — theme toggle powered by next-themes
• Responsive Layout — optimised for mobile, tablet, and desktop
• Type-Safe — full TypeScript support throughout
• Shadcn UI — accessible, composable component primitives
• Contact Form — client-side form with loading & success states
• Collapsible Tech Stack — projects show/hide their technology list

---

🗂️ Sections

Section	Description
Hero	Profile picture, banner, name, tagline, and social links
About	Short personal bio
Work Experience	Employment history using WorkCard
Education	Academic background using EducationCard (with grade)
Projects	Project showcase using ProjectCard (with collapsible tech stack)
Skills	Flat list of technologies and tools
Contact	Two-column contact form with email, LinkedIn, and GitHub links

---

🛠️ Built With

• Next.js 15
• React
• Tailwind CSS
• Shadcn UI
• Lucide React
• next-themes

---

🧩 Components

WorkCard

Displays a single work experience entry.

Prop	Type	Required	Description
title	string	✅	Job title (e.g., "Software Engineer")
company	string	✅	Company name
type	string	✅	Employment type / location (e.g., "Remote", "Hybrid")
startDate	string	✅	Start year / date (e.g., "2024")
endDate	string	✅	End year / date (e.g., "Present")
description	string	✅	Brief summary of responsibilities

<WorkCard
  title="Software Engineer"
  company="AspireDev"
  type="Remote"
  startDate="2024"
  endDate="Present"
  description="Working with a group of developers to build next-generation applications."
/>

---

EducationCard

Displays a single education entry with an optional grade.

Prop	Type	Required	Description
degree	string	✅	Degree name (e.g., "Bachelor of Technology")
branch	string	✅	Field of study (e.g., "Computer Science and Engineering")
institution	string	✅	Institution name
startDate	string	✅	Start year
endDate	string	✅	End year or "Present"
grade	string	➖	CGPA (for B.Tech) or percentage (for others)

The component automatically labels the grade as CGPA for "Bachelor of Technology" and Percentage for all other degrees.

<EducationCard
  degree="Bachelor of Technology"
  branch="Computer Science and Engineering"
  institution="Malla Reddy College Of Engineering and Technology"
  startDate="2024"
  endDate="Present"
  grade="9.58"
/>

---

ProjectCard

Showcases a project with an optional link and collapsible tech stack.

Prop	Type	Required	Description
title	string	✅	Project name
description	string	✅	Short project summary
link	string	➖	URL to the live project or repository
techStack	string[]	➖	List of technologies used

<ProjectCard
  title="Aspire Mail"
  description="A modern, self-hosted webmail client built as a clean alternative to Roundcube."
  link="https://github.com/gujarathisampath/aspire-mail"
  techStack={["Next.js", "Tailwind CSS", "TypeScript"]}
/>

---

ContactForm

A two-column contact section with:

• Left panel — tagline, description, and direct contact links (email, LinkedIn, GitHub)
• Right panel — form with Name, Email, Subject, and Message fields

No backend required — the form currently simulates a send after 1.8 s. To wire it up to a real service (e.g. Resend, Formspree), edit the handleSubmit function in components/ContactForm.tsx.

---

🚀 Quick Start

# Clone the repository
git clone https://github.com/gujarathisampath/portfolio.git
cd portfolio

# Install dependencies (uses Bun)
bun install

# Start the dev server
bun run dev

Open http://localhost:3000 in your browser.

---

🎨 Customisation

All content is managed inside app/page.tsx.

1. Personal Info (Hero)

<h1 className="text-2xl font-bold">Your Name</h1>
<p className="text-muted-foreground">Your tagline here.</p>

• Profile picture → replace /public/profile.png
• Banner image → replace /public/banner.png
• Social links → update the href values on the <Link> components (LinkedIn, GitHub, Resume)

2. About

Edit the <p> tag inside the About section.

3. Work Experience

Add or remove <WorkCard /> components in the Work Experience section.

4. Education

Add or remove <EducationCard /> components in the Education section.

5. Projects

Add or remove <ProjectCard /> components in the Projects section (renders in a 2-column grid on desktop).

6. Skills

Add or remove <Button variant="secondary" size="sm"> tags inside the Skills section.

7. Contact

Update the SOCIAL_LINKS array at the top of components/ContactForm.tsx to point to your own email and social profiles.

---

📁 Project Structure

portfolio/
├── app/
│   ├── layout.tsx        # Root layout (fonts, theme provider, metadata)
│   └── page.tsx          # Main page — all sections live here
├── components/
│   ├── ContactForm.tsx   # Contact section with form
│   ├── EducationCard.tsx # Education entry card
│   ├── ProjectCard.tsx   # Project showcase card
│   ├── WorkCard.tsx      # Work experience card
│   ├── theme-provider.tsx
│   └── ui/               # Shadcn UI primitives
├── public/
│   ├── profile.png       # Profile photo
│   └── banner.png        # Banner image
└── lib/
    └── utils.ts

---

📄 License

This project is open source and available under the MIT License.