Merge pull request #29 from PLGuerraDesigns/dev

Updated Readme

README.md

@@ -1,22 +1,228 @@
-# Pablo L. Guerra's Portfolio Web-App
+<div style="display: flex; align-items: flex-end;">
+    <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/web/icons/Icon-192.png" alt="Icon" width="100" height="100" style="margin-right: 10px;">
+    <h1 style="margin: 0;">Pablo L. Guerra's Portfolio Web-App</h1>
+</div>
+</br>
 
-This web-app is a showcase of my personal projects and professional experiences/accomplishments.
+This web app is a portfolio of my work, projects, and research. </br>
+You can find relevant publications, documents, source code, images, videos, and more here.
 
-You can also find relevant publications, documents, source code, images, videos, and more.
+It is a static web app built using the [Flutter framework](https://flutter.dev/) and hosted on [GitHub Pages](https://pages.github.com/). </br>
 
-Some additional features include:
+You can access the web app here: [https://plguerradesigns.github.io/portfolio](https://plguerradesigns.github.io/portfolio)
 
-- A theme toggle button
-- An email contact button
-- Redirects to my social media accounts
-- Redirects to a sponsor page
-- Redirects to relevant institutions/organizations/companies
+<details>
+<summary><i><strong> Expand to learn more about Flutter</strong></i></summary>
 
-  <br />
+[![introducing-flutter.png](https://i.postimg.cc/kGfjsky9/introducing-flutter.png)](https://www.youtube.com/watch?v=fq4N0hgOWzU)
 
-The app itself is built to demonstrate my skills in Flutter, a cross-platform UI toolkit for building apps for mobile, web, and desktop from a single codebase.
+Try Flutter directly in your browser using [DartPad](https://dartpad.dev/?id=5c0e154dd50af4a9ac856908061291bc&sample=counter).
 
-## Getting Started:
+[![dart-pad.gif](https://i.postimg.cc/brNDxMJQ/dart-pad.gif)](https://dartpad.dev/?id=5c0e154dd50af4a9ac856908061291bc&sample=counter)
+
+</details>
+</br>
+<strong>Some notable features include:</strong>
+
+- Dark and light mode, with a toggle button
+- A responsive design for portrait and landscape mode
+- A list of my
+  - educational background
+  - professional experiences
+  - personal projects
+- A custom multi-media player and browser that supports
+  - Local videos
+  - YouTube videos
+  - Local Images
+  - Network Images
+- Redirects to
+  - my social media accounts
+  - relevant institutions/organizations/companies
+  - the source code of the web app
+  - the project issue tracker
+- A contact button that opens an email client with my email address
+
+## Showcase
+
+<details open>
+<summary><i><strong>v2.5.0</strong></i></summary>
+
+<details open>
+<summary><i><strong>Desktop</strong></i></summary>
+
+<table>
+ <tr>
+    <td style="text-align: center;">Dark Mode</td>
+    <td style="text-align: center;">Light Mode</td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/desktop/dark/home.webp" alt="Home (Dark Mode)" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/desktop/light/home.webp" alt="Home (Light Mode)" width="300">
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/desktop/dark/professional_experience.webp" alt="Professional Experience (Dark Mode)" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/desktop/light/projects.webp" alt="Projects (Light Mode)" width="300">
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/desktop/dark/details.webp" alt="Details (Dark Mode)" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/desktop/light/details.webp" alt="Details (Light Mode)" width="300">
+    </td>
+
+</table>
+
+</details>
+
+<details>
+<summary><i><strong>Mobile</strong></i></summary>
+
+<table>
+ <tr>
+    <td style="text-align: center;">Dark Mode</td>
+    <td style="text-align: center;">Light Mode</td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/mobile/dark/home_drawer.webp" alt="Home Drawer (Dark Mode)" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/mobile/light/home.webp" alt="Home (Light Mode)" width="300">
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/mobile/dark/professional_experience.webp" alt="Professional Experience (Dark Mode)" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/mobile/light/projects.webp" alt="Projects (Light Mode)" width="300">
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/mobile/dark/details.webp" alt="Details (Dark Mode)" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v2.5.0/mobile/light/details.webp" alt="Details (Light Mode)" width="300">
+    </td>
+  </tr>
+</table>
+
+</details>
+
+</details>
+
+<details>
+<summary><i><strong>v1.0.8</strong></i></summary>
+
+<table>
+ <tr>
+    <td style="text-align: center;">Desktop</td>
+    <td style="text-align: center;">Mobile</td>
+  </tr>
+  <!-- home, about, professional_experience, details, projects, contact, resume  -->
+
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/desktop/home.webp" alt="Home" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/mobile/home.webp" alt="Home" width="300">
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/desktop/about.webp" alt="About" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/mobile/about.webp" alt="About" width="300">
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/desktop/professional_experience.webp" alt="Professional Experience" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/mobile/professional_experience.webp" alt="Professional Experience" width="300">
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/desktop/professional_experience_details.webp" alt="Professional Experience Details" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/mobile/details.webp" alt="Professional Experience Details" width="300">
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/desktop/projects.webp" alt="Projects" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/mobile/projects.webp" alt="Projects" width="300">
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/desktop/projects_details.webp" alt="Projects Details" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/mobile/home_drawer.webp" alt="Home Drawer" width="300">
+    </td>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/desktop/contact.webp" alt="Contact" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/mobile/contact.webp" alt="Contact" width="300">
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/desktop/resume.webp" alt="Resume" width="300">
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/PLGuerraDesigns/portfolio/master/showcase/v1.0.8/mobile/resume.webp" alt="Resume" width="300">
+    </td>
+  </tr>
+</table>
+
+</details>
+
+## Development Notes
+
+![Build and Release](https://github.com/plguerradesigns/portfolio/actions/workflows/main.yml/badge.svg)
+[![Bugs](https://img.shields.io/github/issues/plguerradesigns/portfolio/bug?label=Bugs)](https://github.com/PLGuerraDesigns/portfolio/issues?q=is%3Aissue+is%3Aopen)
+[![Enhancements](https://img.shields.io/github/issues/plguerradesigns/portfolio/enhancement?label=Enhancements)](https://github.com/PLGuerraDesigns/portfolio/issues?q=is%3Aissue+is%3Aopen)
+
+The development of this web app is ongoing and follows an iterative process known as Continuous Integration/Continuous Deployment (CI/CD). </br>
+
+![CI/CD Pipeline](https://www.synopsys.com/glossary/what-is-cicd/_jcr_content/root/synopsyscontainer/column_1946395452_co/colRight/image_copy.coreimg.svg/1663683682045/cicd.svg)
+
+There are three main branches in this repository:
+
+- `master`: The main branch is the default branch and is protected. It contains the latest stable version of the web app.
+- `dev`: The development branch is where new features are added and tested. It is merged into the main branch after testing.
+- `published`: The published branch contains the latest build of the web app. This branch is used to host the web app on GitHub Pages.
+
+The CI/CD pipeline is implemented using [GitHub Actions](https://github.com/features/actions). The pipeline consists of the following stages:
+
+- Build: The Flutter web app is built using the `flutter build web` command.
+- Release: The build artifacts are pushed to the `published` branch.
+- Deploy: The `published` branch is deployed to GitHub Pages.
+
+The pipeline is triggered automatically on every commit to the master branch.
+
+## Getting Started
 
 ### Install Flutter: