Add files via upload

logancammish · Jun 10, 2024 · 79cf825 · 79cf825
1 parent c6be4db
commit 79cf825
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 126 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,6 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "progress": "^2.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",

diff --git a/public/index.html b/public/index.html
@@ -7,13 +7,9 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Logan Cammish's Portfolio"
+      content="Web site created using create-react-app"
     />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -28,11 +24,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Logan Cammish</title>
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <noscript>This is because this website uses ReactJS.</noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "Logan Cammish Portfolio",
-  "name": "Logan Cammish's Portfolio Website",
+  "short_name": "React App",
+  "name": "Create React App Sample",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,45 @@
+.App {
+  text-align: center;
+  margin: auto;
+  width: 70%;
+  background-color: rgba(241, 238, 238, 0.791);
+  border-color: #282c34;
+  border-width: 2px;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/index.css b/src/index.css
@@ -3,8 +3,7 @@
 @tailwind utilities;
 
 body {
-  margin-left: 2%;
-  margin-right: 2%;
+  margin: 2%;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
@@ -19,145 +18,99 @@ code {
 
 /* Most PCs */
 @media screen and (min-width: 1030px) {
-  .container {  
-    display: flexbox;
-    position: relative;   
-    flex-wrap: nowrap;
-    flex-direction:row;  
-    box-sizing: border-box;
+  img { 
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 35%;
+    border-radius: 2%;
+    border-width: 2px;
+    border-color: black;
   }
-
-  .container img {  
-    width: 20%;
-    margin-top: -3%;
+  h1 { 
+    color:rgb(36, 33, 36);
+    font-family: JetBrains Mono;
+    font-size: 4em;
   }
-
-  .container h1 {  
-    margin-top: 1%;
-    position: absolute;
-    top: 10%;
-    font-size: 2.5em;
-    width: 250px;
-    text-align: left;
-    word-break: break-word;
+  h2 { 
+    color:rgb(36, 33, 36);
+    font-family: JetBrains Mono;
+    font-size: 3em;
   }
-
-  .container SocialIcon {
-    bottom: 10%;
-  }
-
-  .container p {
-    position: absolute;
-    top: 60%;
-    width: 250px;
-    text-align: left;
-    word-break: break-word;
-  }  
 }
 
 /* Large tablets */
 @media screen and (min-width: 480px) and (max-width: 1030px) {
-  .container {  
-    display: flexbox;
-    position: relative;   
-    flex-wrap: nowrap;
-    flex-direction:row;  
-    box-sizing: border-box;
+  h1 { 
+    color:rgb(36, 33, 36);
+    font-family: JetBrains Mono;
+    font-size: 2.5em;
   }
-
-  .container img {  
-    width: 20%;
-    margin-top: -3%;
+  h2 { 
+    color:rgb(36, 33, 36);
+    font-family: JetBrains Mono;
+    font-size: 2em;
   }
-
-  .container h1 {  
-    margin-top: 1%;
-    position: absolute;
-    top: 10%;
-    font-size: 2.5em;
-    width: 250px;
-    text-align: left;
-    word-break: break-word;
+  img { 
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 30%;
+    border-radius: 2%;
+    border-width: 2px;
+    border-color: black;
   }
-
-  .container p {
-    position: absolute;
-    top: 80%;
-    width: 250px;
-    text-align: left;
-    word-break: break-word;
-  }  
 }
 
 /* Most Phones */
 @media screen and (max-width: 480px) {
-  .container {  
-    display: flexbox;
-    position: relative;   
-    flex-wrap: nowrap;
-    flex-direction:row;  
-    box-sizing: border-box;
+  body{ 
+    margin: 1%;
   }
-
-  .container img {  
-    width: 25%;
-    margin-top: -3%;
+  img { 
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+    border-radius: 1%;
+    border-width: 1px;
+    border-color: black;
   }
-
-  .container h1 {  
-    margin-top: 1%;
-    position: absolute;
-    top: 10%;
+  h2 { 
+    color:rgb(36, 33, 36);
+    font-family: JetBrains Mono;
     font-size: 2em;
-    width: 250px;
-    text-align: left;
-    word-break: break-word;
   }
-
-  .container p {
-    position: absolute;
-    top: 50%;
-    width: 250px;
-    text-align: left;
-    word-break: break-word;
-  }  
+  h1 { 
+    color:rgb(36, 33, 36);
+    font-family: JetBrains Mono;
+    font-size: 2.5em;
+  }
 }
 
 
-img { 
-  display: auto;
-  margin-bottom: 1%;
-  margin-left: 70%;
-  width: 50%;
-  border-radius: 2%;
-  border-width: 2px;
-  border-color: black;
-}
-p {
+li { 
   color:rgb(36, 33, 36);
-  font-size: 1.5em;
-}
-h1 { 
-  color:rgb(36, 33, 36);
-  font-size: 3.5em;
-}
-h2 { 
-  color:rgb(36, 33, 36);
-  font-size: 2.5em;
+  font-family: JetBrains Mono;
+  font-size: 1.4em;
 }
+
+
 h3 { 
   color:rgb(36, 33, 36);
+  font-family: JetBrains Mono;
 }
 h4 { 
   color:rgb(36, 33, 36);
+  font-family: JetBrains Mono;
 }
 ul { 
   color:rgb(36, 33, 36);
   font-family: JetBrains Mono SemiBold;
   font-size: small;
 }
 body { 
-  background-color: aliceblue; 
+  background-color: rgb(249, 219, 181); 
 }
 hr { 
   border-color: black;

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -59,4 +59,4 @@ function Home() {
 
 }
 
-export default Home;
+export default Home;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -59,4 +59,4 @@ function Home() {

		}

		export default Home;
		export default Home;