Add astrobuild project

_projects/astrobuild.mdx

@@ -0,0 +1,66 @@
+---
+title: 'Astrobuild'
+description: 'Prototype of a collaboration tool between stakeholders for building software projects'
+date: '2023-06-11'
+demo: 'https://astrobuild.vercel.app'
+code: 'https://github.com/hazemKrimi/astrobuild'
+tags: ['react', 'typescript', 'graphql', 'styled-components', 'apollographql', 'vite', 'react-flow']
+---
+
+# Introduction
+
+This was my final year of studies projects where my collegue and I worked on a prototype for a project building solution for the agency we had an internship in called [Astrolab](https://astrolab-agency.com).
+As there were lockdowns in Tunisia in 2020/2021 because of covid software agencies and clients could not have in person meetings to discuss a client's software project.
+So the idea of Astrobuild is to reduce meetings and make the client participate with other stakeholders in the process of creating a software project by tracking and communicating with their associated product owner.
+
+# Features
+
+### Client
+  - Account management
+  - Project creation from choosing the templates, features and deliverables (Specification, design, MVP or full build)
+  - Project tracking
+  - Chat with associated product owner for tracking and support
+  - Payment (WIP)
+
+### Product Owner
+  - Account management
+  - Management of templates
+  - Review of projects and transferring deliverables
+  - Chat with clients on their projects
+
+### Developer
+  - Account management
+  - Features, categories and wireframes management
+
+### Admin
+  - Identity and access management (WIP)
+
+# Technologies Used
+The frontend project is a [React](https://react.dev) application with [TypeScript](https://www.typescriptlang.org) which consumes a set of [GraphQL](https://graphql.org) APIs using [Apollo GraphQL](https://www.apollographql.com) and a some REST APIs.
+
+A small components library with a custom theme was made for this project using [Styled Components](https://styled-components.com) which can be viewed at the components folder.
+
+The prototyping feature was done using [React Flow](https://reactflow.dev) which is a library for creating and interacting with diagrams.
+
+To view the full architecture of the application go [here](https://github.com/MedAmineFouzai/astrobuild-api/blob/main/README.md).
+
+# Screenshots
+
+### Project page for the client
+![Project](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/project.png?raw=true)
+
+### Template page for the product owner
+![Template](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/template.png?raw=true)
+
+### Prototype page for the developer
+![Prototype](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/prototype.png?raw=true)
+
+### Support page for the product owner
+![Support](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/support.png?raw=true)
+
+### User editing page for the admin
+![Admin](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/admin.png?raw=true)
+
+# Credits
+
+- Mohamed Amine Fouzai: [GitHub](https://github.com/MedAmineFouzai), [LinkedIn](https://www.linkedin.com/in/amine-fouzai)

components/GlobalStyles.tsx

@@ -5,31 +5,31 @@ const GlobalStyles = createGlobalStyle`
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-		font-family: 'Source Code Pro', monospace;
-		font-size: 16px;
-		line-height: 1.5;
-		outline: none;
-		user-select: text;
-		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+	font-family: 'Source Code Pro', monospace;
+	font-size: 16px;
+	line-height: 1.5;
+	outline: none;
+	user-select: text;
+	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 	
-		@media(max-width: 768px) {
-			overflow-x: scroll;
-		}
+	@media(max-width: 768px) {
+		overflow-x: scroll;
+	}
 
-		&::-webkit-scrollbar {
-			width: 0;
-			height: 0; 
-			background: transparent; 
-		}
+	&::-webkit-scrollbar {
+		width: 0;
+		height: 0; 
+		background: transparent; 
+	}
 
-		&::-webkit-scrollbar-thumb {
-			background: transparent;
-		}
+	&::-webkit-scrollbar-thumb {
+		background: transparent;
+	}
 
-		&::selection {
-			background: var(--text);
-			color: var(--background);
-		}
+	&::selection {
+		background: var(--text);
+		color: var(--background);
+	}
   }
 
 	html {
@@ -67,10 +67,6 @@ const GlobalStyles = createGlobalStyle`
 	body::-webkit-scrollbar-thumb {
 		background-color: var(--text) !important;
 	}
-
-	a {
-		text-decoration: none;
-	}
 `;
 
 export default GlobalStyles;

utils/projects.ts

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
 
-const projects = path.join(process.cwd(), '_portfolio');
+const projects = path.join(process.cwd(), '_projects');
 
 export const getProjects = () => {
 	try {
@@ -10,7 +10,7 @@ export const getProjects = () => {
 
 		if (!fileNames) return [];
 
-		const allPortfolioProjectsData = fileNames.map(filename => {
+		const allProjectsData = fileNames.map(filename => {
 			const slug = filename.replace('.mdx', '');
 
 			const fullPath = path.join(projects, filename);
@@ -31,7 +31,7 @@ export const getProjects = () => {
 			};
 		});
 
-		return allPortfolioProjectsData.sort((a, b) => {
+		return allProjectsData.sort((a, b) => {
 			if (new Date(a.date) < new Date(b.date)) {
 				return 1;
 			} else {