Merge pull request #1 from jbrennan414/v2

V2
jbrennan414 · Dec 5, 2024 · 7157c3c · 7157c3c
2 parents 5834f5a + 5ed97fc
commit 7157c3c
Show file tree

Hide file tree

Showing 15 changed files with 300 additions and 327 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,187 +1,92 @@
-/* DEFAULT STYLES */
-/* https://www.canva.com/learn/website-color-schemes/  #5*/
-html {
-  margin: 4em;
-}
-
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+  height: 100vh;
+  margin: 0;
+  background: rgb(18,18,18);
+  background: linear-gradient(100deg, rgba(18,18,18,1) 78%, rgba(9,71,136,1) 91%, rgba(0,123,255,1) 100%);
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
   color: white;
+  padding: 5%;
+  font-family: Arial, sans-serif;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+@font-face {
+  font-family: "Montserrat";   /*Can be any text*/
+  src: local("Montserrat-Regular"),
+    url("./fonts/Montserrat-Regular.ttf") format("truetype");
 }
 
-@media screen and (min-width: 500px) {
-  #icons {
-    position:absolute;
-  }
+@font-face { 
+  font-family: "Roboto";
+  src: local("RobotoSlab-Regular"),
+    url("./fonts/RobotoSlab-Regular.ttf") format("truetype");
 }
 
