A modern, responsive portfolio website showcasing my journey as an Aspiring Software Developer. Built with React and styled with Tailwind CSS, featuring dark mode by default and comprehensive project showcases.
- 🌙 Dark Mode Default: Professional dark theme with light mode toggle
- 📱 Fully Responsive: Optimized for mobile, tablet, and desktop devices
- 🖼️ Interactive Image Galleries: Project screenshots with modal viewing
- 📊 Comprehensive Skills Display: 8 categories with 40+ technologies
- 🎓 Education & Certifications: Academic achievements with certificate images
- 📄 Resume Integration: Direct PDF download functionality
- ⚡ Fast Performance: Built with Vite for optimal loading speeds
Visit the portfolio: dianaangan.github.io/github-portfolio
- 13 Mobile App Screenshots showcasing farmer, buyer, and driver interfaces
- React Native, Solidity, Node.js, MongoDB, Firebase
- Blockchain-driven supply chain with smart contracts
- 5 Android App Screenshots displaying complete user journey
- Kotlin, Firebase, Android Studio, IoT integration
- Real-time notifications and activity tracking
- React 18.2 - Modern JavaScript library
- Vite 5.4 - Lightning-fast build tool
- Tailwind CSS 3.4 - Utility-first styling
- Lucide React - Beautiful icon system
- ESLint - Code quality assurance
- PostCSS & Autoprefixer - CSS processing
- GitHub Pages - Automated deployment
- gh-pages - Deployment automation
- Node.js (v16+)
- npm or yarn
- Git
# Clone the repository
git clone https://github.com/dianaangan/github-portfolio.git
cd github-portfolio
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Deploy to GitHub Pages
npm run deploygithub-portfolio/
├── public/
│ ├── favicon.svg # Custom "D" logo
│ ├── resume.pdf # Downloadable resume
│ └── images/
│ ├── agritrust/ # 13 project screenshots
│ ├── knocktrack/ # 5 project screenshots
│ ├── certificates/ # 3 certificate images
│ └── profile/ # Profile photo
├── src/
│ ├── index.css # Global styles & animations
│ ├── main.jsx # App entry point
│ └── Portfolio.jsx # Main component (650+ lines)
├── .gitignore # Privacy & security protections
├── vite.config.js # Base path: /github-portfolio/
└── package.json # Dependencies & scripts
- Mobile-first approach with breakpoints for all devices
- Collapsible navigation with icon-only mobile view
- Flexible image galleries with horizontal scrolling
- Adaptive text sizing and spacing
- Modal image viewer for certificates and screenshots
- "See All" functionality for project galleries (4 → all images)
- Error handling with fallback placeholders
- Optimized loading with proper aspect ratios
- Smooth scrolling navigation between sections
- Persistent theme preference (localStorage)
- Hover animations and micro-interactions
- Professional color scheme with blue accent
The .gitignore file includes comprehensive protections for:
- Environment variables (
.env*) - Personal files (
*.private,personal/) - Credentials and keys (
credentials/,keys/) - Development artifacts and system files
- 2 Projects Completed - Full-stack applications
- 40+ Technologies - Across 8 skill categories
- 6 Certifications - Including ICT Congress 2024 3rd Place
- 99%+ Uptime - Reliable GitHub Pages hosting
Automated deployment to GitHub Pages:
npm run build && npm run deployThe portfolio uses:
- Base path:
/github-portfolio/(configured invite.config.js) - Branch:
gh-pages(auto-generated) - Custom domain ready - Easy to configure
This is a personal portfolio, but feedback and suggestions are welcome:
- Fork the repository
- Create a feature branch
- Make your improvements
- Submit a pull request
Ma. Diana Rose Angan-angan - Aspiring Software Developer
- 📧 Email: anganangandianarose@gmail.com
- 💼 GitHub: github.com/dianaangan
- 🔗 LinkedIn: linkedin.com/in/dianaangan
- 🌐 Portfolio: dianaangan.github.io/github-portfolio
Built with ❤️ using React, Tailwind CSS, and modern web technologies
Last updated: January 2026