patch project/projectList structure

src/assets/css/App.css

@@ -238,7 +238,9 @@ a {
 
 .projectList {
   padding: 0px;
-  display: block;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   margin-left: auto;
   margin-right: auto;
   width: 100%;

src/componets/Project.js

@@ -14,10 +14,10 @@ export default class Project extends React.Component {
                 )
             })
         } else{
-            links = <a><img alt="no links!" src={placeholder} /></a>
+            links = <div className='placeholder'><img alt="no links!" src={placeholder} /></div>
         }
         return (
-            <li className={'project'} data-aos='fade-up'>
+            <div className={'project'} data-aos='fade-up'>
                 <div className='topBox'>
                     <h3>{this.props.title}</h3>
                     <p className={this.props.status + " tab"}>⬤</p>
@@ -26,7 +26,7 @@ export default class Project extends React.Component {
                 <div className='bottomBox'>
                     {links}
                 </div>
-            </li>
+            </div>
         )
     }
 }

src/componets/ProjectList.js

@@ -11,10 +11,8 @@ export default function ProjectList(props){
         );
     });
     return(
-        <>
-        <ul className='projectList centeredForeground' data-aos='fade-up'>
+        <div className='projectList centeredForeground' data-aos='fade-up'>
             {projects}
-        </ul>
-        </>
+        </div>
     );
 }