{"id":25252881,"url":"https://github.com/sunthecoder/portfolio-site","last_synced_at":"2026-04-07T18:31:50.545Z","repository":{"id":274656117,"uuid":"923612414","full_name":"SunTheCoder/portfolio-site","owner":"SunTheCoder","description":"A full stack interactive portfolio website built with TypeScript, Next.js and React. Features include an interactive map powered by Leaflet, project showcase and contact with Vercel KV/Redis integration, GitHub activity feed, tech stack visualization, and a responsive design using Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-03-07T16:39:02.000Z","size":18060,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T22:17:02.269Z","etag":null,"topics":["eslint","javascript","leaflet","react","reactleaflet","redis","tailwindcss","typescript","vercel","vercelkv"],"latest_commit_sha":null,"homepage":"https://www.sunthecoder.com","language":"TypeScript","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/SunTheCoder.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}},"created_at":"2025-01-28T15:04:58.000Z","updated_at":"2025-03-07T16:39:05.000Z","dependencies_parsed_at":"2025-01-28T16:34:11.354Z","dependency_job_id":"ba58f603-dda1-4f3d-9257-e0f1bdbda228","html_url":"https://github.com/SunTheCoder/portfolio-site","commit_stats":null,"previous_names":["sunthecoder/portfolio-site"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SunTheCoder%2Fportfolio-site","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SunTheCoder%2Fportfolio-site/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SunTheCoder%2Fportfolio-site/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SunTheCoder%2Fportfolio-site/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SunTheCoder","download_url":"https://codeload.github.com/SunTheCoder/portfolio-site/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406103,"owners_count":20933806,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["eslint","javascript","leaflet","react","reactleaflet","redis","tailwindcss","typescript","vercel","vercelkv"],"created_at":"2025-02-12T04:19:07.858Z","updated_at":"2025-12-30T19:17:51.600Z","avatar_url":"https://github.com/SunTheCoder.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Portfolio Site\n\nA modern, interactive portfolio website built with Next.js and React. Features include an interactive map powered by Leaflet, project showcase with Vercel KV integration, GitHub activity feed, tech stack visualization, and a responsive design using Tailwind CSS.\n\n## Table of Contents\n- [Overview](#overview)\n- [Tech Stack](#tech-stack)\n- [Features](#features)\n  - [Core Features](#core-features)\n  - [Interactive Elements](#interactive-elements)\n  - [Accessibility Features](#accessibility-features)\n  - [Best Practices](#best-practices)\n- [Getting Started](#getting-started)\n- [Deployment](#deployment)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Overview\n\nA portfolio with RPG-style achievements, interactive maps, and real-time GitHub integrations, designed to showcase both projects and personality.\n\n## Tech Stack\n- **Framework:** Next.js 14.1.0\n- **Frontend:** React 18, TypeScript\n- **Styling:** Tailwind CSS\n- **Database:** Vercel KV (Redis)\n- **Map Integration:** React Leaflet, Leaflet.js\n- **Authentication:** Custom admin authentication\n- **Deployment:** Vercel\n- **Animation:** Framer Motion\n- **Email:** Nodemailer\n\n## Features\n\n### Core Features\n- Interactive map showing location and impact points\n- Project showcase with images and descriptions\n- Real-time GitHub activity feed\n- Tech stack visualization with hover effects\n- Contact form with email notifications\n- Protected admin dashboard\n- Responsive design for all devices\n- Dark mode support\n\n### Interactive Elements\n- RPG-style experience system with achievements\n- Battle status card with GitHub stats\n- Collapsible user interface elements\n- Animated tooltips and modals\n- Interactive timeline with expandable sections\n\n### Accessibility Features\n- Full keyboard navigation support\n- ARIA labels and roles throughout\n- Focus management for modals and tooltips\n- Screen reader friendly content structure\n- Semantic HTML elements\n- Clear focus indicators\n- Proper heading hierarchy\n- Alt text for images\n- Color contrast compliance\n- Skip navigation links\n- Accessible form labels\n- Keyboard-accessible tooltips\n- Mobile-friendly touch targets\n\n### Best Practices\n- Progressive enhancement\n- Responsive images\n- Error boundaries\n- Loading states\n- Form validation\n- Type safety with TypeScript\n- Code splitting\n- SEO optimization\n- Performance optimization\n- Security best practices\n- Clean code architecture\n- Component reusability\n- State management patterns\n- Proper error handling\n\n## Getting Started\n\n### Prerequisites\n- Node.js \u003e= 18.x\n- npm or yarn\n- Vercel account (for deployment)\n\n### Installation\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/your-username/portfolio-site.git\n   cd portfolio-site\n   ```\n\n2. **Install dependencies:**\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Set up environment variables:**\n   Create a `.env.local` file:\n   ```bash\n   NEXT_PUBLIC_API_KEY=your_api_key\n   VERCEL_KV_REST_API_URL=your_kv_url\n   EMAIL_USER=your_email@example.com\n   EMAIL_PASS=your_password\n   ```\n\n4. **Run the development server:**\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n5. **Open** [http://localhost:3000](http://localhost:3000) **in your browser.**\n\n## Deployment\n\nThis project is deployed on [Vercel](https://vercel.com/).\n\n### Deploy Steps:\n1. Push your code to GitHub.\n2. Import the project into Vercel.\n3. Configure environment variables in the Vercel dashboard.\n4. Click \"Deploy.\"\n\nAlternatively, deploy via CLI:\n```bash\nvercel deploy\n```\n\n## Contributing\n\nContributions are welcome!\n\n1. Fork the repository\n2. Create a new branch:\n   ```bash\n   git checkout -b feature-branch\n   ```\n3. Commit changes:\n   ```bash\n   git commit -m 'Add new feature'\n   ```\n4. Push to the branch:\n   ```bash\n   git push origin feature-branch\n   ```\n5. Open a pull request\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n## Visuals\n\n![Portfolio Screenshot](https://github.com/SunTheCoder/portfolio-site/blob/main/public/projects/portfolio-site.png?raw=true)\n\n[![Vercel](https://vercelbadge.vercel.app/api/sunthecoder/portfolio-site)](https://sunthecoder.com/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunthecoder%2Fportfolio-site","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsunthecoder%2Fportfolio-site","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunthecoder%2Fportfolio-site/lists"}