fix(*): adj home screen

package.json

@@ -51,7 +51,7 @@
     "react-scripts": "4.0.3",
     "react-spring": "^8.0.27",
     "react-sticky-state": "^2.1.9",
-    "react-twitter-widgets": "^1.10.0",
+    "react-twitter-widgets": "^1.11.0",
     "serve-favicon": "^2.5.0",
     "slug": "^5.1.0",
     "slugify": "^1.6.0",

src/Components/Footer/Footer.css

@@ -19,6 +19,9 @@ footer p {
   color: #ccc;
   padding-bottom: 0px;
   margin-bottom: 8px;
+  display: flex;
+  gap: 4%;
+  align-items: center;
 }
 
 .mb10 {
@@ -49,6 +52,11 @@ footer p {
   text-decoration: none;
 }
 
+.copyright {
+  display: flex;
+  justify-content: center;
+}
+
 .fleft {
   float: left;
 }
@@ -63,6 +71,11 @@ footer p {
   padding: 0px;
 }
 
+.footer_ul2_amrc li {
+  display: flex;
+  align-items: baseline;
+}
+
 .footer_ul2_amrc li p {
   display: table;
 }
@@ -78,6 +91,11 @@ footer p {
 .bottom_border {
   border-bottom: 1px solid #323f45;
   padding-bottom: 20px;
+  width: 100%;
+}
+
+.social_footer_ul li a {
+  display: flex;
 }
 
 .foote_bottom_ul_amrc {

src/Components/Footer/Footer.jsx

@@ -156,7 +156,7 @@ const Footer = (props) => {
                 </li>
               </ul>
               {/* <!--foote_bottom_ul_amrc ends here--> */}
-              <p className="text-center">
+              <p className="copyright">
                 All Rights Reserved, &copy; {year} Hosea Codes
               </p>
               <SocialMediaTags />

src/Components/SocialMedia/SocialMedia.jsx

@@ -4,7 +4,6 @@ import TweeterTimeline from '../Twitter/Timeline';
 const SocialMedia = () => {
     return (<div style={{ background: '#1A1E23', margin: '0' }}>
         <TweeterTimeline />
-        {/* <Github login='hoseacodes' /> */}
     </div>
     )
 

src/Components/Technologies/Tech.jsx

@@ -30,33 +30,53 @@ class Tech extends Component {
         const imgSlide = {"AWS": AWS, "azure": Azure, "Architecture": Arch, 
         "firebase": Firebase, "github": Github, "gitlab": GitLab, "splunk": Splunk, "npm": NPM,
         "springboot": SpringBoot, "terraform": Terraform, "react": Reactt, "tailwind": Tailwind,
-        "DevOps": DevOps, "bootstrap": Bootstrap, "javascript": JS, "Django": Django, "mongodb": MongoDB, "nodejs": Node, "postgresql": postgresql, "python": Py, 
-        "swift": Swift,"jquery": JQuery, "java": 'https://i.imgur.com/wiEM1zo.png',"solidity": 'https://i.imgur.com/NhpXJN2.png'};
+        "DevOps": DevOps, "bootstrap": Bootstrap, "javascript": JS, "Django": Django, "mongodb": MongoDB,
+        "nodejs": Node, "postgresql": postgresql, "python": Py, 
+        "swift": Swift,"jquery": JQuery, "java": 'https://i.imgur.com/wiEM1zo.png',"solidity": 'https://i.imgur.com/NhpXJN2.png'
+        };
+        function getRandomObjectKeys(obj, count) {
+          const keys = Object.keys(obj);
+          const shuffledKeys = keys.sort(() => 0.5 - Math.random());
+          return shuffledKeys.slice(0, count);
+        }
+
+        const selectedObjects = getRandomObjectKeys(imgSlide, 14);
         return (
-            <>
-                <div className="tech-container">
-                    <h2
-                    data-aos="fade-down"
-                    data-aos-offset="500"
-                    data-aos-duration="3000"
-                    data-aos-easing="ease-in"
-                    className='tech-title'>Technologies</h2>
+          <>
+            <div className="tech-container">
+              <h2
+                data-aos="fade-down"
+                data-aos-offset="500"
+                data-aos-duration="3000"
+                data-aos-easing="ease-in"
+                className="tech-title"
+              >
+                Technologies
+              </h2>
 
-                    <div className="client-slider">
-                        <div className="client-slide-track">
-                            {Object.keys(imgSlide).map((img) => {
-                                return (
-                                    <div  className="client-slide" key={img}>
-                                        <img style={{width: "auto", height: "-webkit-fill-available"}} src={imgSlide[img]} height="50" width="150" alt={img} />
-                                    </div>
-                                )
-                            })}
-                        </div>
-                    </div>
+              <div className="client-slider">
+                <div className="client-slide-track">
+                  {selectedObjects.map((img) => {
+                    return (
+                      <div className="client-slide" key={img}>
+                        <img
+                          style={{
+                            width: "auto",
+                            height: "-webkit-fill-available",
+                          }}
+                          src={imgSlide[img]}
+                          height="50"
+                          width="150"
+                          alt={img}
+                        />
+                      </div>
+                    );
+                  })}
                 </div>
-
-            </>
-        )
+              </div>
+            </div>
+          </>
+        );
     }
 }
 

src/Components/Twitter/Timeline.jsx

@@ -1,20 +1,27 @@
 import React from 'react';
 import './Timeline.css'
-import { Timeline } from 'react-twitter-widgets';
+import { Timeline, Tweet } from 'react-twitter-widgets';
 
 const TweeterTimeline = () => {
     return (
-        <div className='twitter'
-            data-aos="fade-right"
-            data-aos-offset="600"
-            data-aos-easing="ease-in"
-            data-aos-duration="500"
-        >
-            <Timeline dataSource={{
-                sourceType: "profile", screenName: "DominiqueRHosea",
-            }}
-                options={{ theme: "dark", width: "600", height: "600" }} />
-        </div>
-    )
+      <div
+        className="twitter"
+        data-aos="fade-right"
+        data-aos-offset="600"
+        data-aos-easing="ease-in"
+        data-aos-duration="500"
+      >
+        <Timeline
+          dataSource={{ sourceType: "profile", screenName: "DominiqueRHosea" }}
+          options={{ theme: "dark", width: "400", height: "600" }}
+          renderError={(_err) => (
+            <Tweet
+              tweetId="1761258186055512516"
+              options={{ theme: "dark", width: "400", height: "600" }}
+            />
+          )}
+        />
+      </div>
+    );
 }
 export default TweeterTimeline;

src/Pages/Home/Home.css

@@ -17,10 +17,6 @@
   background-color: #1a1e23;
 }
 
