Updated details about my portfolio

Author: dmladek

public/images/StelarShare.webp

@@ -49,8 +49,7 @@ const Projects = () => {
                       <div>
                         <h3 className="project-item-tech-stack">Development</h3>
                         <p className="project-item-left-column-content">
-                          This project is built using both front-end and
-                          back-end technologies.
+                          {project.development}
                         </p>
                       </div>
                     </div>

public/images/TrolleGuy.png

@@ -2,11 +2,9 @@
   {
     "title": "Stellar Share",
     "description": "Community sharing app with a sci-fi theme",
-    "development": "This app was created in a group of 6 developers as our final group project for Dev Academy Aotearoa. It is a community item sharing / borrowing app with a fun sci-fi theme.",
-    "mainImage": "https://stellar-share-mania-roa-24.pushed.nz/images/Homepage/StelarShare.webp",
-    "additionalImages": [
-      "https://stellar-share-mania-roa-24.pushed.nz/images/Homepage/TrolleGuy.png"
-    ],
+    "development": "This app was created in a group of 6 developers as our final group project for Dev Academy Aotearoa. It is a community item sharing / borrowing app with a fun sci-fi theme and focus on the social aspects of the community.",
+    "mainImage": "images/StelarShare.webp",
+    "additionalImages": [ "images/TrolleGuy.png" ],
     "techStack": [
       { "name": "Tailwind CSS", "icon": "images/tailwind-css-2.svg" },
       { "name": "JavaScript", "icon": "faJs" },
@@ -15,6 +13,17 @@
       { "name": "SQLite", "icon": "faDatabase" },
       { "name": "Auth0", "icon": "images/auth0.svg" }
     ],
+    "objectives": [
+      "Project management and work coordination in a team of six",
+      "Fundamentals of Tailwind CSS and custom classes",
+      "CSS animations and transitions and other interactive effects",
+      "Using Auth0 as authentication provider",
+      "Protect parts of apps based on user roles",
+      "Managing Git workflows and pull-request reviews",
+      "Dokku deployment of full-stack applications",
+      "Practice with React and TypeScript",
+      "Conflict resolution and team communication"
+    ],
     "links": {
       "deployment": "https://stellar-share-mania-roa-24.pushed.nz/",
       "github": "https://github.com/manaia-roa-2024/stellar-share/"
@@ -23,7 +32,7 @@
   {
     "title": "Bird Collection",
     "description": "A Web application keeping a detailed list of birds observations.",
-    "development": "",
+    "development": "A two-person full-stack project. It contains node modules, SQLite database to store the bird data, routes, API requests, and React component using React Query. The app is a bird collection app that allows users to keep a detailed list of bird observations.",
     "mainImage": "images/birdCollection.jpg",
     "techStack": [
       { "name": "Tailwind CSS", "icon": "images/tailwind-css-2.svg" },
@@ -33,6 +42,13 @@
       { "name": "React Forms", "icon": "images/react-forms.png" },
       { "name": "SQLite", "icon": "faDatabase" }
     ],
+    "objectives": [
+      "Implementing a full-stack application using React, TypeScript, and SQLite",
+      "Learning about React Query, a library for managing, caching, and updating asynchronous data in React applications",
+      "Creating a responsive and user-friendly interface",
+      "Learning about error handling and error boundaries",
+      "Mastering React forms, hooks and context management with React Query"
+    ],
     "links": {
       "deployment": "http://delphym-mania-chc-24-birds-collection.devacademy.nz/",
       "github": "https://github.com/manaia-roa-2024/my-fullstack-collection/tree/daniel"
@@ -49,6 +65,12 @@
       { "name": "TypeScript", "icon": "images/typescript-svgrepo-com.svg" },
       { "name": "React", "icon": "faReact" }
     ],
+    "objectives": [
+      "Learning about React, TypeScript, and the Context API",
+      "Implementing a full-stack application using React, TypeScript, and a backend server",
+      "Learning about Knex.js – SQL query builder, Migration API (seedings, migrations)",
+      "Vitest – a test library for React"
+    ],
     "links": {
       "deployment": "N/A",
       "github": "https://github.com/manaia-roa-2024/group1"
@@ -57,22 +79,27 @@
     {
     "title": "Guess Country",
     "description": "A flag / country guessing game.",
-    "development": "This app was created in a group of 4 developers as a part of my study at Dev Academy Aotearoa. It is a flag guessing game containing all of the worlds flags (plus some extra obscure ones).",
+    "development": "This is a front end single page application. This app was created in a group of 4 developers as a part of my study at Dev Academy Aotearoa. It is a flag guessing game containing all of the worlds countries and territories.",
     "mainImage": "images/guessCountry.png",
     "techStack": [
       { "name": "CSS", "icon": "faCss" },
       { "name": "JavaScript", "icon": "faJs" },
       { "name": "TypeScript", "icon": "images/typescript-svgrepo-com.svg" },
       { "name": "React", "icon": "faReact" }
     ],
+    "objectives": [
+      "Learning about React, TypeScript",
+      "Implementing a front-end application using React, TypeScript, and client-side APIs",
+      "Learning about react-router-dom, expres and vite servers, vitest, and eslint"
+    ],
     "links": {
       "deployment": "http://the-a-team-guess-the-country.devacademy.nz/",
       "github": "https://github.com/manaia-roa-2024/guess-the-country"
     }
   },
   {
-    "title": "PokéAPI App",
-    "description": "Simple site that pulls pokemon info from the public Poke API",
+    "title": "Query 'em All App",
+    "description": "Simple site that pulls pokemon info from the public Poké API",
     "development": "This app was one of the first I built as a part of my study at Dev Academy Aotearoa. It is a simple app that pulls information on all pokemon from the publicly available poke API, and displays info on each one.",
     "mainImage": "images/poki-go.jpg",
     "techStack": [
@@ -81,6 +108,12 @@
       { "name": "TypeScript", "icon": "images/typescript-svgrepo-com.svg" },
       { "name": "React", "icon": "faReact" }
     ],
+    "objectives": [
+      "Learning about React, TypeScript",
+      "Implementing a front-end application using React, TypeScript, and client-side APIs",
+      "Learning about React Query, and how to consume public APIs",
+      "Learning about loading states and error handling"
+    ],
     "links": {
       "deployment": "http://delphym-mania-chc-24-pokemons.devacademy.nz/",
       "github": "https://github.com/manaia-roa-2024/query-em-all"
@@ -97,6 +130,12 @@
       { "name": "TypeScript", "icon": "images/typescript-svgrepo-com.svg" },
       { "name": "React", "icon": "faReact" }
     ],
+    "objectives": [
+      "Learning about React, TypeScript",
+      "Implementing a front-end application using React, TypeScript, and client-side APIs",
+      "Learning about React Query, and how to consume public APIs",
+      "Learning about loading states and error handling"
+    ],
     "links": {
       "deployment": "http://delphym-mania-chc-24-consuming-client-apis.devacademy.nz/",
       "github": "https://github.com/manaia-roa-2024/consuming-clientside-apis"

src/Sections/Projects/Projects.tsx

@@ -31,18 +31,18 @@ p {
 .nav-left {
   flex: 1;
   padding-left: 30px;
-  z-index: 1000; /* Add this line to ensure the nav bar stays on top */
+  z-index: 1000; /* To ensure the nav bar stays on top */
 }
 
 .nav-center {
   flex: 0 1 0;
-  z-index: 1000; /* Add this line to ensure the nav bar stays on top */
+  z-index: 1000; /* To ensure the nav bar stays on top */
 }
 
 .nav-right {
   flex: 1;
   padding-right: 30px;
-  z-index: 1000; /* Add this line to ensure the nav bar stays on top */
+  z-index: 1000; /* To ensure the nav bar stays on top */
 }
 
 section {
@@ -62,8 +62,10 @@ nav {
   left: 0;
   position: fixed;
   width: 100vw;
-  background-color: rgba(0, 0, 0, 0.1);
-  z-index: 999; /* Add this line to ensure the nav bar stays on top */
+  color: rgb(255, 218, 225);
+
+  background-color: rgba(29, 28, 78, 0.607);
+  z-index: 999; /* To ensure the nav bar stays on top */
 }
 
 .nav-tab {

src/data/projects.json

@@ -647,20 +647,20 @@ p {
   flex: 1;
   padding-left: 30px;
   z-index: 1000;
-  /* Add this line to ensure the nav bar stays on top */
+  /* To ensure the nav bar stays on top */
 }
 
 .nav-center {
   flex: 0 1 0;
   z-index: 1000;
-  /* Add this line to ensure the nav bar stays on top */
+  /* To ensure the nav bar stays on top */
 }
 
 .nav-right {
   flex: 1;
   padding-right: 30px;
   z-index: 1000;
-  /* Add this line to ensure the nav bar stays on top */
+  /* To ensure the nav bar stays on top */
 }
 
 section {
@@ -680,9 +680,10 @@ nav {
   left: 0;
   position: fixed;
   width: 100vw;
-  background-color: rgba(0, 0, 0, 0.1);
+  color: rgb(255, 218, 225);
+  background-color: rgba(29, 28, 78, 0.607);
   z-index: 999;
-  /* Add this line to ensure the nav bar stays on top */
+  /* To ensure the nav bar stays on top */
 }
 
 .nav-tab {