initial updates

AaronBnras · Oct 9, 2024 · a5ae890 · a5ae890
1 parent ac71c81
commit a5ae890
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@heroicons/react": "^2.1.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

diff --git a/public/styles.css b/public/styles.css
@@ -8,8 +8,8 @@
 }
 
 body{
-    background: rgb(30, 30, 30);
-    color: white;
+    background: white;
+    color:black;
     overflow: hidden;
     overflow-y: scroll;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import Navbar from './components/Navbar/navbar.js';
 import Intro from './components/Intro/intro.js';
+import Skills from './components/Skills/skills.js';
 
 function App() {
   return (
     <div className="App">
-      <Navbar/>
-      <Intro/>
+      <Navbar />
+      <Intro />
+      <Skills />
     </div>
   );
 }

diff --git a/src/components/Intro/intro.css b/src/components/Intro/intro.css
@@ -1,38 +1,41 @@
-#intro{
+#intro {
     height: calc(100vh - 5rem);
     width: 100vw;
     max-width: 95rem;
     margin: 0 auto;
     overflow: hidden;
     position: relative;
 }
-.bg{
+
+.bg {
     position: absolute;
     top: -1rem;
     z-index: -1;
     right: 0;
     object-fit: cover;
     height: 100vh;
 }
-.introContent{
+
+.introContent {
     height: 100vh;
     width: 100vw;
     padding: 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
-
 }
-.intropara{
+
+.intropara {
     max-width: 50rem !important;
     margin-top: 2rem !important;
     margin-bottom: 3rem !important;
 }
 
-.connect{
+.connect {
     margin-top: 5rem !important;
 }
-.btn{
+
+.btn {
     background-color: white;
     color: white;
     border: none !important;
@@ -42,24 +45,57 @@
     border-radius: 2rem;
     padding: 0rem 1rem;
 }
-.hello{
+
+.hello {
     margin: 0;
 }
-.social{
+
+.btntext {
+    margin: 0;
+}
+
+.social {
     display: flex;
     justify-content: space-between;
     max-width: 15rem !important;
-    margin-top: 1rem !important;;
+    margin-top: 1rem !important;
 }
 
-@media screen and (max-width:840px){
-    .bg{
-        right: inherit;
+/* Media query for smaller screens */
+@media only screen and (max-width: 968px) {
+    #intro {
+        height: auto;
+        max-width: 100vw;
     }
-    .introContent{
-        font-size: 10vw;
+
+    .introContent {
+        flex-direction: column;
+        align-items: center; 
+        padding: 1rem;
     }
-    .hello{
-        font-size: 4.5vw;
+
+    .intropara {
+        text-align: center;
+        margin-top: 1rem !important;
+        margin-bottom: 2rem !important;
     }
-}
+
+
+    .bg {
+        position: relative;
+        right: auto;
+        height: auto;
+        width: 100%;
+
+    }
+
+    .connect {
+        margin-top: 2rem !important;
+    }
+
+    .social {
+        justify-content: center;
+        max-width: 50rem !important;
+        justify-content: space-between;
+    }
+}
diff --git a/src/components/Intro/intro.js b/src/components/Intro/intro.js
@@ -1,6 +1,8 @@
 import React from "react";
 import { BriefcaseIcon } from "@heroicons/react/24/outline";
-import { FaGithub, FaTwitter, FaInstagram, FaWhatsapp, FaLinkedin, FaFacebook } from "react-icons/fa";
+import { FaGithub, FaInstagram, FaWhatsapp, FaLinkedin, FaFacebook } from "react-icons/fa";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSquareXTwitter, faSquareUpwork } from '@fortawesome/free-brands-svg-icons';
 import './intro.css';
 import bg from '../../assets/AronB.png'
 import { Link } from "react-scroll";
@@ -16,7 +18,7 @@ const Intro = () => {
                 <Link>
                     <button className="btn bg-gradient-to-r from-pink-500 to-primary">
                         <BriefcaseIcon className="h-6 w-6 icon" />
-                        <span>See My work</span>
+                        <span className="btntext">See My work</span>
                     </button>
                 </Link>
                 <div className="connect">
@@ -25,22 +27,25 @@ const Intro = () => {
                     </h2>
                     <div className="social">
                         <a href="https://github.com/AaronBnras" target="_blank" rel="noreferrer noopener" className="transition-transform duration-300 transform hover:scale-150">
-                            <FaGithub className="h-6 w-6 text-blue-300" />
+                            <FaGithub className="h-6 w-6 text-blue-400" />
                         </a>
                         <a href="https://m.facebook.com/aaron.maeda.7/" target="_blank" rel="noreferrer noopener" className="transition-transform duration-300 transform hover:scale-150">
-                            <FaFacebook className="h-6 w-6 text-blue-300" />
+                            <FaFacebook className="h-6 w-6 text-blue-400" />
                         </a>
                         <a href="https://www.instagram.com/aaronb_nras/profilecard/?igsh=anhnZ3VjdW1ncGd0" rel="noreferrer noopener" target="_blank" className="transition-transform duration-300 transform hover:scale-150">
-                            <FaInstagram className="h-6 w-6 text-blue-300 " />
+                            <FaInstagram className="h-6 w-6 text-blue-400 " />
                         </a>
                         <a href="https://wa.me/qr/6A2PPRR3CTT2L1" target="_blank" rel="noreferrer noopener" className="transition-transform duration-300 transform hover:scale-150">
-                            <FaWhatsapp className="h-6 w-6 text-blue-300" />
+                            <FaWhatsapp className="h-6 w-6 text-blue-400" />
                         </a>
                         <a href="https://www.linkedin.com/in/aaron-maeda-08a507286/" rel="noreferrer noopener" target="_blank" className="transition-transform duration-300 transform hover:scale-150">
-                            <FaLinkedin className="h-6 w-6 text-blue-300" />
+                            <FaLinkedin className="h-6 w-6 text-blue-400" />
                         </a>
                         <a href="https://x.com/AaronBnras?t=he2_L3Hsrjp_keMAri6N5A&s=09" rel="noreferrer noopener" target="_blank" className="transition-transform duration-300 transform hover:scale-150">
-                            <FaTwitter className="h-6 w-6 text-blue-300" />
+                            <FontAwesomeIcon icon={faSquareXTwitter} className="h-6 w-6 text-blue-400" />
+                        </a>
+                        <a href="https://www.upwork.com/freelancers/~0124c99594e97de01e?mp_source=share" rel="noreferrer noopener" target="_blank" className="transition-transform duration-300 transform hover:scale-150">
+                            <FontAwesomeIcon icon={faSquareUpwork} className="h-6 w-6 text-blue-400" />
                         </a>
                     </div>
                 </div>