Merge pull request #16 from rrigato/dev

homepage section formatting
rrigato · Nov 23, 2023 · 1ab80ae · 1ab80ae
2 parents 1c4e369 + 69436f7
commit 1ab80ae
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 26 deletions.
diff --git a/static/css/homepageSection.css b/static/css/homepageSection.css
@@ -0,0 +1,29 @@
+a{
+    background-color: white;
+    border-radius: 10%;
+    border: 2px solid #262847;
+    color: black;
+    display: inline-block;
+    font-size: small;
+    margin: 2px;
+    padding: 4px 8px;
+    text-align: center;
+    text-decoration: none;
+}
+a:active, a:hover {
+    background-color: #262847;
+    color: white;
+}
+
+
+ul{
+    margin-right: 10px;
+}
+
+.homepage-content{
+    background-color: 	#aaaaaa;
+    border-radius: 5%;
+    color:black;
+
+}
+
diff --git a/static/css/main.css b/static/css/main.css
@@ -3,19 +3,10 @@ body, html {
     color: white;
     height: 100%;
 }
-li{
-    margin-right: 20px;
-}
 .full-height{
     height: 100%;
 }
 
-.homepage-content{
-    background-color: silver;
-    border-radius: 5%;
-    color:black;
-
-}
 
 .toggle-button{
     background-color: #554d3a;    

diff --git a/static/js/Projects.jsx b/static/js/Projects.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import '../css/main.css';
+import '../css/homepageSection.css';
 
 
 /**homepage project details and links
@@ -12,28 +12,84 @@ export function Projects(){
             <ul>
                 <h3>Amazon Alexa Skill To retrieve Television Ratings</h3>
                 <li>Provides television ratings for the Adult Swim Saturday night Toonami television block.</li>
-                <li><a href='https://www.amazon.com/dp/B0B5596H7C/'>Application link</a></li>
-                <li><a href='https://github.com/rrigato/tvratings'>Source Code</a></li>
+                <li>
+                    <a
+                        href='https://www.amazon.com/dp/B0B5596H7C/'
+                        target={'_blank'}
+                    >
+                        application link
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href='https://github.com/rrigato/tvratings'
+                        target={'_blank'}
+                    >
+                        source code
+                    </a>
+                </li>
 
                 <h3>Amazon Alexa Air Quality Caused Fuel Burning Restriction Skill</h3>
                 <li>Amazon Alexa skill to determine if a zip code has any fuel burning restrictions for heating your home in the winter.</li>
-                <li><a href='https://www.amazon.com/dp/B09PVD9VSC/'>Application link</a></li>
-                <li><a href='https://github.com/rrigato/burnday'>Source Code</a></li>
+                <li>
+                    <a
+                        href='https://www.amazon.com/dp/B09PVD9VSC/'
+                        target={'_blank'}
+                    >
+                        application link
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href='https://github.com/rrigato/burnday'
+                        target={'_blank'}
+                    >
+                        source code
+                    </a>
+                </li>
 
                 <h3>Web scrapper television network ratings</h3>
                 <li>Only location on the internet that has an archive of Adult Swim Toonami Ratings in a programmable format.</li>
                 <li>Reach out to me on github if you would like access.</li>
                 <li><sup><sup>First rule of building a sustainable web scraping application is to never build a web scrapping application.</sup></sup></li>
-                <li><a href='https://github.com/rrigato/ratings'>Source Code</a></li>
+                <li>
+                    <a
+                        href='https://github.com/rrigato/ratings'
+                        target={'_blank'}
+                    >
+                        source code
+                    </a>
+                </li>
 
                 <h3>Github 3d commit history webpage</h3>
                 <li>Automates creation of 3D commit history to populate web application artifacts.</li>
-                <li><a href='https://github.com/rrigato/rrigato/blob/master/README.md'>Application link</a></li>
-                <li><a href='https://github.com/rrigato/rrigato/'>Source Code</a></li>
+                <li>
+                    <a
+                        href='https://github.com/rrigato/rrigato/blob/master/README.md'
+                        target={'_blank'}
+                    >
+                        application link
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href='https://github.com/rrigato/rrigato/'
+                        target={'_blank'}
+                    >
+                        source code
+                    </a>
+                </li>
 
                 <h3>Markdown to html converter</h3>
                 <li>Used to reduce documentation redundancy when hosting markdown documentation</li>
-                <li><a href='https://github.com/rrigato/devdocs'>Source Code</a></li>
+                <li>
+                    <a
+                        href='https://github.com/rrigato/devdocs'
+                        target={'_blank'}
+                    >
+                        source code
+                    </a>
+                </li>
             </ul>
 
         </div>

diff --git a/static/tests/HomePageToggle.test.js b/static/tests/HomePageToggle.test.js
@@ -14,19 +14,18 @@ describe('Central Content for site', () => {
 
 
 
-        const {getByRole} = render(<HomePageToggle/>);
+        const {findByRole} = render(<HomePageToggle/>);
 
 
-        getByRole(
+        await findByRole(
             'button', {name: 'About'}
         );
-        getByRole(
+        await findByRole(
             'button', {name: 'Projects'}
         );
-        getByRole(
+        await findByRole(
             'button', {name: 'Book Recommendations'}
         );
-
         expect(Projects).toHaveBeenCalled()
 
     });

diff --git a/static/tests/Projects.test.js b/static/tests/Projects.test.js
@@ -9,15 +9,13 @@ describe('Projects displayed on screen', () => {
 
     test('Number of project sections', async () => {        
 
+
         const {getAllByRole} = render(<Projects/>);
 
 
         const numProjectHeaders = getAllByRole(
             'heading'
         );
-
-
         expect(numProjectHeaders.length).toBe(5);
-
     });
 });