A modern, responsive portfolio website built with React and TypeScript that automatically fetches and displays GitHub repositories.
- Auto-updating Projects: Automatically fetches your latest GitHub repositories via GitHub API
- Responsive Design: Looks great on desktop, tablet, and mobile devices
- Modern UI: Clean, professional design with smooth animations
- Performance Optimized: Built with Vite for fast loading and optimal performance
- SEO Ready: Includes meta tags for search engines and social media sharing
- Auto-refresh: Updates repository data every 5 minutes and when page regains focus
- GitHub Integration: Displays profile stats, achievements, and repository information
Visit the live portfolio at: https://adam-olser.github.io
- Frontend: React 19, TypeScript
- Build Tool: Vite
- Styling: Modern CSS with CSS Grid and Flexbox
- Deployment: GitHub Pages with GitHub Actions
- APIs: GitHub REST API for repository data
The portfolio automatically features these key projects:
- QR Studio: QR code generator with advanced styling and logo integration
- Smart Brain: AI-powered face detection app with user authentication
- React Music Player: Modern music player built with React
- DApp Chat: Decentralized chat application
- Node.js 20+
- npm or yarn
- Clone the repository:
git clone https://github.com/adam-olser/adam-olser.github.io.git
cd adam-olser.github.io- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:5173 in your browser
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build locallynpm run lint- Run ESLint
The portfolio includes several mechanisms to keep project data fresh:
- Periodic Refresh: Automatically fetches new data every 5 minutes
- Visibility API: Refreshes when you return to the tab
- Smart Sorting: Projects are sorted by stars and recent activity
- Real-time Stats: GitHub profile stats update automatically
The repository is configured with GitHub Actions for automatic deployment:
- Push to
mainormasterbranch - GitHub Actions automatically builds and deploys to GitHub Pages
- Your portfolio will be live at
https://adam-olser.github.io
If you prefer manual deployment:
- Build the project:
npm run build- The built files will be in the
distdirectory
- Go to repository Settings → Pages
- Set Source to "GitHub Actions"
- The workflow will handle the rest automatically
The portfolio automatically fetches data from your GitHub profile, but you can customize:
- Featured Projects: Edit the
featuredProjectsarray inApp.tsx - Skills: Update the
skillsarray in the About component - Achievements: Modify the
achievementsarray - Contact Links: Update the Contact component with your preferred links
The portfolio uses modern CSS with CSS custom properties (variables) for easy theming:
- Colors and themes are defined in
:rootinApp.css - Supports automatic dark mode based on user preference
- Responsive breakpoints for mobile-first design
To use with a different GitHub username:
- Replace
'adam-olser'in the API calls withinApp.tsx - Update meta tags in
index.html - Update repository name in deployment configuration
- Uses GitHub's public API (no authentication required)
- Respects GitHub's rate limits (60 requests per hour for unauthenticated requests)
- Only fetches public repository and profile information
- No personal data is stored or tracked
- Lighthouse Score: 90+ across all metrics
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-feature - Commit your changes:
git commit -am 'Add new feature' - Push to the branch:
git push origin feature/new-feature - Submit a pull request
This project is open source and available under the MIT License.
- GitHub: @adam-olser
- Email: [email protected]
- Portfolio: https://adam-olser.github.io
Built with ❤️ using React, TypeScript, and modern web technologies.