self-portfolio

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 9 Open GitHub ↗

A minimal, responsive developer portfolio built with Next.js 15, Tailwind CSS, and TypeScript. Designed for speed and simplicity.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Portfolio — Sampath Gujarathi

[![License](https://img.shields.io/github/license/gujarathisampath/portfolio?style=flat-square)](https://raw.githubusercontent.com/gujarathisampath/self-portfolio/master/LICENSE)
[![Next.js](https://img.shields.io/badge/Next.js-15-black?style=flat-square&logo=next.js)](https://nextjs.org)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org)

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:** [portfolio-cw1n.vercel.app](https://portfolio-cw1n.vercel.app/)

---

## ✨ 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](https://nextjs.org)
- [React](https://react.dev)
- [Tailwind CSS](https://tailwindcss.com)
- [Shadcn UI](https://ui.shadcn.com)
- [Lucide React](https://lucide.dev)
- [next-themes](https://github.com/pacocoursey/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                         |

```tsx
<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.

```tsx
<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             |

```tsx
<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

```bash
# 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](http://localhost:3000) in your browser.

---

## 🎨 Customisation

All content is managed inside `app/page.tsx`.

### 1. Personal Info (Hero)

```tsx
<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](LICENSE).

self-portfolio

Today's picks

Was this content helpful?

Recent Feedback

self-portfolio

Today's picks

Was this content helpful?

Recent Feedback

Download README