-.socialmedia {
-  margin-bottom: 15rem;
-}
-
 .testimonies-group,
 .contact-group {
   background-color: rgb(35, 41, 47);

src/Pages/Projects/ProjectsData.jsx

@@ -1,3 +1,24 @@
+/*
+Projects: 
+WIP - POC - MVP - Dev - Staging - Prod
+Pure CSS - https://pure-css-chi.vercel.app/ - Prod
+User Management - https://user-management-iota.vercel.app/ - POC
+Social Ring - https://www.social-ring.com/ - Prod
+Kidvercity - https://www.kidvercity.com/ - MVP
+UI Heat - https://uiheat.com - POC
+LeadGen - https://acleadgeneration-d6957f321f1b.herokuapp.com/docs - POC
+SneakerAPI - https://sneaker-api-htx.herokuapp.com/ - POC
+CareerConnect - https://careerconnect-htx.herokuapp.com/ - POC
+Analytics - https://analytics-htx.herokuapp.com/ - Dev
+AI-Quiz - https://www.npmjs.com/package/ai-quiz - POC
+WriteMind - https://www.writemind.io/ - Dev
+CareerComposer - https://www.careercomposer.com/ - Dev
+- Add Diagrams
+- User Flows
+- Tech Stacks
+- Key Features
+- Pictures or Gifs of Key Features
+*/
 export const projectData = [
   {
     id: 1,