Ma. Diana Rose Angan-angan - Portfolio

A modern, responsive portfolio website showcasing my journey as a Full-Stack Developer. Built with React and styled with Tailwind CSS, this portfolio highlights my projects, skills, and experience in software development.

🌟 Features

• Responsive Design: Optimized for all devices and screen sizes
• Dark/Light Mode: Toggle between themes with persistent preference
• Interactive Project Galleries: Detailed showcases of AgriTrust and KnockTrack projects
• Skills Overview: Comprehensive display of technical competencies
• Education & Certifications: Academic background and professional achievements
• Contact Integration: Direct links to email, GitHub, and LinkedIn

📸 Screenshots

Desktop View

Mobile View

🛠️ Tech Stack

Frontend

• React 18 - Modern JavaScript library for building user interfaces
• Vite - Fast build tool and development server
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icon library

Development Tools

• ESLint - Code linting
• PostCSS - CSS processing
• Autoprefixer - CSS vendor prefixing

📋 Prerequisites

Before running this project, make sure you have the following installed:

• Node.js (version 16 or higher)
• npm or yarn package manager
• Git for version control

🚀 Installation & Setup

1. Clone the repository

   git clone https://github.com/dianaangan/github-portfolio.git
   cd github-portfolio

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser

   Navigate to http://localhost:5173 to view the portfolio.

📁 Project Structure

github-portfolio/
├── public/
│   ├── favicon.svg
│   └── images/
│       ├── agritrust/
│       │   └── mobile/
│       └── knocktrack/
├── src/
│   ├── images/          # Image assets
│   ├── index.css        # Global styles
│   ├── main.jsx         # Application entry point
│   └── Portfolio.jsx    # Main portfolio component
├── index.html           # HTML template
├── package.json         # Project dependencies
├── tailwind.config.js   # Tailwind configuration
├── vite.config.js       # Vite configuration
└── README.md           # Project documentation

🌐 Deployment

This portfolio is deployed on GitHub Pages. To deploy your own version:

1. Build the project

   npm run build

2. Deploy to GitHub Pages

   npm run deploy

The deployment script will build the project and push the dist folder to the gh-pages branch.

🤝 Contributing

While this is a personal portfolio, suggestions and improvements are welcome! Please feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

📞 Contact

Diana Rose Angan-angan

• Email: anganangandianarose@gmail.com
• GitHub: github.com/dianaangan
• LinkedIn: linkedin.com/in/dianaangan
• Portfolio: dianaangan.github.io/github-portfolio

---

Built with ❤️ using React and Tailwind CSS