From e30bc6f726c8173a4236dcc5d686ca6c3697df01 Mon Sep 17 00:00:00 2001 From: hosead6168 Date: Mon, 29 Nov 2021 09:26:40 -0600 Subject: [PATCH] fix(about): removed about css --- src/Pages/About/About.css | 242 -------------------------------------- src/Pages/About/About.jsx | 81 ++----------- 2 files changed, 11 insertions(+), 312 deletions(-) delete mode 100755 src/Pages/About/About.css diff --git a/src/Pages/About/About.css b/src/Pages/About/About.css deleted file mode 100755 index 038c554d..00000000 --- a/src/Pages/About/About.css +++ /dev/null @@ -1,242 +0,0 @@ -.about-img { - border-radius: 50%; -} -/* Quote */ -.quote { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - padding: 25px; - background-color: #fff; -} -q { - line-height: 2; - font-size: 1.8em; - width: 40%; - color: #000; -} - -.quoteAuthor { - margin-top: 30px; - color: #000; - font-size: 2rem; -} - -/* Quote End */ - -/* Logos */ -.imageHiglights { - display: flex; - flex-direction: row; - justify-content: space-evenly; -} -/* Logos End */ - -/*Timeline */ -.timeline { - position: relative; - background-color: #1a1e23; - overflow: hidden; - padding: 4% 0%; -} - -.timelineP { - line-height: 3rem; -} - -/* The timeline line */ -.timeline::after { - content: ""; - position: absolute; - width: 1%; - background-color: white; - top: 0; - bottom: 0; - left: 50%; -} - -/* Container around content */ -.about-container { - padding: 10px 40px; - position: relative; - background-color: inherit; - width: 100vw; -} -.left { - margin-left: 4rem; -} -*/ - /* Place the container to the left */ - .left { - left: 0%; -} - -/* Place the container to the right */ -.right { - left: 55%; -} - -/* The actual content */ -.content { - padding: 20px 30px; - background-color: white; - position: relative; - border-radius: 12px; - left: 0%; - width: 35.6vw; -} -/* About */ - -.a-content { - color: black; - width: 80%; - font-size: 1.5rem; - text-align: center; -} - -/* Media queries - Responsive timeline on screens less than 600px wide */ -@media only screen and (max-width: 480px) { - /* Quote */ - q { - line-height: 1; - font-size: 2.1em; - width: 80%; - } - .pQuote { - font-size: 1.4em; - } - /* Quote End */ - - /* Logo */ - .imageHiglights { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 0px; - } - .middleHightlights { - display: flex; - flex-direction: column; - align-items: center; - width: 90%; - line-height: 1; - margin-top: 20px; - } - .a-content { - color: black; - width: 100%; - font-size: 1.5rem; - text-align: center; - line-height: 30px; - } - - .middleHightlights h2 { - font-size: 2.1em; - text-align: center; - } - .breakdown { - width: 90%; - font-size: 1.2em; - } - .rightHighlights, - .leftHighlights { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - height: 60%; - } - /* Logo End */ - - /*Timeline */ - - .timeline { - margin: 0; - width: 100%; - } - - .timelineP { - font-size: 1.2em; - } - - /* The timeline line and bullet points */ - .timeline::after { - display: none; - } - - /* Container around content */ - .container { - padding: 10px 40px; - position: relative; - width: 100%; - } - - /* Place the container to the left */ - .left { - left: 0; - } - - /* Place the container to the right */ - .right { - left: 0%; - } - - /* Add arrows to the left container (pointing right) */ - .left::before, - .right::after, - .right::before { - display: none; - } - - .about-container::after { - display: none; - } - /* About */ - .about { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 0; - padding-top: 50px; - background-color: #1a1e23; - } - .about-container { - width: 80%; - } - - .aboutHeader { - font-size: 2.5rem; - margin-bottom: 10px; - text-align: center; - color: white; - } - .aboutImage { - width: 100%; - height: 50vh; - } - .aboutP { - font-size: 1.5rem; - color: white; - text-align: center; - } - .leftAbout { - margin: 0; - font-family: "Times New Roman", Times, serif; - line-height: 2; - } - .rightAbout { - opacity: 0.7; - margin: 0; - } - - .content { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } -} diff --git a/src/Pages/About/About.jsx b/src/Pages/About/About.jsx index b49c0596..99705e63 100755 --- a/src/Pages/About/About.jsx +++ b/src/Pages/About/About.jsx @@ -1,40 +1,10 @@ -//Tap into your -//professional story and your value proposition, and highlight -//what you do, why you do it, and how you do it. -//You can communicate how you became motivated to start a career -//in your desired industry, what drives you currently, -//the problems that you solve, and your current industry-related -//passions. There is no need to include extensive details or your -//whole life story in the “About Me” section. Stick to the what, -//why, and how of your professional story, and any personal -//information that impacted or informed your professional story. -//You can include some additional, brief details about your -//personal life in the “About Me” section, after you’ve detailed -//your professional story. You can include information about your -//interests, hobbies, pets, kids, partner, and geographic location. -//Including this information can help your audience connect with -//the person behind the work. It is important, however, to keep -//the personal details brief and not too personal. Remember that -//we want to cast the widest net when job searching. -//If you have another passion, particularly if that passion -//compliments the work that you will be doing in your desired -//industry, it’s also acceptable to include this information in -//your “About Me” section. For example, if you’re a UX designer, -//who also has a passion and talent for graphic design, you can -//include information about your graphic design skills, and -//include a link to your graphic design website. If you do -//include information about a secondary passion, be sure that your -//messaging around this interest is brief and doesn’t distract -//from your primary messaging around your career interest. - - import React from 'react'; -import './About.css'; import NavBar from '../../Components/NavBar/NavBar'; import HeroImage from '../../Components/Hero/heroImage'; import Footer from '../../Components/Footer/Footer'; import { StyledHr } from '../../Layout/Hr/styledHr'; - +import { StyledQuoteContainer, StyledQuote, StyledQuoteAuthor } from '../../Layout/Quote/styledQuote'; +import Timeline from '../../Components/Timeline/timeline'; const About = () => { return ( @@ -42,48 +12,19 @@ const About = () => { -
- - What you think, you become. What you feel, you attract. What you imagine, you create. - -

-Buddha

-
+ + + What you think, you become. What you feel, you attract. What you imagine, you create. + + + -Buddha + + {/* */} {/* */} -
-
-
-

2021

-

I secured my first position as a Full-Stack Java Software Engineer at State Farm in March of 2021. Working in a full agile software development process including mining technical business features and utilizing Java Spring Boot with Maven to create a REST micro-service applications.

-
-
-
-
-

2020

-

I enrolled as a full stack software engineer student at General Assembly, where I was exposed to the MERN stack. In the program I was able to turn my MIS knowledge into applicable real-world solutions. I developed several full stack web apps, and worked on dynamic team projects. The projects allowed me to hone my skills in frontend development, client-servers and routing, Node.js, Express.js, MongoDB, OAuth, SPA Architecture, React, Python, JavaScript and Django web framework.

-
-
-
-
-

2017

-

My attention to detail and love for technology lead me to seek a deep understanding in Management of Information Systems and dive back into software engineering. I received my Master of Science in Management Information Systems where I got a sound understanding of relational database, SQL, C#/C++, and business processes.

-
-
-
-
-

2014

-

After I received my Bachelor of Business Administration in Management with focus in supply chain, I got a job as an Operations Manager at J.B. Hunt. During this time identified underlying problems, analyzing potential solutions and implementing resolutions.

-
-
-
-
-

2010

-

In my junior year I decided to take Java and C++ as my elective course and my interest was peaked. I new I wanted to continue but I did not know how I wanted to proceed.

-
-
-
+ {/* */}