-.github:hover {
-  filter: brightness(0%);
+@font-face { 
+  font-family: "OpenSans";
+  src: local("OpenSans-Regular"),
+    url("./fonts/OpenSans-Regular.ttf") format("truetype");
 }
 
-.youtube:hover {
-  filter: brightness(0%);
+@font-face { 
+  font-family: "Lato";
+  src: local("Lato-Regular"),
+    url("./fonts/Lato-Regular.ttf") format("truetype");
 }
 
-.youtube {
-  margin-right: 10px;
+h1 {
+  font-size: 64px;
+  font-family: "Montserrat";
 }
 
-.icons a:hover {
-  border: 1px solid black;
+h3 {
+  font-size: 24px;
+  font-family: "Roboto";
 }
 
-/* HEADER */
-.header {
-  text-align: center;
-  font-family: 'Raleway', sans-serif;
-  color: gray;
+h5 {
+  font-size: 16px;
+  font-family: "OpenSans";
 }
 
-.header:not(:first-child) { 
-  margin-top: 5em;
-}
-
-.githubLogo{
-  display:flex;
-  justify-content: flex-end;
-  color:gray
-}
-
-#githubLogo:hover{
-  color: white;
-}
-
-.firstHeader {
-  text-align: center;
-  display:flex;
-  align-items:center;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  font-family: 'Raleway', sans-serif;
-  color: gray;
-}
-
-#icons {
-  right: 4em;
-}
-
-a {
-  text-decoration: none;
-  color: inherit
+h6 {
+  font-size: 14px;
+  font-family: "Lato";
 }
 
-.bio{
+.contact-me {
   display: flex;
-  justify-content: center;
   flex-direction: row;
-  flex-wrap:wrap;
-  align-items: center;
-}
-
-.bio p {
-  margin-left: 2em;
-  color: gray;
-  font-family: 'Raleway', sans-serif;
-}
-
-.projectCard {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border-radius:10px;
-  width: 400px;
-  margin: 10px;
-  padding: 1em;
-  box-shadow: #61dafb;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  text-align: center;
 }
 
-.projectsContainer {
+.project {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.contactIcons {
-  float: right;
-}
-
-.dependencies-used {
-  margin:0 1em;
-  overflow: hidden;
-  flex-shrink: 3;
-  justify-content: center;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
 }
 
-.ribbon {
-  margin: 0;
-  padding: 0;
-  background: rgb(223, 17, 17);
-  color:white;
-  padding:1em 0;
-  /* position: absolute; */
-  top:0;
-  right:0;
-  transform: translateX(57%) translateY(-261%) rotate(45deg);
-  transform-origin: top left;
-}
-.ribbon:before,
-.ribbon:after {
-  content: '';
-  position: absolute;
-  top:0;
-  margin: 0 -1px; /* tweak */
-  width: 100%;
-  height: 100%;
-  background: rgb(223, 17, 17);
-}
-.ribbon:before {
-  right:100%;
+a {
+  padding: 10px;
+  color: white;
 }
 
-.ribbon:after {
-  left:100%;
+.my-title {
+  font-family: "Roboto";
+  font-size: 14px;
+  color: white;
 }
 
-.how-to-find {
-  display: flex;
-  justify-content: flex-end;
+.date { 
+  white-space: nowrap;
+  font-family: "Roboto";
+  font-size: 14px;
+  color: #7D8D9D;
+  padding: 10px;
 }
 
-.resources-utilized {
-  display: flex;
-  justify-content: center;
-  flex-shrink: 3;
+.job-description {
+  color: #7D8D9D;
+  font-family: "Roboto";
+  font-size: 12px;
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,16 +1,14 @@
 import { useState } from 'react'
 import './App.css'
-import Header from './components/Header'
-import ContentContainer from './components/ContentContainer'
+import RightSection from './components/RightSection'
+import LeftSection from './components/LeftSection'
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <Header />
-      <ContentContainer />
-    </>
+    <div className="App">
+      <LeftSection />
+      <RightSection />
+    </div>
   )
 }
 

diff --git a/src/assets/img/ski-bunks.jpg b/src/assets/img/ski-bunks.jpg
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -13,11 +13,8 @@ export default function Header() {
                 <h4>fullstack developer</h4>
             </div>
             <div id="icons">
-                <a href={"https://github.com/jbrennan414"}><GitHubIcon /></a>
                 <a href={"https://twitter.com/jbrennan414"}><TwitterIcon /></a>
                 <br />
-                <a href={"https://www.linkedin.com/in/jbrennan414/"}><LinkedInIcon /></a>
-                <a href="mailto:[email protected]"><EmailIcon /></a>
             </div>
         </div>  
     )

diff --git a/src/components/LeftSection.css b/src/components/LeftSection.css
@@ -0,0 +1,88 @@
+  @font-face {
+    font-family: "Montserrat";   /*Can be any text*/
+    src: local("Montserrat-Regular"),
+      url("./fonts/Montserrat-Regular.ttf") format("truetype");
+  }
+
+  @font-face { 
+    font-family: "Roboto";
+    src: local("RobotoSlab-Regular"),
+      url("./fonts/RobotoSlab-Regular.ttf") format("truetype");
+  }
+
+  @font-face { 
+    font-family: "OpenSans";
+    src: local("OpenSans-Regular"),
+      url("./fonts/OpenSans-Regular.ttf") format("truetype");
+  }
+
+  @font-face { 
+    font-family: "Lato";
+    src: local("Lato-Regular"),
+      url("./fonts/Lato-Regular.ttf") format("truetype");
+  }
+
+  .left-section {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 80%;
+  }
+
+  h1 {
+    font-size: 64px;
+    font-family: "Montserrat";
+  }
+
+  h3 {
+    font-size: 24px;
+    font-family: "Roboto";
+  }
+
+  h5 {
+    font-size: 16px;
+    font-family: "OpenSans";
+  }
+
+  h6 {
+    font-size: 14px;
+    font-family: "Lato";
+  }
+
+  .contact-me {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .project {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  a {
+    padding: 10px;
+    color: white;
+  }
+
+  .my-title {
+    font-family: "Roboto";
+    font-size: 14px;
+    color: white;
+  }
+
+  .date { 
+    white-space: nowrap;
+    font-family: "Roboto";
+    font-size: 14px;
+    color: #7D8D9D;
+    padding: 10px;
+  }
+
+  .job-description {
+    color: #7D8D9D;
+    font-family: "Roboto";
+    font-size: 12px;
+  }