Merge pull request #1 from roniy68/00-professional-review-1

🔥 00 professional review 1

package.json

@@ -17,6 +17,7 @@
     "maath": "^0.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.10.1",
     "react-router-dom": "^6.8.2",
     "react-tilt": "^0.1.4",
     "react-vertical-timeline-component": "^3.6.0",
@@ -31,4 +32,4 @@
     "tailwindcss": "^3.2.6",
     "vite": "^4.1.0"
   }
-}
+}

src/assets/index.js

@@ -30,7 +30,21 @@ import carrent from "./carrent.png";
 import jobit from "./jobit.png";
 import tripguide from "./tripguide.png";
 
+import drsight from "./drsight.png";
+import weabers from "./weabers-logo.png";
+import junction from "./junction.jpg";
+import microverse from "./microverse.png"
+
+import nextjs from "./tech/nextjs.png"
+import ror from "./tech/ror.png"
+
 export {
+  ror,
+  nextjs,
+  microverse,
+  junction,
+  weabers,
+  drsight,
   logo,
   backend,
   creator,

src/components/About.jsx

@@ -6,6 +6,7 @@ import { styles } from "../styles";
 import { services } from "../constants";
 import { SectionWrapper } from "../hoc";
 import { fadeIn, textVariant } from "../utils/motion";
+import Connections from "./Connections";
 
 const ServiceCard = ({ index, title, icon }) => (
   <Tilt className='xs:w-[250px] w-full'>
@@ -41,17 +42,25 @@ const About = () => {
       <motion.div variants={textVariant()}>
         <p className={styles.sectionSubText}>Introduction</p>
         <h2 className={styles.sectionHeadText}>Overview.</h2>
+        <div className=" flex flex-row justify-center items-center p-6">          <Connections />
+        </div>
       </motion.div>
 
       <motion.p
         variants={fadeIn("", "", 0.1, 1)}
         className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px]'
       >
         I'm a skilled software developer with experience in TypeScript and
-        JavaScript, and expertise in frameworks like React, Node.js, and
-        Three.js. I'm a quick learner and collaborate closely with clients to
+        JavaScript & Ruby. Expertise in frameworks like React/NextJS, Ruby On Rails, Node.js, and
+        Three.js. I have been working in the software industry for more than 7 years.
+        <br />
+        I'm a quick learner and collaborate closely with clients to
         create efficient, scalable, and user-friendly solutions that solve
         real-world problems. Let's work together to bring your ideas to life!
+        Strong adaptability,
+        collaborative skills, effective communication, pair programming experience, and
+        proven remote work capabilities contribute to comprehensive expertise.
+
       </motion.p>
 
       <div className='mt-20 flex flex-wrap gap-10'>

src/components/Connections.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { BsGithub, BsLinkedin, BsFacebook, BsInstagram } from 'react-icons/bs';
+import { FaTwitterSquare, FaAngellist } from 'react-icons/fa';
+
+const Connections = () => {
+    return (
+        <div className="flex gap-6 justify-center items-center">
+            <BsGithub className="cursor-pointer" onClick={() => window.open("https://github.com/roniy68", "_blank")} size={30} />
+            <BsLinkedin className="cursor-pointer" onClick={() => window.open("https://www.linkedin.com/in/ahroniy", "_blank")} size={30} />
+            <FaTwitterSquare className="cursor-pointer" onClick={() => window.open("https://twitter.com/ahroniy", "_blank")} size={35} />
+            <BsFacebook className="cursor-pointer" onClick={() => window.open("https://www.facebook.com/AHRoniy", "_blank")} size={30} />
+            <FaAngellist className="cursor-pointer" onClick={() => window.open("https://wellfound.com/u/ah-roniy", "_blank")} size={35} />
+            <BsInstagram className="cursor-pointer" onClick={() => window.open("https://www.instagram.com/ahroniy", "_blank")} size={30} />
+        </div>
+
+    )
+}
+
+export default Connections

src/components/Contact.jsx

@@ -7,6 +7,8 @@ import { EarthCanvas } from "./canvas";
 import { SectionWrapper } from "../hoc";
 import { slideIn } from "../utils/motion";
 
+import Connections from "./Connections";
+
 const Contact = () => {
   const formRef = useRef();
   const [form, setForm] = useState({
@@ -75,6 +77,8 @@ const Contact = () => {
         <p className={styles.sectionSubText}>Get in touch</p>
         <h3 className={styles.sectionHeadText}>Contact.</h3>
 
+        <Connections />
+
         <form
           ref={formRef}
           onSubmit={handleSubmit}

src/components/Experience.jsx

@@ -25,10 +25,12 @@ const ExperienceCard = ({ experience }) => {
       icon={
         <div className='flex justify-center items-center w-full h-full'>
           <img
+            onClick={() => window.open(experience.link, "_blank")}
             src={experience.icon}
             alt={experience.company_name}
-            className='w-[60%] h-[60%] object-contain'
+            className='w-[60%] h-[60%] object-contain cursor-pointer'
           />
+
         </div>
       }
     >

src/components/Hero.jsx

@@ -19,9 +19,14 @@ const Hero = () => {
             Hi, I'm <span className='text-[#915EFF]'>Roniy</span>
           </h1>
           <p className={`${styles.heroSubText} mt-2 text-white-100`}>
+            <div className="bg-rose-500 hover:bg-rose-900 cursor-pointer rounded-lg flex justify-center">
+              A Full Stack Developer <br />
+            </div>
             I develop 3D visuals, user <br className='sm:block hidden' />
             interfaces and web applications
           </p>
+
+
         </div>
       </div>
 

src/components/Navbar.jsx

@@ -5,6 +5,7 @@ import { styles } from "../styles";
 import { navLinks } from "../constants";
 import { logo, menu, close } from "../assets";
 
+
 const Navbar = () => {
   const [active, setActive] = useState("");
   const [toggle, setToggle] = useState(false);
@@ -55,7 +56,11 @@ const Navbar = () => {
                 } hover:text-white text-[18px] font-medium cursor-pointer`}
               onClick={() => setActive(nav.title)}
             >
-              <a href={`#${nav.id}`}>{nav.title}</a>
+              {
+                nav.id === "resume" ?
+                  <a href="https://drive.google.com/file/d/1mgEuCu4Y1v8upuQ6oISCSeyG7_kp5KdD/view?usp=sharing" target="_blank">{nav.title}</a> :
+                  <a href={`#${nav.id}`}>{nav.title}</a>
+              }
             </li>
           ))}
         </ul>

src/components/Works.jsx

@@ -15,9 +15,10 @@ const ProjectCard = ({
   tags,
   image,
   source_code_link,
+  live_link
 }) => {
   return (
-    <motion.div variants={fadeIn("up", "spring", index * 0.5, 0.75)}>
+    <motion.div onClick={() => window.open(live_link, "_blank")} variants={fadeIn("up", "spring", index * 0.5, 0.75)}>
       <Tilt
         options={{
           max: 45,
@@ -90,6 +91,7 @@ const Works = () => {
 
       <div className='mt-20 flex flex-wrap gap-7'>
         {projects.map((project, index) => (
+
           <ProjectCard key={`project-${index}`} index={index} {...project} />
         ))}
       </div>