---
title: Manoj Guttikonda Portfolio
colorFrom: blue
colorTo: indigo
sdk: docker
pinned: false
---

# Manoj Guttikonda - Portfolio

Personal portfolio website for **Manoj Guttikonda** - MS Business Analytics @ UNT, ex-Accenture Cloud Operations Engineer.

Live at: https://mrnoone07-portfolio.hf.space

---
## Tech Stack

| Layer | Technology |
|---|---|
| Framework | React 19 + TanStack Start (SSR) |
| Routing | TanStack Router |
| Styling | Tailwind CSS v4 |
| Animations | Framer Motion |
| Icons | Lucide React |
| UI Components | shadcn/ui (Radix UI) |
| Font (body) | Carlito (Calibri-equivalent, Google Fonts) |
| Font (display) | Bebas Neue (Google Fonts) |
| Package manager | Bun |
| Build tool | Vite + Nitro |

---

## Project Structure

```
src/
├── assets/
│   └── manoj.jpg                  # Profile photo
├── components/
│   ├── portfolio/                 # All portfolio section components
│   │   ├── Nav.tsx                # Navigation bar (desktop + mobile)
│   │   ├── Hero.tsx               # Hero section (name, photo, intro)
│   │   ├── Timeline.tsx           # Career journey (undergrad → Accenture → UNT)
│   │   ├── Projects.tsx           # Featured projects + research publications
│   │   ├── Skills.tsx             # Skills toolkit (4 categories)
│   │   ├── Education.tsx          # Education + internships
│   │   ├── Credentials.tsx        # Certifications, honors, campus experience
│   │   ├── About.tsx              # About section
│   │   └── Contact.tsx            # Contact section
│   └── ui/                        # shadcn/ui base components (do not edit)
├── hooks/
│   └── use-mobile.tsx             # Mobile breakpoint hook
├── lib/
│   ├── links.ts                   # All URLs (email, resume, GitHub, LinkedIn, HF)
│   ├── error-capture.ts           # Error capture utility
│   ├── error-page.ts              # SSR error page renderer
│   ├── lovable-error-reporting.ts # Error reporting (Lovable platform)
│   └── utils.ts                   # Tailwind class merge utility
├── routes/
│   ├── __root.tsx                 # Root layout + global head meta
│   └── index.tsx                  # Home page (assembles all sections)
├── router.tsx                     # TanStack Router setup
├── server.ts                      # SSR server entry
├── start.ts                       # App start entry
└── styles.css                     # Global CSS + Tailwind theme + custom fonts
public/
└── favicon.svg                    # MG favicon (navy + orange)
```

---

## Customising Content

All personalisation lives in just a few files:

### 1. Links & URLs — `src/lib/links.ts`
```ts
export const CONTACT_EMAIL = "your@email.com";
export const RESUME_URL    = "https://...";
export const LINKEDIN_URL  = "https://linkedin.com/in/yourhandle";
export const GITHUB_URL    = "https://github.com/yourhandle";
export const HUGGING_FACE_URL = "https://huggingface.co/yourhandle";
```

### 2. Photo — `src/assets/manoj.jpg`
Replace with your own photo. Keep the filename or update the import in `Hero.tsx`.

### 3. Hero section — `src/components/portfolio/Hero.tsx`
- Name, tagline, bio paragraphs
- Role badges
- Metric strip (GPA, months of experience, etc.)

### 4. Projects — `src/components/portfolio/Projects.tsx`
Each project is an object in the `projects` array:
```ts
{
  id: "unique-id",
  era: "UNT - Graduate" | "Accenture" | "Undergrad" | "Independent",
  title: "Project Title",
  tagline: "One-line description.",
  period: "Jan 2025 - May 2025",
  details: ["bullet 1", "bullet 2", "bullet 3"],
  stack: ["Python", "AI"],
  links: [{ label: "View Code", href: "https://github.com/..." }],
}
```

### 5. Skills — `src/components/portfolio/Skills.tsx`
Edit the `groups` array to add/remove skills.

### 6. Timeline — `src/components/portfolio/Timeline.tsx`
Edit the `items` array for career milestones.

### 7. Education — `src/components/portfolio/Education.tsx`
Edit `edu` and `internships` arrays.

### 8. Credentials — `src/components/portfolio/Credentials.tsx`
Edit `certs`, `honors`, `leadership`, and `campusExperience` arrays.

### 9. Global styles — `src/styles.css`
- `html { font-size: 19px; }` — base font scale
- `--font-sans` — body font
- `--font-display` — heading font (Bebas Neue)
- Color tokens: `--navy`, `--accent`, `--chakra`

### 10. SEO meta — `src/routes/index.tsx`
Update `pageTitle` and `pageDescription` constants.

---

## Local Development

```bash
# Install dependencies
bun install

# Start dev server
bun run dev
# Open http://localhost:5173
```

---

## Deployment — HuggingFace Spaces

### Option A: Docker Space (Recommended)

1. Create a new Space on [huggingface.co/spaces](https://huggingface.co/spaces)
2. Choose **Docker** as the Space SDK
3. Clone the Space repo and copy this project into it
4. Add the `Dockerfile` (included in this repo) at the root
5. Push — HuggingFace builds and deploys automatically

The `Dockerfile` installs Bun, builds the app, and serves it on port **7860**.

### Option B: Static Build

If you want a pure static output (no server), change `vite.config.ts`:

```ts
export default defineConfig({
  tanstackStart: {
    server: { entry: "server" },
    nitro: { preset: "static" },   // add this line
  },
});
```

Then:
```bash
bun run build
# Upload contents of .output/public/ to a Static Space or any static host
```

---

## Deployment — Other Platforms

| Platform | How |
|---|---|
| Vercel | Connect GitHub repo, auto-detected as Vite project |
| Netlify | `bun run build`, publish `.output/public/` |
| Cloudflare Pages | Default build target is already `cloudflare` |

---

## LinkedIn Profile Update

Add the following to your LinkedIn:

- **Portfolio URL** in the intro/contact section: your deployed URL
- **Featured section**: screenshot of the portfolio homepage, link to live site
- **About section**: mirror the hero bio text
- **Skills section**: pull from `Skills.tsx` groups
- **Projects section**: add each project from `Projects.tsx` with GitHub links

---

## OG Image (Social Share Preview)

Add a `1200 × 630 px` image named `og.jpg` to the `/public` folder.
When someone shares your portfolio link on LinkedIn or Twitter, this image shows as the preview thumbnail.

---

## Current Portfolio Details

| Item | Value |
|---|---|
| Name | Manoj Guttikonda |
| Email | guttikondamanoj7@gmail.com |
| LinkedIn | linkedin.com/in/manojguttikonda |
| GitHub | github.com/im-mj |
| HuggingFace | huggingface.co/MrNoOne07 |
| Degree | MS Business Analytics, UNT (Aug 2024 – May 2026), GPA 3.8 |
| Experience | Cloud Ops Engineer @ Accenture, Oct 2021 – Jun 2024 (33 months) |
| Certifications | AZ-104, AZ-500, Azure Fundamentals, Palo Alto, VMware, AWS |
| Research | AI-Driven Malicious URL Detection — BIGS 2025 & SWDSI 2026 |