{"id":28922171,"url":"https://github.com/yashrajnayak/developer-portfolio","last_synced_at":"2026-07-13T09:31:20.918Z","repository":{"id":321197278,"uuid":"1003439939","full_name":"yashrajnayak/developer-portfolio","owner":"yashrajnayak","description":"A modern, fully configurable developer portfolio that adapts to your content. Built with vanilla JavaScript and designed for GitHub Pages with automatic setup and dynamic content loading","archived":false,"fork":false,"pushed_at":"2026-05-04T18:22:17.000Z","size":5483,"stargazers_count":96,"open_issues_count":0,"forks_count":6,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-04T20:15:41.776Z","etag":null,"topics":["developer-portfolio","featured","github-pages","portfolio","responsive-design","vanilla-javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yashrajnayak.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-17T06:43:54.000Z","updated_at":"2026-05-04T18:22:21.000Z","dependencies_parsed_at":"2025-10-28T11:34:54.791Z","dependency_job_id":null,"html_url":"https://github.com/yashrajnayak/developer-portfolio","commit_stats":null,"previous_names":["yashrajnayak/developer-portfolio"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/yashrajnayak/developer-portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajnayak%2Fdeveloper-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajnayak%2Fdeveloper-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajnayak%2Fdeveloper-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajnayak%2Fdeveloper-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yashrajnayak","download_url":"https://codeload.github.com/yashrajnayak/developer-portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajnayak%2Fdeveloper-portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35418222,"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-07-13T02:00:06.543Z","response_time":119,"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":["developer-portfolio","featured","github-pages","portfolio","responsive-design","vanilla-javascript"],"created_at":"2025-06-22T07:38:21.156Z","updated_at":"2026-07-13T09:31:20.913Z","avatar_url":"https://github.com/yashrajnayak.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Developer Portfolio Template\n\nA modern, fully configurable developer portfolio that adapts to your content. Built with vanilla JavaScript and designed for GitHub Pages with automatic setup, dynamic content loading, and intelligent README generation.\n\n\u003cdiv align=\"left\"\u003e\n\n[![Use This Template](https://img.shields.io/badge/Use_This_Template-2ea44f?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/yashrajnayak/developer-portfolio/generate)\n\n\u003c/div\u003e\n\n[![image](https://github.com/user-attachments/assets/57db89c3-cb51-4aac-b9df-800c7c4a811d)](https://yashrajnayak.github.io/)\n\n## 🚀 Quick Start\n\n![Launch your portfolio flow showing template use, config editing, and GitHub Pages publishing](assets/readme/quick-start-flow.png)\n\n1. Click \"Use this template → \"Create a new repository\"\n2. Name your repository `yourusername.github.io` (replace `yourusername` with your actual GitHub username)\n3. **Enable \u0026 Run Setup**: Go to `https://github.com/YOUR_USERNAME/YOUR_REPO/actions/workflows/template-setup.yml`\n   - Click \"I understand my workflows, go ahead and enable them\"\n   - Click \"Run workflow\" → \"Run workflow\" (green button)\n4. Wait for the setup to complete - The template will automatically:\n   - Create personalized `config.json` with your GitHub username\n   - Generate initial README.md with your GitHub stats\n   - Update LICENSE file with your name\n   - Remove template-specific files\n   - Prepare everything for customization\n5. Customize your portfolio by editing `config.json` with your details\n6. After editing `config.json` go to Actions → \"Update README from Config\" → click on \"Run workflow\" and again \"Run workflow\"\n7. Check if GitHub Pages is enabled: Go to Settings → Pages → Deploy from branch → main\n\nWait for GitHub Pages deployment to complete and your portfolio would be live! 🎉\n\n## ✨ Technical Features\n\n- 🤖 Automatically initializes your portfolio when you use the template\n- ⚙️ Zero code changes required - everything configured through JSON\n- 🎛️ Feature Flags to enable/disable sections (about, projects, experience, skills, GitHub projects)\n- 🚀 GitHub integration with featured-topic, most-starred, or custom-feed project modes\n- ⚡ Performance optimized - bundled CSS/JS, lazy images, and efficient DOM updates\n- 🔎 SEO ready - generated sitemap, robots.txt, web manifest, Open Graph, Twitter Card, and JSON-LD metadata\n- 🏗️ Modular source architecture with committed production bundles\n\n## 🎨 User Experience\n\n- 📱 Fully responsive mobile-first design\n- 🌓 Dark/light mode - smooth transitions with persistent preferences\n- 📊 Add 1 project or 100 projects - website adapts automatically\n- 🔗 Project links - Add links to live demos, repositories, or project pages for each project\n- 📑 Print-friendly layout for resume/PDF exports\n\n### ⚡ Automatic Setup\n\nWhen you create a repository from this template:\n\n- GitHub Actions automatically detects the new repository\n- Checks if you named it correctly (`username.github.io`)\n- Creates personalized `config.json` with your GitHub username pre-filled\n- Generates a beautiful README.md with your GitHub stats\n- Generates bundled assets and SEO files from your config\n- Updates the LICENSE file with your name\n- Removes all template-specific files you don't need\n- Everything prepared for immediate GitHub Pages deployment ✅ \n\n![image](assets/portfolio-generator-explainer.png)\n\n## 🏗️ Template Architecture\n\n![Developer portfolio template architecture showing config, GitHub Actions, build scripts, static site assets, browser runtime, GitHub API, and rendered portfolio sections](assets/readme/architecture-diagram.png)\n\nThe template keeps authoring simple with `config.json`, then uses GitHub Actions and local scripts to generate the production-ready pieces: bundled CSS/JS, README content, SEO files, and a static GitHub Pages site.\n\n## 📁 Project Structure\n\n```\n├── index.html              # Main HTML file\n├── config.json             # Your portfolio configuration\n├── .github/workflows/      # GitHub Actions for automation\n│   ├── template-setup.yml  # Initial portfolio setup (run once)\n│   ├── template-setup.js   # Setup script for template initialization\n│   ├── update-readme.yml   # README updates from config\n│   ├── update-readme.js    # README updates script\n│   └── validate-site.yml   # CI validation for config, bundles, and local paths\n├── css/                    # Modular CSS files\n│   ├── bundle.css         # Generated production stylesheet\n│   ├── main.css           # Main stylesheet that imports all modules\n│   ├── base.css           # CSS reset, variables, base styles\n│   ├── components.css     # Shared component styles\n│   ├── theme.css          # Theme switcher and dark mode\n│   ├── scroll-to-top.css  # Scroll-to-top control\n│   ├── print.css          # Print/PDF styles\n│   ├── header.css         # Header and social links\n│   ├── about.css          # About section styles\n│   ├── skills.css         # Skills section styles\n│   ├── experience.css     # Experience section styles\n│   ├── projects.css       # Projects and GitHub projects\n│   ├── animations.css     # Keyframe animations\n│   └── responsive.css     # Mobile and tablet responsive styles\n├── js/                     # Modular JavaScript files\n│   ├── bundle.js          # Generated production script\n│   ├── main.js            # Main application entry point\n│   ├── config-manager.js  # Configuration loading\n│   ├── seo-manager.js     # SEO meta tags management\n│   ├── theme-manager.js   # Dark/light theme switching\n│   ├── loading-manager.js # Loading screen management\n│   ├── section-manager.js # Content sections rendering\n│   ├── header-manager.js  # Header and social links\n│   └── github-projects-manager.js # GitHub API integration\n├── scripts/                # Local build and validation scripts\n│   ├── build-assets.mjs    # Builds bundles, sitemap, robots.txt, and manifest\n│   ├── check-local-paths.mjs # Blocks local machine paths before publishing\n│   └── validate-config.mjs # Validates config and referenced assets\n├── robots.txt              # Generated search crawler hints\n├── sitemap.xml             # Generated sitemap\n├── site.webmanifest        # Generated web app metadata\n└── assets/\n    ├── readme/             # README diagrams and template graphics\n    ├── logos/              # Company logos (light and dark variants)\n    └── projects/           # Project screenshots\n```\n\n## 🔧 Configuration\n\nAll portfolio content is managed through `config.json`. After the automated setup:\n\n1. Update personal information in the `header` and `about` sections\n2. Add your experience in the `experience.jobs` array\n3. Showcase your projects in the `projects.items` array\n4. List your skills in the `skills.categories` array\n5. Configure social links in the `social_links` array\n\n### Example config.json structure:\n```json\n{\n  \"header\": {\n    \"greeting\": \"Your Name\",\n    \"tagline\": \"Your Professional Tagline\"\n  },\n  \"about\": {\n    \"paragraphs\": [\n      \"Your introduction paragraph\",\n      \"Additional details about your background\"\n    ]\n  },\n  \"experience\": {\n    \"jobs\": [\n      {\n        \"company\": \"Company Name\",\n        \"role\": \"Your Role\",\n        \"date\": \"Start - End\",\n        \"responsibilities\": [\"Achievement 1\", \"Achievement 2\"]\n      }\n    ]\n  }\n  // ... more configuration options\n}\n```\n\n## 🎨 Customization\n\n### Adding Company Logos\n1. Add logos to `assets/logos/` folder\n2. Use format: `Company_Logo.png` and `Company_Logo_White.png` (for dark mode)\n3. Reference in config.json: `\"logo\": \"assets/logos/Company_Logo.png\"`\n\n### GitHub Projects\nThe template can show repositories in three modes:\n\n- `featured`: show repositories with a configurable topic, such as `featured`\n- `stars`: show your most-starred public repositories\n- `feed`: read repositories from a custom JSON feed, then fall back to GitHub APIs\n\n```json\n{\n  \"github_projects\": {\n    \"title\": \"Projects on GitHub\",\n    \"mode\": \"featured\",\n    \"topic\": \"featured\",\n    \"max_repos\": 6,\n    \"excluded_repos\": []\n  }\n}\n```\n\n### Theme Customization\n- Modify CSS custom properties in `css/base.css`\n- Colors, fonts, and spacing all centrally managed\n- Dark/light mode variants automatically handled\n\n## 🚀 Deployment\n\n### GitHub Pages (Recommended)\n1. Your repository should be named `username.github.io`\n2. Go to Settings → Pages\n3. Source: \"Deploy from a branch\"\n4. Branch: \"main\"\n5. Your portfolio will be live at `https://username.github.io`\n\n### Alternative Deployment\n- **Netlify**: Connect your GitHub repository\n- **Vercel**: Import your GitHub repository\n- **Custom hosting**: Upload files to any web server\n\n## 🔄 Automated Workflows\n\nThis template includes three GitHub Actions:\n\n### 1. Template Setup (`template-setup.yml`)\n- **Triggers**: Automatically when repository is created from template\n- **Function**: Initializes your portfolio from the template\n- **Actions**: \n  - Validates repository name format (`username.github.io` recommended)\n  - Creates personalized config.json with your GitHub username\n  - Generates initial README.md with GitHub stats\n  - Builds bundled assets, sitemap, robots.txt, and web manifest\n  - Updates LICENSE file with your name and current year\n  - Removes template-specific files (docs/, setup files, etc.)\n  - Commits everything ready for deployment\n\n### 2. README Manual Update (`update-readme.yml`)\n- **Triggers**: Manual workflow dispatch only\n- **Function**: Regenerates README.md from your latest config when manually triggered\n- **Actions**:\n  - Validates config.json format\n  - Generates beautiful README with your GitHub stats and info\n  - Rebuilds generated SEO and bundled assets\n  - Commits updated files automatically\n\n### 3. Site Validation (`validate-site.yml`)\n- **Triggers**: Push to main and pull requests\n- **Function**: Keeps the template deployable\n- **Actions**:\n  - Validates `config.json`\n  - Checks referenced local assets exist\n  - Blocks local machine-specific paths\n  - Rebuilds generated assets and fails if committed bundles are stale\n\n## 💡 Best Practices\n\n1. **Repository Naming**: Use `username.github.io` for your main portfolio\n2. **GitHub Projects**: Use `featured` mode for curated repos or `stars` mode for automatic ranking\n3. **Regular Updates**: Keep your `config.json` updated with latest experience\n4. **Logo Quality**: Use high-resolution logos for professional appearance\n5. **Content Length**: Keep descriptions concise but informative\n\n## 🧪 Local Validation\n\nRun these before pushing changes:\n\n```bash\nnpm run validate\nnpm run build\n```\n\nThe validation script checks config shape, referenced assets, generated bundle freshness, and accidental local filesystem paths.\n\n## 🤝 Contributing\n\nWant to improve this template?\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 🙌 Credits\n\nGitHub stats cards are powered by [GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats) by [Anurag Hazra](https://github.com/anuraghazra).\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\nBuilt with ❤️ for the developer community\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashrajnayak%2Fdeveloper-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyashrajnayak%2Fdeveloper-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashrajnayak%2Fdeveloper-portfolio/lists"}