Merge pull request #11 from AAVision/dev

Code enhancements

README.md

@@ -1,14 +1,22 @@
-# Leabnon Stars
-
-![alt text](https://github.com/AAVision/lebanon-stars/blob/37063f85b391caeb19cf102b943da84cb5518a85/src/assets/images/logo-min.webp)
+# Leabnon Stars :star:
 
+**We're successful developers and software engineers from Lebanon who invented a bunch of success repositories in a place filled with obstacles and economic crises!**
 
+<p align="center">
+  <img src="https://github.com/AAVision/lebanon-stars/blob/37063f85b391caeb19cf102b943da84cb5518a85/src/assets/images/lebanon.svg" />
+</p>
 
 ## Used Technologies
 - Angular 17
 - Tailwind 3.4.1
 - DaisyUI 4.7.3
 
+## Development server :rocket:
+
+- Install Node version `21.5.0` using NVM or from Node's website.
+- Run `npm install` to install dependencies.
+- Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
 ## Docker :whale:
 
 You can run the solution using docker:
@@ -24,9 +32,6 @@ docker run -p 4201:4200 lebanon-star
 
 You can head to `localhost:4201` to access the application.
 
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
 ## Contribution :rotating_light:
 

package.json

@@ -31,6 +31,7 @@
     "@angular-devkit/build-angular": "^17.1.2",
     "@angular/cli": "^17.1.2",
     "@angular/compiler-cli": "^17.1.0",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@types/jasmine": "~5.1.0",
     "daisyui": "^4.7.3",
     "jasmine-core": "~5.1.0",

src/app/components/aboutus/aboutus.component.html

@@ -11,23 +11,26 @@ <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight">About Us!</
                 href="https://lb.linkedin.com/in/ali-alachkar-47b48a190" target="_blank">Ali Alachkar</a> and with the
             help of contributors using <a class="link" href="https://angular.io/" target="_blank">Angular 17</a>,
             <a class="link" href="https://tailwindcss.com/" target="_blank">Tailwind</a>, and <a class="link"
-                href="https://daisyui.com/" target="_blank">DaisyUI</a>. The main purpose of the project was to add all the Lebanese repos to be viewed by
+                href="https://daisyui.com/" target="_blank">DaisyUI</a>. The main purpose of the project was to add all
+            the Lebanese repos to be viewed by
             other developers, university students, or even recruiters!
         </p>
 
-        <p class="mt-3">
+        <p class="mt-3 mb-3">
             You can join us in our <b> Tech & Code</b> coummity.
         </p>
-        <div class="mockup-phone mt-6 border-accent">
-            <div class="camera"></div>
-            <div class="display">
-                <div class="artboard phone-1 community">
-                    <a href="https://chat.whatsapp.com/I6E9gk8Re1JDFuDkUfxxds" target="_blank">
-                        <img [defaultImage]="defaultImage" [lazyLoad]="'../../../assets/images/whatsapp-icon.webp'" class="mt-2 w-32 transform-gpu hover:scale-y-105 transition duration-500" alt="lebanon-stars-community-links">
-                    </a>
-                </div>
+
+        <div class="mockup-browser border border-base-300">
+            <div class="mockup-browser-toolbar">
+                <div class="input border border-base-300">https://chat.whatsapp.com/I6E9gk8Re1JDFuDkUfxxds</div>
+            </div>
+            <div class="community w-full flex justify-center px-4 py-16 border-t border-base-300">
+                <a href="https://chat.whatsapp.com/I6E9gk8Re1JDFuDkUfxxds" target="_blank">
+                    <img [defaultImage]="defaultImage" [lazyLoad]="'../../../assets/images/whatsapp-icon.webp'"
+                        class="mt-2 w-32 transform-gpu hover:scale-y-105 transition duration-500"
+                        alt="lebanon-stars-community-links">
+                </a>
             </div>
         </div>
-
     </div>
 </div>

src/app/components/aboutus/aboutus.component.scss

@@ -1,11 +1,6 @@
 .community{
     background-image: url('../../../assets/images/community.webp');
-    background-size: contain;
-    background-repeat: no-repeat;
+    background-size: initial;
+    // background-repeat: no-repeat;
     opacity: 0.4;
-    display: flex;
-    flex: none;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
 }

src/app/components/home/home.component.html

@@ -11,10 +11,9 @@
         </svg>
       </label>
     </form>
-
   </div>
 
-  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 lg:gap-4 sm:grid-cols-2 z-50">
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 lg:gap-4 sm:grid-cols-2 z-50 auto-rows-fr">
     @for(project of projects | filter:searchText | paginate: { itemsPerPage: 8, currentPage: pageNumber }; track
     project.id){
     <app-project [metadata]="project" (info)="receiveInfo($event)"></app-project>

src/app/components/home/home.component.ts

@@ -50,7 +50,7 @@ export class HomeComponent {
     this._projectService.getProjects().pipe(
       takeUntilDestroyed(),
       map((data: Project[]) => {
-        this.projects = data ? data : []
+        this.projects = this.shuffleArray(data)
       }),
       catchError((_) => {
         return of([])
@@ -182,5 +182,9 @@ export class HomeComponent {
     return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
   }
 
+  shuffleArray(array: Project[]): Project[]{
+    return array.sort(()=> Math.random() - 0.5)
+  }
+
 }
 

src/app/components/project/project.component.html

@@ -8,8 +8,8 @@
   </figure>
   <div class="card-body">
     <h2 class="card-title">{{metadata.name}}</h2>
-    <p>{{metadata.description}}</p>
-    <div class="card-actions justify-end">
+    <p  class="md:xl:lg:line-clamp-2 line-clamp-none">{{metadata.description}}</p>
+    <div class="card-actions justify-end pt-2">
       <button class="btn btn-neutral" (click)="shareInfo(metadata.name, metadata.url)">Check</button>
     </div>
   </div>

src/app/components/shared/footer/footer.component.html

@@ -1,6 +1,6 @@
-<footer class="footer footer-center p-4 text-base-content">
+<!-- <footer class="footer footer-center p-4 text-base-content">
   <aside>
     <p>Copyright © {{anio}} - All right reserved by <a class="link"
         href="https://lb.linkedin.com/in/ali-alachkar-47b48a190" target="_blank">Ali Alachkar</a></p>
   </aside>
-</footer>
+</footer> -->