{"id":50311037,"url":"https://github.com/sileneer/awesome-portfolio-page-react","last_synced_at":"2026-05-28T21:01:07.188Z","repository":{"id":316995986,"uuid":"1065564491","full_name":"sileneer/awesome-portfolio-page-react","owner":"sileneer","description":"A modern, customizable React template for developer portfolios. Built with React and Material-UI featuring a clean, professional design with multiple sections to showcase your skills, experience, and projects.","archived":false,"fork":false,"pushed_at":"2026-05-15T18:58:59.000Z","size":2082,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-15T21:08:59.459Z","etag":null,"topics":["cv-template","porfolio-website","react","resume-template","web"],"latest_commit_sha":null,"homepage":"https://sileneer.github.io","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/sileneer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-09-28T01:32:11.000Z","updated_at":"2026-05-15T18:57:57.000Z","dependencies_parsed_at":"2025-09-28T06:22:54.098Z","dependency_job_id":null,"html_url":"https://github.com/sileneer/awesome-portfolio-page-react","commit_stats":null,"previous_names":["sileneer/awesome-portfolio-page-react"],"tags_count":2,"template":true,"template_full_name":null,"purl":"pkg:github/sileneer/awesome-portfolio-page-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sileneer%2Fawesome-portfolio-page-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sileneer%2Fawesome-portfolio-page-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sileneer%2Fawesome-portfolio-page-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sileneer%2Fawesome-portfolio-page-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sileneer","download_url":"https://codeload.github.com/sileneer/awesome-portfolio-page-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sileneer%2Fawesome-portfolio-page-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33626142,"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-05-28T02:00:06.440Z","response_time":99,"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":["cv-template","porfolio-website","react","resume-template","web"],"created_at":"2026-05-28T21:00:53.068Z","updated_at":"2026-05-28T21:01:07.170Z","avatar_url":"https://github.com/sileneer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Awesome Portfolio Page React\n\n🚀 A modern, customizable React template for developer portfolios. Built with React and **Material-UI (@mui/material)** featuring a clean, professional design with multiple sections to showcase your skills, experience, and projects.\n\n![Portfolio Screenshot](docs/readme-screenshot1.jpeg)\n\n## ✨ Features\n\n- **🎨 Material-UI Design**: Professional Material Design components with consistent theming\n- **📱 Responsive Design**: Built-in responsive breakpoints for all device sizes\n- **🏠 Home Page**: Professional landing page with hero section and highlight cards\n- **📄 Resume Section**: Complete professional background with structured experience, education, and skills\n- **💼 Projects Showcase**: Showcase projects with Material-UI cards, chips, and media components\n- **📞 Contact Page**: Featured email with copy + mailto CTAs, at-a-glance stat strip (reply time, location, availability), and social grid\n- **🎨 Theme System**: Three-state preference (light / dark / system) with live OS-theme following and custom Material-UI palette\n- **♿ Accessible**: Built-in accessibility features and ARIA attributes\n- **⚙️ Fully Customizable**: All content driven by a single JSON configuration file\n- **🔒 Data Validation**: Structured data format ensures consistency and prevents errors\n\n## 🎨 Material-UI Implementation\n\nThis portfolio has been completely rewritten using Material-UI components:\n\n### Key Components Used\n- **Layout**: `Container`, `Grid`, `Box` for responsive layouts\n- **Navigation**: `AppBar`, `Toolbar` with Material Design principles\n- **Content**: `Card`, `CardContent`, `Paper` for elevated content sections\n- **Typography**: Consistent text hierarchy with Material-UI typography system\n- **Interactive**: `Button`, `IconButton`, `Chip` components with built-in ripple effects\n- **Media**: `Avatar`, `CardMedia` for images with proper aspect ratios\n- **Icons**: `@mui/icons-material` for professional vector icons\n\n### Theme Features\n- Custom color palette maintaining professional appearance\n- Responsive typography that scales with screen size\n- Component style overrides for consistent branding\n- Material Design elevation system for depth\n\n## 🚀 Quick Start\n\n### Installation\n\n1. **Clone the repository**:\n   ```bash\n   git clone https://github.com/sileneer/awesome-portfolio-page-react.git\n   cd awesome-portfolio-page-react\n   ```\n\n2. **Install dependencies**:\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**:\n   ```bash\n   npm start\n   ```\n\n4. **Open your browser** and visit [http://localhost:5173](http://localhost:5173)\n\n### Customization\n\nYour portfolio data is organized into separate JSON files for easy management:\n\n1. **Personal Information**: Edit `src/data/personalInfo.json`\n   - Update your name, title, bio, contact info, and social links\n   \n2. **Navigation**: Edit `src/data/navigation.json`\n   - Customize your brand name and menu items\n\n3. **Resume**: Edit `src/data/resume.json`\n   - Add work experience, education, skills, certifications, and awards\n\n4. **Projects**: Edit `src/data/projects.json`\n   - Showcase your portfolio projects with descriptions and screenshots\n\n5. **Contact**: Edit `src/data/contact.json`\n   - Add additional contact methods and social media links\n\n6. **Images**:\n   - Add your profile photo to `public/profile_photo.png`\n   - Add your CV to `public/CV.pdf` (optional)\n   - Add project screenshots to `public/projects/` folder (optional)\n\nSee [PORTFOLIO_DATA_STRUCTURE.md](./docs/PORTFOLIO_DATA_STRUCTURE.md) for complete details on available fields and data structure.\n\n## 📁 Project Structure\n\n```\nsrc/\n├── components/\n│   ├── Navigation.jsx        # Floating bottom nav with theme toggle\n│   ├── Footer.jsx            # Footer with attribution\n│   └── pages/\n│       ├── HomePage.jsx      # Landing page with hero and stat cards\n│       ├── ResumePage.jsx    # Resume and experience timeline\n│       ├── ProjectsPage.jsx  # Projects showcase with filtering\n│       └── ContactPage.jsx   # Stat strip + featured email + socials\n├── context/\n│   └── ThemeContext.jsx      # Light / dark / system theme state\n├── data/\n│   ├── navigation.json       # Navigation menu configuration\n│   ├── personalInfo.json     # Personal information and bio\n│   ├── resume.json           # Professional experience and education\n│   ├── projects.json         # Portfolio projects\n│   ├── contact.json          # Contact information and social links\n│   └── schemas.js            # Zod schemas — JSON files validated at boot\n├── App.jsx                   # Main app component with theme\n└── index.jsx                 # Entry point + data validation\n```\n\n## 🎨 Pages Overview\n\n### Home Page\n- Hero section with your photo, name, and professional title\n- Quick overview of location, languages, and website\n- Links to LinkedIn and GitHub\n- Statistics cards showing experience, projects, and skills count\n\n### Resume Page\n- Professional summary\n- Work experience with achievements and technologies\n- Education background with coursework and activities\n- Skills showcase with technology tags\n- Certifications and awards\n- Personal interests\n- Downloadable CV link\n\n### Projects Page\n- Project cards with descriptions and technologies used\n- Screenshots and live demo links\n- Role and duration information\n- Clean, organized layout for easy browsing\n\n### Contact Page\n- **Stat strip** at the top: typical reply time, location, and a live availability indicator (paired with the HomePage status pill)\n- **Featured email card**: avatar, address, and two CTAs (`Copy address` to put the email on the clipboard, `Email me` to launch the user's mail client via `mailto:`)\n- Phone row with a `tel:` link (rendered only when `phone` is set)\n- Social media grid (LinkedIn, GitHub, website, Twitter, Facebook) — each social shown only if configured\n- Professional contact message above the cards\n- Configurable response time string in `contact.json` (`responseTime`)\n\n## 📋 Available Scripts\n\n### Development\n- **`npm start`** - Start development server at [http://localhost:5173](http://localhost:5173)\n- **`npm test`** - Run tests in watch mode\n- **`npm run build`** - Build for production (outputs to `build/` folder)\n\n### Production Build\nThe production build is optimized and minified, ready for deployment to any static hosting service.\n\n## 🚀 Deployment\n\nThis project can be deployed to various platforms:\n\n### GitHub Pages\n```bash\nnpm run build\n# Deploy the build/ folder to your hosting service\n```\n\n### Netlify / Vercel\nSimply connect your GitHub repository and these services will automatically build and deploy your portfolio.\n\n### Other Static Hosting\nBuild the project (`npm run build`) and upload the `build/` folder contents to any static web hosting service.\n\n## 🛠️ Customization Guide\n\n### Basic Setup\n\n#### 1. Personal Information (`src/data/personalInfo.json`)\nUpdate your basic information:\n- Name, title, and professional bio\n- Contact details (email, phone, location)\n- Social media links (LinkedIn, GitHub, website)\n- Languages you speak\n- Profile photo path\n\n#### 2. Navigation (`src/data/navigation.json`)\nCustomize your navigation bar:\n- Brand name or logo text\n- Menu items and their routes\n\n#### 3. Resume (`src/data/resume.json`)\nBuild your professional profile:\n- Professional summary\n- Work experience with achievements\n- Education history\n- Technical skills\n- Certifications and awards\n- Personal interests\n- Downloadable CV link\n\n#### 4. Projects (`src/data/projects.json`)\nShowcase your work:\n- Project name and description\n- Technologies used\n- Your role and project duration\n- Screenshots and demo links\n\n#### 5. Contact (`src/data/contact.json`)\nAdd additional contact options:\n- Custom contact message displayed under the page title\n- Typical response time string (e.g. \"Within 24 hours\") shown on the stat strip\n- Alternate email\n- Social media (Twitter, Facebook)\n\n### Adding Images\n- **Profile Photo**: Add your photo as `public/profile_photo.png`\n- **CV File**: Add your resume PDF as `public/CV.pdf`\n- **Project Screenshots**: Create `public/projects/` folder and add your project images\n\n### Styling \u0026 Theming\nThe application uses Material-UI theming configured in `src/App.jsx`:\n- **Theme Configuration**: Modify the `getDesignTokens()` function in `App.jsx`\n- **Color Palette**: Change primary, secondary, and background colors\n- **Typography**: Adjust font families, sizes, and weights\n- **Component Overrides**: Customize Material-UI component styles\n- **Responsive Breakpoints**: Adjust mobile/tablet/desktop layouts\n\nFor detailed theme customization, see the Material-UI documentation: https://mui.com/material-ui/customization/theming/\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## 🙏 Acknowledgments\n\n- Bundled with [Vite](https://vitejs.dev/) and built on [React](https://react.dev/) + [Material-UI](https://mui.com/) + [Framer Motion](https://www.framer.com/motion/)\n- Runtime JSON validation by [Zod](https://zod.dev/)\n- Icons and design inspiration from modern portfolio trends\n- Thank you to all contributors who help improve this template\n\n---\n\n**Ready to showcase your work?** Clone this repo and create your professional portfolio in minutes! ✨\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsileneer%2Fawesome-portfolio-page-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsileneer%2Fawesome-portfolio-page-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsileneer%2Fawesome-portfolio-page-react/lists"}