Added Face Detection App

package.json

@@ -20,7 +20,7 @@
   },
   "homepage": "https://github.com/cobiwave/simplefolio#readme",
   "devDependencies": {
-    "@parcel/transformer-sass": "^2.8.2",
+    "@parcel/transformer-sass": "^2.12.0",
     "parcel": "^2.8.2",
     "prettier": "^2.8.1"
   },

src/index.html

@@ -18,11 +18,14 @@
     <link rel="shortcut icon" type="image/png" href="assets/favicon.png" />
 
     <!-- Todo: put here your site title -->
-    <title>[Your name here] | Developer</title>
+    <title>Mohammed | Full-stack Dev.</title>
     <!-- Todo: add some coding keywords below - e.g: (javascript, yourusername, etc) -->
-    <meta name="keywords" content="[username], [name], skill" />
+    <meta
+      name="keywords"
+      content="[alhamami], [Mohammed Haider Fadhil], Back-end asp.net core, front-end React.js"
+    />
     <!-- Todo: improve your SEO by adding a small description of you -->
-    <meta name="description" content="[Your name here] | Developer" />
+    <meta name="description" content="[Mohammed Haider Fadhil] | Developer" />
 
     <link
       rel="stylesheet"
@@ -46,13 +49,13 @@
     <section id="hero" class="jumbotron">
       <div class="container">
         <h1 class="hero-title load-hidden">
-          Hi, my name is <span class="text-color-main">Your Name</span>
+          Hi, my name is <span class="text-color-main">Mohammed</span>
           <br />
-          I'm the Unknown Developer.
+          I'm the Full-stack Web Developer.
         </h1>
         <p class="hero-cta load-hidden">
           <a rel="noreferrer" class="cta-btn cta-btn--hero" href="#about"
-            >Know more</a
+            >Hire me</a
           >
         </p>
       </div>
@@ -79,11 +82,13 @@ <h2 class="section-title load-hidden">About me</h2>
           <div class="col-md-6 col-sm-12">
             <div class="about-wrapper__info load-hidden">
               <p class="about-wrapper__info-text">
-                This is where you can describe about yourself. The more you
-                describe about yourself, the more chances you have!
-              </p>
-              <p class="about-wrapper__info-text">
-                Extra Information about you! like hobbies and your goals.
+                I am a passionate self-learner with over 1.5 years of experience
+                in programming, focusing on back-end development. I have solved
+                100+ problems on LeetCode, showcasing my strong problem-solving
+                skills. I have built desktop application using the .NET
+                framework and SQL Server. Eager to transition into a
+                professional role, I am looking to start my career as a junior
+                ASP.NET Core developer.
               </p>
               <span class="d-flex mt-3">
                 <a
@@ -112,35 +117,42 @@ <h2 class="section-title dark-blue-text">Projects</h2>
           <div class="row">
             <div class="col-lg-4 col-sm-12">
               <div class="project-wrapper__text load-hidden">
-                <h3 class="project-wrapper__text-title">Project Title 0</h3>
+                <h3 class="project-wrapper__text-title">Robo_Family</h3>
                 <div>
                   <p class="mb-4">
-                    Describe the project being very specific, you can use the Twitter standard: no more than 280 characters: 
-                    complement the information: the skills learned or reinforced in its realization and how you faced it, 
-                    prove to be proactive in the search for solutions.
+                    This is first project in React, i built this web app using
+                    RCA, Tachyions for styling, then fetch the front-end with
+                    fake api using JSONPlaceholder. Also, i created components
+                    and container, adding Error Boundry component to log errors.
+                    I faced many difficulties, one of them how to update
+                    project's dependencies.
                   </p>
                 </div>
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn cta-btn--hero"
-                  href="#!"
+                  href="https://mohammedalhamami.github.io/Robo_Family/"
                 >
                   See Live
                 </a>
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn text-color-main"
-                  href="#!"
+                  href="https://github.com/Mohammedalhamami/Robo_Family"
                 >
                   Source Code
                 </a>
               </div>
             </div>
             <div class="col-lg-8 col-sm-12">
               <div class="project-wrapper__image load-hidden">
-                <a rel="noreferrer" href="#!" target="_blank">
+                <a
+                  rel="noreferrer"
+                  href="https://mohammedalhamami.github.io/Robo_Family/"
+                  target="_blank"
+                >
                   <div
                     data-tilt
                     data-tilt-max="4"
@@ -151,7 +163,7 @@ <h3 class="project-wrapper__text-title">Project Title 0</h3>
                     <img
                       alt="Project Image"
                       class="img-fluid"
-                      src="assets/project.jpg"
+                      src="assets/Robo_FamilyImg.jpeg"
                     />
                   </div>
                 </a>
@@ -164,35 +176,36 @@ <h3 class="project-wrapper__text-title">Project Title 0</h3>
           <div class="row">
             <div class="col-lg-4 col-sm-12">
               <div class="project-wrapper__text load-hidden">
-                <h3 class="project-wrapper__text-title">Project Title 1</h3>
+                <h3 class="project-wrapper__text-title">Face Detection App</h3>
                 <div>
                   <p class="mb-4">
