README.md

metadata

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

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:

{
  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

# 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
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:

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

Then:

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