{"id":50798374,"url":"https://github.com/ovpn-dev/portfolio","last_synced_at":"2026-06-12T16:35:15.611Z","repository":{"id":330812247,"uuid":"1123438666","full_name":"ovpn-dev/portfolio","owner":"ovpn-dev","description":null,"archived":false,"fork":false,"pushed_at":"2025-12-29T00:29:10.000Z","size":20281,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-30T15:10:55.326Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ovpn-dev.github.io/portfolio/","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/ovpn-dev.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-12-26T21:54:43.000Z","updated_at":"2025-12-29T00:29:14.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ovpn-dev/portfolio","commit_stats":null,"previous_names":["ovpn-dev/portfolio"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ovpn-dev/portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovpn-dev%2Fportfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovpn-dev%2Fportfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovpn-dev%2Fportfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovpn-dev%2Fportfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ovpn-dev","download_url":"https://codeload.github.com/ovpn-dev/portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovpn-dev%2Fportfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34253937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2026-06-12T16:35:14.908Z","updated_at":"2026-06-12T16:35:15.605Z","avatar_url":"https://github.com/ovpn-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Victor Obasi - Portfolio\n\nA modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS. Features dark mode, smooth animations, and automatic deployment to GitHub Pages.\n\n## ✨ Features\n\n- 🎨 **Dark/Light Mode** - Toggle between themes with persistent preference\n- 📱 **Fully Responsive** - Optimized for all screen sizes\n- 🚀 **Fast \u0026 Modern** - Built with Vite for lightning-fast development\n- 🎭 **Smooth Animations** - Subtle, professional animations throughout\n- 📊 **Solana Architecture Diagram** - Interactive SVG visualization\n- 📄 **Resume Integration** - Embedded PDF viewer with download option\n- 🔧 **TypeScript** - Full type safety\n- 🎯 **SEO Optimized** - Proper meta tags and semantic HTML\n- 🤖 **Auto Deploy** - GitHub Actions workflow for automatic deployment\n\n## 🚀 Quick Start\n\n### 1. Clone and Install\n\n```bash\n# Clone the repository\ngit clone https://github.com/YOUR_USERNAME/portfolio.git\ncd portfolio\n\n# Install dependencies\nnpm install\n```\n\n### 2. Customize Your Content\n\nEdit these files to add your information:\n\n**`src/data/projects.ts`** - Your projects\n```typescript\nexport const projects: Project[] = [\n  {\n    title: \"Your Project\",\n    description: \"Description here...\",\n    tech: [\"React\", \"TypeScript\"],\n    links: {\n      github: \"https://github.com/YOUR_USERNAME/project\",\n      live: \"https://yourproject.com\"\n    },\n    featured: true,\n  },\n];\n```\n\n**`src/data/skills.ts`** - Your skills\n```typescript\nexport const skills: Skill[] = [\n  {\n    category: \"Your Category\",\n    items: [\"Skill 1\", \"Skill 2\"],\n  },\n];\n```\n\n**`src/pages/Home.tsx`** - Update personal info\n- Your name and title\n- About section\n- Contact links (GitHub, LinkedIn, Email)\n\n**`public/resume.pdf`** - Add your resume PDF\n- Place your resume in the `public/` folder\n- Uncomment the iframe in `src/components/ResumeSection.tsx`\n\n### 3. Configure for GitHub Pages\n\n**`vite.config.ts`** - Update the base path:\n```typescript\nexport default defineConfig({\n  plugins: [react()],\n  base: \"/YOUR_REPO_NAME/\", // Change this to your repo name\n});\n```\n\n**`package.json`** - Add homepage:\n```json\n{\n  \"name\": \"portfolio\",\n  \"homepage\": \"https://YOUR_USERNAME.github.io/YOUR_REPO_NAME/\"\n}\n```\n\n### 4. Run Locally\n\n```bash\n# Development server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n\n## 🌐 Deploy to GitHub Pages\n\n### Option 1: Automatic Deployment (Recommended)\n\n1. Push your code to GitHub:\n```bash\ngit add .\ngit commit -m \"Initial commit\"\ngit branch -M main\ngit remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git\ngit push -u origin main\n```\n\n2. Enable GitHub Pages:\n   - Go to your repository on GitHub\n   - Navigate to **Settings** → **Pages**\n   - Under **Source**, select **GitHub Actions**\n\n3. The site will automatically deploy on every push to `main`!\n\n### Option 2: Manual Deployment\n\n```bash\n# Build the project\nnpm run build\n\n# The dist/ folder contains your static site\n# Upload this to any static hosting service\n```\n\n## 📁 Project Structure\n\n```\nportfolio/\n├── .github/\n│   └── workflows/\n│       └── deploy.yml          # Auto-deployment workflow\n├── public/\n│   └── resume.pdf              # Your resume (add this)\n├── src/\n│   ├── components/\n│   │   ├── Navbar.tsx          # Navigation with theme toggle\n│   │   ├── Section.tsx         # Reusable section wrapper\n│   │   ├── ProjectCard.tsx     # Project display card\n│   │   ├── SkillCard.tsx       # Skill category card\n│   │   ├── SolanaArchitecture.tsx  # SVG diagram\n│   │   └── ResumeSection.tsx   # Resume embed\n│   ├── contexts/\n│   │   └── ThemeContext.tsx    # Dark mode logic\n│   ├── data/\n│   │   ├── projects.ts         # Your projects data\n│   │   └── skills.ts           # Your skills data\n│   ├── pages/\n│   │   └── Home.tsx            # Main page\n│   ├── types/\n│   │   └── index.ts            # TypeScript types\n│   ├── App.tsx                 # Root component\n│   ├── main.tsx                # Entry point\n│   └── index.css               # Global styles\n├── index.html\n├── package.json\n├── tailwind.config.js\n├── tsconfig.json\n└── vite.config.ts\n```\n\n## 🎨 Customization Guide\n\n### Colors\n\nEdit `tailwind.config.js` to change the color scheme:\n```javascript\ntheme: {\n  extend: {\n    colors: {\n      primary: {\n        500: '#YOUR_COLOR',\n        // ... more shades\n      },\n    },\n  },\n}\n```\n\n### Animations\n\nAdd custom animations in `tailwind.config.js`:\n```javascript\nanimation: {\n  'your-animation': 'animationName 1s ease-in-out',\n},\nkeyframes: {\n  animationName: {\n    '0%': { /* ... */ },\n    '100%': { /* ... */ },\n  },\n}\n```\n\n### Fonts\n\nImport fonts in `src/index.css`:\n```css\n@import url('https://fonts.googleapis.com/css2?family=Your+Font\u0026display=swap');\n\nbody {\n  font-family: 'Your Font', sans-serif;\n}\n```\n\n## 🔧 Tech Stack\n\n- **React 18** - UI library\n- **TypeScript** - Type safety\n- **Vite** - Build tool\n- **Tailwind CSS** - Styling\n- **Lucide React** - Icons\n- **GitHub Pages** - Hosting\n- **GitHub Actions** - CI/CD\n\n## 📝 Adding New Sections\n\n1. Create a new component in `src/components/`\n2. Import and add it to `src/pages/Home.tsx`\n3. Update navigation links in `src/components/Navbar.tsx`\n\nExample:\n```tsx\n// src/components/Blog.tsx\nexport default function Blog() {\n  return (\n    \u003cSection title=\"Blog\" id=\"blog\"\u003e\n      {/* Your content */}\n    \u003c/Section\u003e\n  );\n}\n\n// Add to Home.tsx\nimport Blog from \"../components/Blog\";\n// ... then add \u003cBlog /\u003e in the JSX\n```\n\n## 🐛 Troubleshooting\n\n**Site not loading after deployment?**\n- Check that `base` in `vite.config.ts` matches your repo name\n- Verify GitHub Pages is enabled in repository settings\n- Check the Actions tab for deployment logs\n\n**Dark mode not working?**\n- Clear browser cache and localStorage\n- Check browser console for errors\n\n**Icons not showing?**\n- Ensure `lucide-react` is installed: `npm install lucide-react`\n\n## 📄 License\n\nMIT License - feel free to use this template for your own portfolio!\n\n## 🤝 Contributing\n\nFound a bug or have a suggestion? Feel free to open an issue or submit a pull request!\n\n---\n\nBuilt with ❤️ by Victor Obasi\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fovpn-dev%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fovpn-dev%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fovpn-dev%2Fportfolio/lists"}