-                    Demonstrate in this description the skills of a programmer: such as having commitment, 
-                    having perseverance and accepting alternative solutions. Remember that being a portfolio you are not selling the project, 
-                    you are selling yourself, it reflects the resources used: Frameworks, libraries, platforms, etc.
+                    In this simple project, I used different dependencies like @tsparticles/react to make the background full of life.
+                    Also, I used react-tilt a tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for ReactJS.
+                    Furthermore, I used the power of Tachyons to design register and sign-in form components, 
+                    Finally, I felt more comfortable dealing with and manipulating the designed components.
                   </p>
                 </div>
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn cta-btn--hero"
-                  href="#!"
+                  href="https://mohammedalhamami.github.io/Face-detecting-web-app/"
                 >
                   See Live
                 </a>
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn text-color-main"
-                  href="#!"
+                  href="https://github.com/Mohammedalhamami/Face-detecting-web-app"
                 >
                   Source Code
                 </a>
               </div>
             </div>
             <div class="col-lg-8 col-sm-12">
               <div class="project-wrapper__image load-hidden">
-                <a rel="noreferrer" href="#!" target="_blank">
+                <a rel="noreferrer" href="https://mohammedalhamami.github.io/Face-detecting-web-app/" target="_blank">
                   <div
                     data-tilt
                     data-tilt-max="4"
@@ -203,7 +216,7 @@ <h3 class="project-wrapper__text-title">Project Title 1</h3>
                     <img
                       alt="Project Image"
                       class="img-fluid"
-                      src="assets/project.jpg"
+                      src="assets/FRA.jpg"
                     />
                   </div>
                 </a>
@@ -219,8 +232,11 @@ <h3 class="project-wrapper__text-title">Project Title 1</h3>
                 <h3 class="project-wrapper__text-title">Project Title 2</h3>
                 <div>
                   <p class="mb-4">
-                    If the project was collaborative, reflect it in this description, that will demonstrate communication and/or leadership skills. 
-                    Additionally, if you made use of the mastery of a second language, it will reflect on you professionalism.
+                    If the project was collaborative, reflect it in this
+                    description, that will demonstrate communication and/or
+                    leadership skills. Additionally, if you made use of the
+                    mastery of a second language, it will reflect on you
+                    professionalism.
                   </p>
                 </div>
                 <a
@@ -272,12 +288,11 @@ <h3 class="project-wrapper__text-title">Project Title 2</h3>
       <div class="container">
         <h2 class="section-title">Contact</h2>
         <div class="contact-wrapper load-hidden">
-          <p class="contact-wrapper__text">[Put your call to action here]</p>
           <a
             rel="noreferrer"
             target="_blank"
             class="cta-btn cta-btn--resume"
-            href="mailto:[email protected]"
+            href="https://linktr.ee/m0hammami"
             >Call to Action</a
           >
         </div>
@@ -295,10 +310,18 @@ <h2 class="section-title">Contact</h2>
           <a rel="noreferrer" href="#!" target="_blank">
             <i class="fa fa-twitter fa-inverse"></i>
           </a>
-          <a rel="noreferrer" href="#!" target="_blank">
+          <a
+            rel="noreferrer"
+            href="https://www.linkedin.com/in/mhf99/"
+            target="_blank"
+          >
             <i class="fa fa-linkedin fa-inverse"></i>
           </a>
-          <a rel="noreferrer" href="#!" target="_blank">
+          <a
+            rel="noreferrer"
+            href="https://github.com/Mohammedalhamami"
+            target="_blank"
+          >
             <i class="fa fa-github fa-inverse"></i>
           </a>
         </div>
@@ -307,35 +330,16 @@ <h2 class="section-title">Contact</h2>
 
         <!-- Notice: if you want to give me some credit, it will be huge for me! if not, put your data on it -->
         <p class="footer__text">
-          © 2021 - Template developed by
-          <a rel="noreferrer" href="https://github.com/cobiwave" target="_blank"
-            >Jacobo Martínez</a
-          >
-        </p>
-
-        <!-- TO DO: remove this entire paragraph once you finish your portfolio -->
-        <p class="mt-3 pt-3">
+          © 2024 - Template developed by
           <a
             rel="noreferrer"
-            class="github-button"
-            href="https://github.com/cobiwave/simplefolio/fork"
-            data-icon="octicon-repo-forked"
-            data-size="large"
-            data-show-count="true"
-            aria-label="Fork ntkme/github-buttons on GitHub"
-            >Fork</a
-          >
-          <a
-            rel="noreferrer" 
-            class="github-button"
-            href="https://github.com/cobiwave/simplefolio"
-            data-icon="octicon-star"
-            data-size="large"
-            data-show-count="true"
-            aria-label="Star cobiwave/simplefolio on GitHub"
-            >Star</a
+            href="https://github.com/Mohammedalhamami/"
+            target="_blank"
+            >Mohammed H.</a
           >
         </p>
+
+        <!-- TO DO: remove this entire paragraph once you finish your portfolio -->
       </div>
     </footer>
     <!-- /END Footer Section -->

src/sass/abstracts/_variables.scss

@@ -1,6 +1,6 @@
 // COLORS
-$primary-color: #02aab0;
-$secondary-color: #00cdac;
+$primary-color: #7901c9;
+$secondary-color: #9772d1;
 
 $white-color: #fff;