Enhance Responsiveness and Accessibility with CSS Updates

Dockerfile

@@ -1,20 +1,16 @@
-FROM node:13.12.0-alpine
+FROM node:20.11-alpine
 
 # set working directory
 WORKDIR /app
 
-# add `/app/node_modules/.bin` to $PATH
-ENV PATH /app/node_modules/.bin:$PATH
-
 # install app dependencies
-COPY package.json ./
-COPY package-lock.json ./
-RUN npm install --silent
-RUN npm install 
-#[email protected] -g --silent
+COPY package.json package-lock.json ./
+RUN npm install
 
 # add app
 COPY . ./
 
+EXPOSE 3001
+
 # start app
 CMD ["npm", "start"]

README.md

@@ -259,6 +259,9 @@ This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE)
       <td align="center" valign="top" width="14.28%"><a href="http://vjspranav.dev"><img src="https://avatars.githubusercontent.com/u/17949836?v=4?s=100" width="100px;" alt="VJS Pranavasri"/><br /><sub><b>VJS Pranavasri</b></sub></a><br /><a href="https://github.com/ashutosh1919/masterPortfolio/commits?author=vjspranav" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://rahulkush1.github.io/"><img src="https://avatars.githubusercontent.com/u/90745824?v=4?s=100" width="100px;" alt="Rahul Kushwaha"/><br /><sub><b>Rahul Kushwaha</b></sub></a><br /><a href="https://github.com/ashutosh1919/masterPortfolio/commits?author=Rahulkush1" title="Code">💻</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Adamou02"><img src="https://avatars.githubusercontent.com/u/42783707?v=4?s=100" width="100px;" alt="Adam Bouhrara"/><br /><sub><b>Adam Bouhrara</b></sub></a><br /><a href="https://github.com/ashutosh1919/masterPortfolio/commits?author=Adamou02" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 

src/App.css

@@ -1,9 +1,11 @@
+/* App.css */
+
 .App {
   text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 40vh; /* Changed from vmin to vh for better responsiveness */
 }
 
 .App-header {
@@ -13,7 +15,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  font-size: clamp(
+    1rem,
+    calc(0.75rem + 1vw),
+    1.5rem
+  ); /* Changed from calc() to clamp() for better flexibility */
   color: white;
 }
 
@@ -33,13 +39,15 @@
 @keyframes fade_down {
   0% {
     opacity: 0.01;
-    transform: translateY(-20px);
+    transform: translateY(
+      -1.25rem
+    ); /* Changed from px to rem for better scaling */
     transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1),
       transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
   }
   100% {
     opacity: 1;
-    transform: translateY(0px);
+    transform: translateY(0);
     transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1),
       transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
   }
@@ -48,14 +56,22 @@
 @keyframes fade_up {
   0% {
     opacity: 0.01;
-    transform: translateY(20px);
+    transform: translateY(
+      1.25rem
+    ); /* Changed from px to rem for better scaling */
     transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1),
       transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
   }
   100% {
     opacity: 1;
-    transform: translateY(0px);
+    transform: translateY(0);
     transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1),
       transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 }
+
+/* Changes made:
+1. App-logo: Changed height from vmin to vh for better responsiveness across different screen sizes.
+2. App-header font-size: Replaced calc() with clamp() for improved flexibility and readability.
+3. Animations: Changed pixel values to rem units for better scaling with user's font size preferences.
+*/

src/assets/font-awesome/LICENSE.txt

@@ -0,0 +1,34 @@
+Font Awesome Free License
+-------------------------
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
+packaged as SVG and JS file types.
+
+# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+# Attribution
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**