working ResumeLink

ArhanChaudhary · ArhanChaudhary · commit 9ae48ec790ed · 2023-09-17T03:51:22.000-04:00
diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,9 @@
       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`.
     -->
+    <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=Roboto:wght@100&display=swap" rel="stylesheet"/>
     <title>GitMe</title>
   </head>
   <body>
diff --git a/src/Home.js b/src/Home.js
@@ -9,11 +9,6 @@ export default function App() {
   
   return (
     <div className="App">
-      <header>
-        <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=Roboto:wght@100&display=swap" rel="stylesheet"/>
-      </header>
         <div id="intro-block">
             <img src={logo} alt="Logo" className='logo'/>
             <h2 class='head'>An AI improvement application</h2>
diff --git a/src/ResumeLink.css b/src/ResumeLink.css
@@ -1,3 +1,27 @@
-.App * {
+.App-main {
     color: white;
+    white-space: pre-wrap;
+    display: block;
+    max-width: 1100px;
+    margin: 0 auto;
+    font-family: roboto;
+    font-size: 20px;
+}
+
+h2 {
+    margin-top: 10px;
+    margin-bottom: 30px;
+    padding-bottom: 15px;
+    border-bottom: 3px dashed white;
+}
+
+.App-main :not(h2) {
+    text-align: left;
+    margin: 0 10px;
+}
+
+.App-main > :not(h2) {
+    padding-bottom: 20px;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 20px;
 }
diff --git a/src/ResumeLink.js b/src/ResumeLink.js
@@ -7,15 +7,15 @@ function ResumeReview(){
 
     return(
         <div className="App">
-            <body>
+            <div className="App-main">
                 <h2>Here is a list of your repositories and a resume summary of each one</h2>
                 {state.data.map((item, index) => (
                     <div key={index}>
-                        <h4>{item.repository}</h4>
+                        <h3>{item.repository}</h3>
                         <p>{item.generated_summary}</p>
                     </div>
                 ))}
-            </body>
+            </div>
         </div>
         
     );
