Merge branch 'Feature/Updated_About_Me'

src/components/About.js

@@ -26,14 +26,6 @@ class About extends React.Component {
           JSX is a part of react which makes it easy to design websites directly in javascript code.
         </Card>
 
-        <Card title="College Experience" image="https://upload.wikimedia.org/wikipedia/en/thumb/4/4b/Marist_College_Seal_-_Vector.svg/1200px-Marist_College_Seal_-_Vector.svg.png">
-          Throughout my college experience I've been able to improve my understanding of how computers work and how to design different software.
-          I have completed my A.S. degree from Orange County Community College in Computer Science. In the past 2 years I've been working towards my
-          Bachelors degree in computer science at Marist College in Poughkeepsie. Throughout my college experience I've been able to work with others in
-          teams and I am currently as of the Fall 2021 Semester been working on a team for a Capstone Project which I can hopefully list on this website
-          at the end of this semester.
-        </Card>
-
         <Card title="Camerin Figueroa" image="/img/profile.webp">
           You can find a few of my projects on my
           <a href="https://github.com/RaspberryProgramming" target="_blank" rel="noreferrer"> Github</a> or look through a list of projects on this website
@@ -41,9 +33,52 @@ class About extends React.Component {
           social media below, just click the image and it'll bring you to the selected website.
         </Card>
 
-        <Card title="Github"link="/github">
+        <Card
+          title="CTECH - Networking"
+          image="https://upload.wikimedia.org/wikipedia/en/thumb/4/4b/Marist_College_Seal_-_Vector.svg/1200px-Marist_College_Seal_-_Vector.svg.png"
+          skills={["Cisco IOS", "Linux", "Python", "Cyber Security"]}>
+          During highschool, I had the ability to take classes at CTECH. I took the networking class that not only allowed me to learn about the in class material, but also
+          enabled me to learn outside of what I would normally have. We took the CCNA1 and CCNA2 courses which taught me a lot about cisco networking devices, as
+          well as the Cisco IOS Operating System. I was also able to take part in a few different competitions such as the Cisco Netriders (Discontinued) competition,
+          AFA run Cyber Patriot competition, and the Skills USA compeition. 
+        </Card>
+
+        <Card
+          title="Orange County Community College - Computer Science"
+          image="https://upload.wikimedia.org/wikipedia/en/thumb/4/4b/Marist_College_Seal_-_Vector.svg/1200px-Marist_College_Seal_-_Vector.svg.png"
+          skills={["C++", "Java", "React", "Javascript", "Assembly", "Data Structors & Algorithms"]}>
+          Taking classes at OCCC helped shape my career. While at OCCC, I took classes where I learned C++, Java, Datastructors, Assembly and more. I also took part in the
+          Computer Science Club, Outdoors Club, and various other activities.
+        </Card>
+
+        <Card
+          title="Marist College Experience - Computer Science"
+          image="https://upload.wikimedia.org/wikipedia/en/thumb/4/4b/Marist_College_Seal_-_Vector.svg/1200px-Marist_College_Seal_-_Vector.svg.png"
+          skills={["PHP", "Haskell", "Git", "Data Structors & Algorithms", "Arduino", "Robotics", "Docker", "6502 Assembly"]}>
+          Throughout my college experience I've been able to improve my understanding of how computers work and how to design different software.
+          I have completed my A.S. degree from Orange County Community College in Computer Science. In the past 2 years I've been working towards my
+          Bachelors degree in computer science at Marist College in Poughkeepsie. Throughout my college experience I've been able to work with others in
+          teams and I am currently as of the Fall 2021 Semester been working on a team for a Capstone Project which I can hopefully list on this website
+          at the end of this semester.
+        </Card>
+
+        <Card
+          title="TRMI (Current Employer)"
+          image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADgCAMAAAAt85rTAAAAkFBMVEX///+foaQAbLYAYrGex+Nyq9aanJ8AZLK3uLqhoqX29/amqKsAZrMAarX5/P3HyMqvsbTt7e4xhMLT1dZMlsvo8fgZd7zk5OWUv+DO4/FCjcdens8AWKxrpdPa29yztLeZxeKw0Oi/wcO71+uOu96Ctdrd6/URdLrv9vs2iMV4sNfR5fIAXq/B2+0Ydruy0ug2notqAAAEvElEQVR4nO2baXeyOhRGGRQcCIpTiyNqa21r2///7y5TQiYVffVq1nr2N8kBsw1mIAfLAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKA2nWWrYrXMDkWrYV7S6uURm1UV0Ht5YFWvIhy22hVebhZ5uVmn3cpD+nYV0O9FD6zsFUQrz7Mr9IJchOd1lw+s7sVEXV6vhmCmaJBhR/KrI5gGGWMY9aSq1xTshw+s9CUM5QasJ2hOE7ZsmZqCmwdW+hJW1wquHljpS7hW0O52HljrC4AgBJ8cCNYTDBtJ4zRJnMXFJ8KSdTyurvjDRyZ/mqrvhIitxV8/Wd9YcOwc/NPMF1ncYn48wg2cySymV5zNhaLYUhjxEfOpxV//MKEzrVsJTohzGreZxTXdEyGEBG7wVl5RjHRnit824L/SHQlnBYNnFMwl3bVOkBC5CcNPX7i8KYJOMNlrBFMBaXbfkMtNEXT8tU7Qcdf891nhwBeLzRF037WC/lRowoYvnXVvQcdlHVoQsK8NAqkXZdUmfsD1gdkH+gv5YlWra/FNOJ4EYum9BcM1NybNyl+XfLxyR2O+AmQiDYKvI1pjWZCKB4N99X3vcum9BQUSZqEs+2kF/E/lLGooCZIP5vDGYse/hJY+QvCVCY7lIrUC1c/iawX9xWdpTvtXi79/30t/AwRj/S3qvrMRnTVhTOiR2bdjjOC69JAFm9aU3a27InRGGzCId08rqJz1Re9JRXBL+59iqLG+WQM203Z/VsFQZN+gHaI0DmZSM6EJwxH96OyeVpB8TEUm9I9GZ528IPefS0v+6JDpfllPK5hWIZ0QVLBhnhyaYmR+W7LTgh8rnJbdbd6rPq+gHhI0Q43g+LcaJP/KtiZ+YhknSAZrObLoWOggSUiDDot+vsQ1TdAZvGoF2eKBsMlZseowTDCt2eFNJ6isHuga/2kFiSvAOhkn+B3rBK2RaEg72ysE7XyDennvYWImwoYJx020gj/i+shfWFcKekXNh6Lg5saCympi36Qt5H9pBav5WS7wMb5aML9DrVYp2C0aNGrLhreei+4H+uUSE9yx7sVh053LBb3CK9vYLgVL4aUtZCrQhr6dIPuTHROsFrn84ve8oMdhd1flxu3QY4L9wiTadNt87P8vuK8eU7gNevCsYPTCEbGjbZvdomUTpmOREHsiG+hOguy6/AOos4JawrTTZIK2fWlm070E6bNeks5I/0mw00r/bpWgd6nhG90gcBRBde+AMZ0Luwx0b2K+qELWh/zZ3XxUHYpd9/TehIaXfNDjWtCzh8ejNXzTLZ6G+lxC2f1hbGlRsU9Ed5cS7pl9WD6C4363/bndJVWvZ+fdJSeYpcUsTcmLkRH6jeVm07fL0UAQzPLTNpueEGyIcd+TYAOdIJgpirSN3eE9InjBVO2pgOCxYlMyndRctZqCpuSqqdmGNQVNyTZU80VrCZqTL6pm/NYTNKUBLTVnu4agUTnbStb9WUHTsu7l9ybo6xNUUCkx7r0J6c0X+gJM8ebLRi0x780XAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEbzH2yahtDw6DjLAAAAAElFTkSuQmCC"
+          skills={["C#", "ASP.NET MVC", "Entity Framework", "MSSQL", "Microsoft Message Queuing", "Angular", "Typescript", "Oracle SQL", "Various Credit Payment API's"]}>
+            Working as a Full Stack Software Developer at a toll collection systems company. Here I work as a Full Stack Software Developer on the company's
+            management software, as well as their payment software. In addition, I work on older systems for support. This has exposed me to all sorts of current
+            and legacy designs of software. Throughout my time at TRMI, Inc. I have been able to learn a lot as well as make learn how to bring new employees up
+            to speed so they can also work on the software.
+        </Card>
+
+        <Card
+            title="Github"
+            link="/github"
+            skills={["Tensorflow", "Redis", "React", "Python", "Raspberry Pi", "Linux"]}>
             <p>You can access a list of github repositories that I've created directly on this site.</p>
             <Link className='btn' to='/github'>Learn More</Link>
+            <br/>
         </Card>
 
 
@@ -64,16 +99,18 @@ class About extends React.Component {
               <img src="/img/linkedin.webp" alt="LinkedIn"/>
             </a>
 
-            <a href="https://www.hackerrank.com/figueroa0609" target="_blank" rel="noreferrer" className="link">
+            <a href="https://www.hackerrank.com/figueroa0609" target="_blank" rel="noreferrer" className="link bg-hackerrank ">
               <img src="/img/hackerrank.webp" alt="Hacker Rank"/>
             </a>
             <a href="https://app.hackthebox.eu/profile/734741" target="_blank" rel="noreferrer" className="link bg-white">
               <img src="/img/hackthebox.webp" alt="Hack The Box"/>
             </a>
-            <a href="https://www.udemy.com/user/camerin-figueroa/" target="_blank" rel="noreferrer" className="link">
+            <a href="https://www.udemy.com/user/camerin-figueroa/" target="_blank" rel="noreferrer" className="link bg-white">
               <img src="/img/udemy.webp" alt="Udemy"/>
             </a>
-
+            <a href="https://leetcode.com/RaspberryProgramming/" target="_blank" rel="noreferrer" className="link bg-black">
+              <img src="/img/leetcode_logo.webp" alt="leet code"/>
+            </a>
           </div>
 
         </div>

src/components/css/About.css

@@ -46,8 +46,7 @@
     margin: 10px;
 }
 
-.About .link.bg-white {
+.About .link {
-    background-color: white;
     border-radius: 5px;
     display:flex;
     height: 10rem;
@@ -57,6 +56,18 @@
     margin: 5px;
 }
 
+.About .link.bg-white {
+    background-color: white;
+    
+}
+
+.About .link.bg-black{
+    background-color: black;
+}
+
+.About .link.bg-hackerrank {
+    background-color: rgb(14, 20, 25);
+}
 
 @media only screen and (max-width: 600px) {
     .About .links .link img {

src/components/css/Card.css

@@ -36,6 +36,39 @@
     background-color: #FAFAFF
 }
 
+.card .skill-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+}
+
+.card .skills-label {
+    display:flex;
+    align-items: center;
+    font-size: larger;
+}
+
+.card .skills {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
+    padding: 5px;
+    width: 100%;
+}
+
+.card .skill {
+    padding: 5px;
+    margin: 2px;
+    margin-left: 5px;
+    border-radius: 10px;
+    background-color: #756B6A;
+    color: #DAD4DF;
+    font-size: medium;
+}
+
 @media only screen and (max-width: 600px) {
 
     .card {

src/components/subcomponents/Card.js

@@ -28,6 +28,17 @@ const Card = (props) => {
                 <div className="content-box">
                     {props.children}
                 </div>
+                {
+                    props.skills &&
+                    <div className="skill-row">
+                        <div className="skills-label">Skills:</div>
+                        <div className="skills">
+                        {
+                            props.skills?props.skills.map(language=><div className="skill" key={language}>{language}</div>):""
+                        }
+                        </div>
+                    </div>
+                }
             </div>
             <img className={props.image ? "show" : ""} src={props.image} alt={props.title}/>
         </div>