{"id":46564270,"url":"https://github.com/imnexerio/portfolio","last_synced_at":"2026-03-07T06:33:54.329Z","repository":{"id":294292144,"uuid":"967422704","full_name":"imnexerio/portfolio","owner":"imnexerio","description":"This is a Portfolio website which populates it content from GitHub.","archived":false,"fork":false,"pushed_at":"2026-02-01T13:52:09.000Z","size":3776,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-01T23:27:17.608Z","etag":null,"topics":["automation","github","imnexerio","portfolio-website","protfolio"],"latest_commit_sha":null,"homepage":"https://imnexerio.github.io/portfolio/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imnexerio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-04-16T12:37:54.000Z","updated_at":"2026-02-01T13:52:12.000Z","dependencies_parsed_at":"2025-05-19T19:42:58.133Z","dependency_job_id":"d39cf53a-b44c-4e5b-a0b5-e4488b195b81","html_url":"https://github.com/imnexerio/portfolio","commit_stats":null,"previous_names":["imnexerio/portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/imnexerio/portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imnexerio%2Fportfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imnexerio%2Fportfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imnexerio%2Fportfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imnexerio%2Fportfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imnexerio","download_url":"https://codeload.github.com/imnexerio/portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imnexerio%2Fportfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30209099,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T05:23:27.321Z","status":"ssl_error","status_checked_at":"2026-03-07T05:00:17.256Z","response_time":53,"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":["automation","github","imnexerio","portfolio-website","protfolio"],"created_at":"2026-03-07T06:33:54.202Z","updated_at":"2026-03-07T06:33:54.315Z","avatar_url":"https://github.com/imnexerio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌟 Modern GitHub Portfolio Website\n\n\u003cdiv align=\"center\"\u003e\n  \n![GitHub Portfolio](https://img.shields.io/badge/Portfolio-GitHub-blue?style=for-the-badge\u0026logo=github)\n![Version](https://img.shields.io/badge/Version-1.1-green?style=for-the-badge)\n![License](https://img.shields.io/badge/License-AGPL--3.0-yellow?style=for-the-badge)\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n\n\u003cbr\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/gist/theAdityaNVS/f5b585d1082da2dffffea32434f37956/raw/7f9552d0a179b4f98779ca5a7f9a11fe1e1ca632/GitHub-logo.gif\" width=\"200px\"\u003e\n\n**A modern, responsive portfolio website that dynamically displays your GitHub projects and statistics**\n\n\u003c/div\u003e\n\n\u003e 💡 This portfolio is designed to showcase your skills, projects, and professional information in an elegant and interactive way.\n\n---\n\n## 📋 Table of Contents\n\n- [✨ Features](#-features)\n- [🖥️ Demo](#️-demo)\n- [🚀 Quick Start](#-quick-start)\n- [🔄 GitHub Actions Deployment](#-github-actions-deployment-recommended)\n- [🛠️ Configuration](#️-configuration)\n- [📋 Project Structure](#-project-structure)\n- [🎨 Customization](#-customization)\n- [🔧 Website Generator](#-website-generator)\n- [📱 Responsive Design](#-responsive-design)\n- [📑 README Preview](#-readme-preview)\n- [🖼️ Modal Enhancements](#️-modal-enhancements)\n- [🧪 Local Development](#-local-development-with-environment-variables)\n- [📄 License](#-license)\n- [🙏 Acknowledgements](#-acknowledgements)\n\n---\n\n## ✨ Features\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" width=\"33%\"\u003e\n        \u003cimg src=\"https://github.githubassets.com/images/modules/profile/achievements/pull-shark-default.png\" width=\"50px\"\u003e\u003cbr\u003e\n        \u003cb\u003eGitHub Integration\u003c/b\u003e\u003cbr\u003e\n        \u003csub\u003eAuto-fetch repositories, contributions \u0026 stats\u003c/sub\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"33%\"\u003e\n        \u003cimg src=\"https://github.githubassets.com/images/modules/profile/achievements/starstruck-default.png\" width=\"50px\"\u003e\u003cbr\u003e\n        \u003cb\u003eResponsive Design\u003c/b\u003e\u003cbr\u003e\n        \u003csub\u003eWorks perfectly on all devices\u003c/sub\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"33%\"\u003e\n        \u003cimg src=\"https://github.githubassets.com/images/modules/profile/achievements/pair-extraordinaire-default.png\" width=\"50px\"\u003e\u003cbr\u003e\n        \u003cb\u003eLight/Dark Mode\u003c/b\u003e\u003cbr\u003e\n        \u003csub\u003eToggle between light and dark themes\u003c/sub\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"https://github.githubassets.com/images/modules/profile/achievements/galaxy-brain-default.png\" width=\"50px\"\u003e\u003cbr\u003e\n        \u003cb\u003eCustom Themes\u003c/b\u003e\u003cbr\u003e\n        \u003csub\u003eMultiple color themes available\u003c/sub\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png\" width=\"50px\"\u003e\u003cbr\u003e\n        \u003cb\u003eModern Effects\u003c/b\u003e\u003cbr\u003e\n        \u003csub\u003eParallax scrolling \u0026 3D effects\u003c/sub\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"https://github.githubassets.com/images/modules/profile/achievements/public-sponsor-default.png\" width=\"50px\"\u003e\u003cbr\u003e\n        \u003cb\u003eDynamic Profile Viewer\u003c/b\u003e\u003cbr\u003e\n        \u003csub\u003eView any GitHub user's profile via URL\u003c/sub\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n### 🔥 **NEW: Dynamic Profile Viewer**\n\nView **any GitHub user's profile** using clean hash-based URLs:\n\n```\nhttps://yoursite.com/#octocat         → View Octocat's profile\nhttps://yoursite.com/#torvalds        → View Linus Torvalds' profile\nhttps://yoursite.com/                 → View default profile\n```\n\n**Alternative formats also supported:**\n```\nhttps://yoursite.com/#user=octocat    → Explicit hash format\nhttps://yoursite.com/?user=octocat    → Query parameter format\n```\n\n**Features:**\n- ✅ Real-time GitHub data fetching for any user\n- ✅ Clean hash-based URLs (e.g., `#octocat`)\n- ✅ Automatic error handling for non-existent users\n- ✅ Security validation to prevent malicious input\n- ✅ Guest profile indicator showing whose profile is being viewed\n- ✅ Social links hidden for guest profiles (privacy)\n- ✅ Generated portfolios are locked to owner (no URL override)\n- ✅ Works on all static hosting platforms (GitHub Pages, Netlify, Vercel)\n\n**Note:** The demo site allows dynamic viewing, but portfolios generated via the website generator are locked to the owner's profile for security.\n\n## 🖥️ Demo\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/imnexerio/portfolio/main/public-portfolio/preview.gif\" alt=\"Portfolio Demo\" width=\"90%\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003ca href=\"https://imnexerio.github.io/portfolio/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/View_Live_Demo-5C5C5C?style=for-the-badge\u0026logo=github\u0026logoColor=white\" alt=\"View Live Demo\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## 🚀 Quick Start\n\n\u003col\u003e\n  \u003cli\u003eClone this repository\u003c/li\u003e\n  \u003cpre\u003e\u003ccode\u003egit clone https://github.com/imnexerio/portfolio.git\u003c/code\u003e\u003c/pre\u003e\n  \n  \u003cli\u003eOpen \u003ccode\u003ejs/github-config.js\u003c/code\u003e and update your GitHub username\u003c/li\u003e\n  \n  \u003cli\u003eCustomize your personal information in the profile sections\u003c/li\u003e\n  \n  \u003cli\u003eDeploy to your preferred hosting service (GitHub Pages, Netlify, Vercel, etc.)\u003c/li\u003e\n\u003c/ol\u003e\n\n## 🔄 GitHub Actions Deployment (Recommended)\n\nThis portfolio includes a GitHub Actions workflow for automatic deployment to GitHub Pages:\n\n1. Fork this repository\n2. Go to your repository's Settings \u003e Secrets and variables \u003e Actions\n3. Add a new repository secret named `PAT_GITHUB` with your GitHub token\n4. Add another secret named `FORMSPREE_ID` with your Formspree form ID (see Contact Form setup below)\n5. Add a secret named `GOOGLE_VERIFICATION_CONTENT` with your Google site verification code (without the .html extension)\n6. Go to Settings \u003e Pages and set the source to \"GitHub Actions\"\n7. Any push to the main branch will automatically deploy your portfolio\n\nThe deployment workflow will:\n- Build and deploy your site to GitHub Pages\n- Make your PAT_GITHUB and FORMSPREE_ID tokens available during the build process\n- Create your Google site verification file for Search Console verification\n- Keep your tokens secure by using GitHub's secret management\n\n## 📞 Contact Form Setup\n\nThe contact form uses [Formspree](https://formspree.io) to handle form submissions:\n\n1. Sign up at [Formspree.io](https://formspree.io)\n2. Create a new form and get your form ID (it looks like `abcdefgh`)\n3. Set up the form ID in **one** of these ways:\n\n   **For GitHub Actions deployment:**\n   - Add a repository secret named `FORMSPREE_ID` with your form ID\n\n   **For manual deployment:**\n   - Open `index.html` and update the contact form with your Formspree ID:\n     ```html\n     \u003cform id=\"contactForm\" action=\"#\" method=\"POST\" data-formspree-id=\"YOUR-FORMSPREE-ID\"\u003e\n     ```\n\n   **For local development:**\n   - Create a `.env` file in the root directory:\n     ```\n     PAT_GITHUB=your_github_personal_access_token\n     FORMSPREE_ID=your_formspree_id\n     ```\n\n## 🔍 Setting Up Google Site Verification\n\nAdding your site to Google Search Console requires verifying ownership through a verification file.\n\n1. **Get Your Google Verification Code**:\n   - Go to [Google Search Console](https://search.google.com/search-console/welcome)\n   - Enter your website URL (e.g., `https://yourusername.github.io/portfolio`)\n   - Choose \"HTML file\" verification method\n   - Google will provide a verification filename that looks like: `google1234567890abcdef.html`\n   - Note down the filename **without** the `.html` extension (e.g., `google1234567890abcdef`)\n\n2. **Add as GitHub Secret**:\n   - Go to your GitHub repository\n   - Navigate to Settings \u003e Secrets and Variables \u003e Actions\n   - Click on \"New repository secret\"\n   - Name: `GOOGLE_VERIFICATION_CONTENT`\n   - Value: Your verification code (without `.html` extension)\n   - Click \"Add secret\"\n\n3. **How It Works**:\n   - The GitHub Actions workflow automatically creates your verification file during deployment\n   - The file will be created at the root of your site with the correct content\n   - Google Search Console can then verify your ownership of the site\n\n4. **Troubleshooting**:\n   - If verification fails, ensure the code is entered correctly without the `.html` extension\n   - Check that the workflow ran successfully and deployed your site\n   - Verify the file exists by visiting `https://yourusername.github.io/portfolio/google1234567890abcdef.html`\n\n## 🛠️ Configuration\n\n### GitHub Integration\n\nEdit the `js/github-config.js` file to set your GitHub username:\n\n```javascript\n// Private GitHub credentials\nconst _username = 'your-github-username';\n// Leave token empty - use GitHub Actions workflow for secure deployment\nconst _token = ''; // Token should be set as PAT_GITHUB in GitHub repository secrets\n```\n\n\u003e **Security Best Practice**: Never include your GitHub token directly in code. Use the GitHub Actions workflow to securely use your token from repository secrets.\n\n### Social Links\n\nConfigure your social media links in `js/social-links.js`:\n\n```javascript\nconst socialLinks = [\n    { platform: 'github', url: 'https://github.com/your-username' },\n    { platform: 'linkedin', url: 'https://linkedin.com/in/your-profile' },\n    // Add more platforms as needed\n];\n```\n\n## 📋 Project Structure\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand file structure\u003c/summary\u003e\n\n```\nportfolio/\n├── index.html            # Main HTML file\n├── css/                  # Styling files\n│   ├── modern-styles.css        # Base styles\n│   ├── advanced-animations.css  # Animation effects\n│   ├── wow-effects.css          # Scroll effects\n│   ├── consolidated-responsive.css # Responsive design\n│   ├── github-stats.css         # GitHub statistics styling\n│   ├── github-readme.css        # GitHub README styling\n│   └── website-generator.css    # Generator styling\n├── js/                   # JavaScript files\n│   ├── github-config.js        # GitHub configuration\n│   ├── github-stats.js         # GitHub data fetching and display\n│   ├── optimized-main.js       # Main functionality\n│   ├── social-links.js         # Social media links handler\n│   ├── readme-preview.js       # README rendering functionality\n│   ├── modal-override.js       # Enhanced modal functionality\n│   ├── env-loader.js           # Environment variables loader\n│   └── website-generator.js    # Portfolio generator\n└── LICENSE               # AGPL License file\n```\n\u003c/details\u003e\n\n## 🎨 Customization\n\n### Themes\n\nThe portfolio includes several built-in themes:\n- Light theme (default)\n- Dark theme\n- Multiple custom color options\n\nTo change the default theme, modify the `data-theme` attribute in the HTML tag:\n\n```html\n\u003chtml lang=\"en\" data-theme=\"dark\"\u003e\n```\n\n### Sections\n\nThe portfolio includes the following sections:\n- Hero/Introduction\n- About Me\n- Skills \u0026 Expertise\n- Projects (automatically populated from GitHub)\n- GitHub Statistics\n- Contact Information\n\nEach section can be customized or hidden based on your preferences.\n\n## 🔧 Website Generator\n\nThis portfolio includes a built-in generator that allows visitors to create their own customized version. The generator:\n\n1. Collects user information\n2. Customizes the portfolio with that information\n3. Generates a downloadable ZIP file with the complete website\n\n## 📱 Responsive Design\n\nThe portfolio is fully responsive and optimized for:\n- Desktop screens\n- Tablets\n- Mobile devices\n\n## 📑 README Preview\n\nThe new README preview feature allows for:\n\n- Live rendering of GitHub README files directly in project cards\n- Support for GitHub-flavored markdown syntax\n- Syntax highlighting for code blocks\n- Automatic rendering of tables, images, and other markdown elements\n- Custom styling that matches GitHub's appearance\n\nTo use this feature:\n\n```javascript\n// The README content is automatically loaded from your GitHub repositories\n// No additional configuration required!\n```\n\n## 🖼️ Modal Enhancements\n\nThe enhanced modal system provides:\n\n- Smooth open/close animations\n- Keyboard navigation (Escape to close, arrow keys for navigation)\n- Touch-friendly swipe gestures on mobile\n- Dynamic content loading\n- Responsive layout that works on all screen sizes\n- Advanced image gallery for project screenshots\n\n## 🧪 Local Development with Environment Variables\n\nThis portfolio uses an environment variable loader system for secure local development:\n\n### 🔐 Using env-loader.js\n\nThe `env-loader.js` file provides a secure way to use GitHub authentication and Formspree integration during local development without exposing your sensitive data in committed code:\n\n```javascript\n// Environment Variable Loader for Local Development\nwindow.env = window.env || {};\n\nfunction setupEnv() {\n    // Only set environment variables in local development environments\n    if (window.location.hostname === 'localhost' || \n        window.location.hostname === '127.0.0.1') {\n        \n        console.log('Local development environment detected');\n        \n        // Set your GitHub token for local testing\n        window.env.PAT_GITHUB = 'your_github_token_here';\n        \n        // Set your Formspree ID for local testing\n        window.env.FORMSPREE_ID = 'your_formspree_id_here';\n        \n        Object.keys(window.env).forEach(key =\u003e {\n            console.log(`Loaded env variable: ${key}`);\n        });\n    }\n}\n\nsetupEnv();\n```\n\n### 🚀 Setup Instructions\n\n1. Edit the `js/env-loader.js` file and:\n   - Replace `'your_github_token_here'` with your actual GitHub token\n   - Replace `'your_formspree_id_here'` with your Formspree form ID\n   \n2. Start your local development server:\n   ```bash\n   # Using Python's built-in server\n   python -m http.server 8000\n   \n   # Using Node.js http-server (install with: npm install -g http-server)\n   http-server\n   \n   # Or use VS Code's Live Server extension\n   ```\n\n3. Open your browser to the local development URL (e.g., `http://localhost:8000` or `http://127.0.0.1:5500`)\n\n### 🛡️ Security Features\n\n- **Environment Detection**: Automatically detects local development environments (localhost/127.0.0.1)\n- **Console Logging**: Provides feedback when environment variables are successfully loaded\n- **Git Protection**: The file is included in `.gitignore` by default to prevent accidental token exposure\n\n### 📧 Setting Up Formspree for Contact Form\n\nThe contact form uses [Formspree](https://formspree.io) to handle submissions without requiring backend code.\n\n1. **Create a Formspree Account**:\n   - Go to [Formspree.io](https://formspree.io)\n   - Sign up for an account (the free tier allows 50 submissions per month)\n\n2. **Create a New Form**:\n   - After logging in, click on \"New Form\"\n   - Give your form a name (e.g., \"Portfolio Contact Form\")\n   - Choose the email address where you want to receive form submissions\n\n3. **Get Your Form ID**:\n   - After creating the form, you'll see a form endpoint URL that looks like this:\n     `https://formspree.io/f/xxxxxxxx`\n   - The part after \"/f/\" is your form ID (xxxxxxxx)\n\n4. **Configure for Local Development**:\n   - Open `js/env-loader.js` in your portfolio\n   - Update the line `window.env.FORMSPREE_ID = 'your_formspree_id_here';`\n   - Replace 'your_formspree_id_here' with your actual Formspree ID\n\n5. **Configure for Production Deployment**:\n   - Go to your GitHub repository\n   - Navigate to Settings \u003e Secrets and Variables \u003e Actions\n   - Click on \"New repository secret\"\n   - Name: `FORMSPREE_ID`\n   - Value: Your Formspree form ID\n   - Click \"Add secret\"\n\n6. **Troubleshooting**:\n   - If the form isn't working, check that you've entered the correct form ID\n   - Ensure your Formspree account is active\n   - Check for JavaScript console errors\n   - For more help, visit [Formspree's documentation](https://formspree.io/docs/)\n\n## 📄 License\n\n\u003cdiv align=\"center\"\u003e\n  \nThis project is licensed under the [GNU Affero General Public License v3.0](LICENSE) (AGPL-3.0)\n\n\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/0/06/AGPLv3_Logo.svg\" width=\"120px\"\u003e\n\u003c/div\u003e\n\n## 🙏 Acknowledgements\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://fontawesome.com/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Font_Awesome-339AF0?style=for-the-badge\u0026logo=fontawesome\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://fonts.google.com/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Google_Fonts-4285F4?style=for-the-badge\u0026logo=google\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://docs.github.com/en/rest\"\u003e\u003cimg src=\"https://img.shields.io/badge/GitHub_API-181717?style=for-the-badge\u0026logo=github\u0026logoColor=white\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eBuilt with ❤️ by [IMNEXERIO](https://github.com/imnexerio)\u003c/sub\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimnexerio%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimnexerio%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimnexerio%2Fportfolio/lists"}