More work on blog

components/Blog/Card.tsx

@@ -3,8 +3,8 @@ import styles from "../../styles/Blog/Card.module.scss";
 
 const ProjectCard: NextPage<{ title: string, description: string }> = ({ title, description}) => {
     return <div className={styles.card}>
-        <div className="title">{title}</div>
-        <div className="description">{description}</div>
+        <h3 className={styles.title}>{title}</h3>
+        <p className={styles.description}>{description}</p>
     </div>;
 };
 

lib/content/types.ts

@@ -9,6 +9,7 @@ interface Content {
     short_desc: string;
     more?: string;
     repo?: string;
+    title: string;
 }
 
 export interface Project extends Content {

pages/index.tsx

@@ -5,6 +5,7 @@ import type { ContentList } from "../lib/content/types";
 import Navigation from "../components/Blog/Navigation";
 import ProjectCard from "../components/Blog/Card";
 import Spinner from "../components/Spinner";
+import styles from "../styles/Blog/Front.module.scss";
 
 const Blog: NextPage<{}> = () => {
     const { data: projectList, error } = useSWR("/content/list.json", (...args) => fetch(...args).then(res => res.json()));
@@ -12,7 +13,7 @@ const Blog: NextPage<{}> = () => {
     const generateCards = (type: string) => {
         if (error) return <div>Error on fetching projects.</div>;
         if (!projectList) return <Spinner size={200} color={"#fff"} />;
-        else return <div className="contentList">{(projectList as ContentList).filter(p => p.type === type).map(p => <ProjectCard key={p.name} title={p.name} description={p.desc.join(" ")} />)}</div>;
+        else return <div className={styles.contentList}>{(projectList as ContentList).filter(p => p.type === type).map(p => <ProjectCard key={p.name} title={p.title} description={p.desc.join(" ")} />)}</div>;
     };
 
     return <>

styles/Blog/Card.module.scss

@@ -1,5 +1,21 @@
 .card {
     border: 1px solid gray;
     border-radius: 5px;
-    max-width: 200px;
+    max-width: 40%;
+    margin: 1rem auto;
+    transition: box-shadow 0.1s ease-in-out;
+    cursor: pointer;
+    padding: 5px;
+
+    &:hover {
+        box-shadow: 0px 0px 10px blue;
+    }
+}
+
+.title {
+
+}
+
+.description {
+    
 }

styles/Blog/Front.module.scss

@@ -0,0 +1,7 @@
+.contentList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    margin: 0 -1rem;
+    padding: 0;
+}