| # Manoj Guttikonda — Portfolio |
|
|
| Personal portfolio website for **Manoj Guttikonda** — MS Business Analytics @ UNT, ex-Accenture Cloud Operations Engineer. |
|
|
| Live at: _[your deployed URL here]_ |
|
|
| --- |
|
|
| ## 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 | |
|
|
