add Career function initialized card view page

kyoowon · Jan 29, 2022 · 6dc4da4 · 6dc4da4
1 parent ed3d468
commit 6dc4da4
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 8 deletions.
diff --git a/src/Career/Career.jsx b/src/Career/Career.jsx
@@ -1,13 +1,47 @@
 import "./Career.scss"
-import RssFeedIcon from '@mui/icons-material/RssFeed';
-import GitHubIcon from '@mui/icons-material/GitHub';
+
 
 export default function Career() {
+    const data = [
+        {
+            id: 1,
+            title: "Chungbuk University",
+            img: "https://via.placeholder.com/150",
+            desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores cum numquam, in nemo soluta doloribus deserunt sint cupiditate consequatur, ipsam, provident adipisci quas esse laudantium ad. Beatae voluptas quae voluptatum.",
+            period: "2015.03 ~ 2022.02",
+            degree: "도시공학 & 소프트웨어학과 복수전공 학사 수료 "
+        },
+        {
+            id: 2,
+            title: "42 Seoul",
+            img: "https://via.placeholder.com/150",
+            desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores cum numquam, in nemo soluta doloribus deserunt sint cupiditate consequatur, ipsam, provident adipisci quas esse laudantium ad. Beatae voluptas quae voluptatum.",
+            period: "2020.09 ~ 2021.09",
+            degree: "2기 Cadet 활동",
+        },
+    ]
+
     return (
         <div className="career" id="career">
-            <div className="introIcon">
-                <a href="https://github.com/kyoowon"><GitHubIcon sx={{ color: "black" }} /></a>
-                <a href="https://kyulee.tistory.com/"><RssFeedIcon sx={{ color: "black" }} /></a>
+            <h1>Career</h1>
+            <div className="container">
+                {data.map(d => (
+                    <div className="card">
+                        <div className="top">
+                            <img className="logo" src={d.img} />
+                            <strong>{d.title}</strong>
+                        </div>
+                        <div className="center">
+                            {d.desc}
+                        </div>
+                        <div className="bottom">
+                            <div className="h3">
+                                <h4>{d.degree}</h4>
+                                <h4>{d.period}</h4>
+                            </div>
+                        </div>
+                    </div>
+                ))}
             </div>
         </div>
     )

diff --git a/src/Career/Career.scss b/src/Career/Career.scss
@@ -1,3 +1,77 @@
-.career{
-    background-color: white;
-}
+@import "../global.scss";
+
+.career {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    h1 {
+        font-size: 50px;
+    }
+
+    .container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .card {
+            width: 350px;
+            height: 70%;
+            border-radius: 10px;
+            box-shadow: 0px 0px 15px -8px black;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            padding: 20px;
+            transition: all 1s ease;
+            margin: 0 30px;
+
+
+            &:hover{
+                transform: scale(1.1);
+            }
+
+            .top {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+
+                .logo {
+                    height: 70px;
+                    width: 70px;
+                    border-radius: 50px;
+                    object-fit: cover;
+                }
+
+                strong{
+                    margin: 20px 0px;
+                    font-size: 20px;
+                }
+            }
+
+            .center {
+                padding: 10px;
+                background-color: #fae9c9;
+                border-radius: 10px;
+            }
+
+            .bottom{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                h3{
+                    margin-bottom: 5px;
+                }
+
+                h4{
+                    color: black;
+                    text-align: center;
+                }
+            }
+        }
+    }
+}