{"id":49592503,"url":"https://github.com/siyabuilds/nextjs-portfolio","last_synced_at":"2026-05-04T01:38:54.351Z","repository":{"id":278202818,"uuid":"934797781","full_name":"siyabuilds/nextjs-portfolio","owner":"siyabuilds","description":"Interactive portfolio featuring custom terminal simulation, live code blocks with syntax highlighting, and smooth animations. Inspired by get.tech's modern aesthetic.","archived":false,"fork":false,"pushed_at":"2025-12-25T17:12:40.000Z","size":2534,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-04T01:38:49.245Z","etag":null,"topics":["framer-motion","nextjs","prism-react-renderer","tailwindcss"],"latest_commit_sha":null,"homepage":"https://siyabuilds.tech","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/siyabuilds.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-18T12:24:18.000Z","updated_at":"2026-01-29T12:08:34.000Z","dependencies_parsed_at":"2025-06-23T09:51:51.756Z","dependency_job_id":"55a79857-50f5-413b-a1a0-4025a181a09d","html_url":"https://github.com/siyabuilds/nextjs-portfolio","commit_stats":null,"previous_names":["markuptitan/nextjs-portfolio","siyabuilds/nextjs-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/siyabuilds/nextjs-portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyabuilds%2Fnextjs-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyabuilds%2Fnextjs-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyabuilds%2Fnextjs-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyabuilds%2Fnextjs-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siyabuilds","download_url":"https://codeload.github.com/siyabuilds/nextjs-portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyabuilds%2Fnextjs-portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32591603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"ssl_error","status_checked_at":"2026-05-03T22:09:10.534Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framer-motion","nextjs","prism-react-renderer","tailwindcss"],"created_at":"2026-05-04T01:38:53.760Z","updated_at":"2026-05-04T01:38:54.339Z","avatar_url":"https://github.com/siyabuilds.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Siyabuils' Next.js Portfolio 🚀\n\n_A modern, interactive portfolio that's way cooler than your average developer site_\n\n## What's Inside\n\nThis isn't just another portfolio—it's a showcase built with some seriously fun tech. Think animated typing effects, an AI chat buddy, daily quotes that actually matter, and GitHub repos that update themselves.\n\n**The Stack:**\n\n- Next.js 15 + React 19 (because we like building on the edge)\n- Framer Motion for buttery smooth animations\n- Tailwind CSS for styling that doesn't suck\n- MongoDB + OpenAI for the smart stuff\n- Vercel for deployment magic\n\n**The Cool Stuff:**\n\n- 🎨 Animations that'll make you go \"ooh\"\n- 🤖 AI assistant that knows way too much about me\n- 📅 Daily quotes with tech-savvy summaries\n- 🔗 Live GitHub integration (no manual updates needed!)\n- 📱 Works great on mobile too\n- ⚡ IDE vibes throughout\n\n## How It's Built\n\n```\nsrc/app/\n├── components/    # The fun, reusable stuff\n├── api/          # Backend magic (chat, quotes, GitHub)\n├── pages/        # Your destinations\n└── lib/          # The boring but necessary utilities\n```\n\n**Where to go:**\n\n- `/` - First impressions with animated intro\n- `/about` - My story + daily wisdom\n- `/projects` - The goods (with live GitHub data)\n- `/chat` - Talk to my AI assistant\n- `/contact` - Let's connect\n\n## The Star Components\n\n### Hero Section (`Hero.jsx`)\n\nLanding page that types itself into existence. Built with Typed.js and Framer Motion because static text is for quitters.\n\n### Projects Showcase (`ProjectsSection.jsx`)\n\nMy portfolio projects with smart filtering and live GitHub integration. No more \"oops, forgot to update this\" moments.\n\n**Project structure:**\n\n```javascript\n{\n  title: \"Cool Project\",\n  description: \"What it does\",\n  tech: [\"React\", \"Node.js\"],\n  status: \"Live\" | \"Building\" | \"Planning\",\n  demoUrl: \"https://...\",\n  codeUrl: \"https://github.com/...\"\n}\n```\n\n### AI Chat (`chat/page.js`)\n\nAn AI that knows everything about me (maybe too much). Conversations persist locally, so you won't lose your train of thought.\n\n**Chat features:**\n\n- Remembers what you talked about\n- Types like a human (with that satisfying delay)\n- Actually knows my portfolio inside and out\n- Only answers questions about this portfolio and me, no off-topic chats\n\n### Quote of the Day (`QuoteSection.jsx`)\n\nDaily motivation with AI-generated tech context. Because generic quotes are boring.\n\n### GitHub Integration (`GitHubRepos.jsx`)\n\nLive repo data straight from GitHub. Stats, languages, stars—all the good stuff, automatically updated.\n\n### The Supporting Cast\n\n**CodeBlock** - Syntax highlighting that doesn't hurt your eyes, plus one-click copying.\n\n**TerminalLoader** - Loading animations with a terminal feel.\n\n**Navbar** - Responsive navigation with mobile responsiveness.\n\n**Contact** - Forms that actually work (thanks Formspree!).\n\n## The API Magic\n\n### Chat with AI (`/api/chat`)\n\nPowers the portfolio assistant. Send a message, get back intelligent responses about my work, experience, and projects.\n\n```javascript\n// What you send\n{ message: \"Tell me about your projects\" }\n\n// What you get back\n{ message: \"Let me tell you about some cool stuff...\", timestamp: \"...\" }\n```\n\n### GitHub Live Data (`/api/github-repos`)\n\nPulls real repo data so the projects section never gets stale.\n\n### Daily Quotes (`/api/quote`)\n\nServes up motivational quotes with AI-generated tech context. Updates automatically every day at 5 AM UTC.\n\n## The Daily Quote System\n\nHere's how fresh motivation lands on the site every day:\n\n**The Flow:**\n\n1. GitHub Actions wakes up at 5 AM UTC\n2. Grabs a quote from API Ninjas (with fallbacks)\n3. OpenAI adds tech-savvy context\n4. Everything gets saved to MongoDB\n5. Visitors see relevant, daily inspiration\n\n**What gets stored:**\n\n```javascript\n{\n  date: \"2025-01-01\",\n  quote: \"First, solve the problem. Then, write the code.\",\n  author: \"John Johnson\",\n  \"ai-summary\": \"Perfect for DevOps workflows where you solve infrastructure issues before writing automation scripts...\"\n}\n```\n\nThe whole thing runs itself—no manual quote hunting required.\n\n## MongoDB Connection Strategy\n\n**TL;DR**: Different approaches for dev vs production to avoid headaches.\n\n**In Development:**\nUses a global instance to prevent Next.js hot reload from creating a million database connections. Your laptop will thank you.\n\n**In Production:**\nFresh connections for each serverless function because that's how Vercel likes it. MongoDB's built-in pooling handles the rest.\n\n```javascript\n// Dev: One connection to rule them all\nif (process.env.NODE_ENV === \"development\") {\n  if (!global._mongoClientPromise) {\n    client = new MongoClient(process.env.MONGO_URI);\n    global._mongoClientPromise = client.connect();\n  }\n  clientPromise = global._mongoClientPromise;\n}\n// Prod: Fresh connections for serverless\nelse {\n  client = new MongoClient(process.env.MONGO_URI);\n  clientPromise = client.connect();\n}\n```\n\n## Running \u0026 Deploying\n\n**Local Development:**\n\n```bash\nnpm run dev    # Start the magic\nnpm run build  # Make sure it works\nnpm run lint   # Keep the code clean\n```\n\n**Environment Variables You'll Need:**\n\n```bash\nMONGO_URI=           # Your MongoDB connection\nOPENAI_API_KEY=      # For the chat AI\nGH_API_TOKEN=        # GitHub repo data\nAPI_NINJA_KEY=       # Daily quotes\n```\n\n**Deployment:**\nHosted on Vercel at [siyabuilds.tech](https://siyabuilds.tech) with automatic deployments from the main branch. GitHub Actions handle the daily quote updates.\n\n**Key Dependencies:**\n\n- `framer-motion` - For smooth animations\n- `typed.js` - Typewriter effects\n- `mongodb` - Database connection\n- `openai` - AI chat functionality\n- And the usual suspects (Next.js, React, Tailwind)\n\n---\n\n_Built with ❤️ by [siyabuilds](https://github.com/siyabuilds). Questions? The AI chat knows everything, or you can reach out directly!_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiyabuilds%2Fnextjs-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiyabuilds%2Fnextjs-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiyabuilds%2Fnextjs-portfolio/lists"}