recent work added

alexsophiekim · Dec 17, 2023 · e0e6cef · e0e6cef
1 parent 02e60f2
commit e0e6cef
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 37 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -187,6 +187,19 @@ section {
     color: rgb(255, 255, 255);
   }
 }
+@keyframes line90 {
+  0% {
+    width: 0;
+    color: rgba(255, 255, 255, 0);
+  }
+  40% {
+    color: rgb(255, 255, 255);
+  }
+  100% {
+    width: 90%;
+    color: rgb(255, 255, 255);
+  }
+}
 .animateLine {
   animation: line70 3S 1;
   animation: line75 3s 1;
@@ -196,7 +209,7 @@ section {
 
 .worksTitle {
   text-align: center;
-  margin-bottom: 20px;
+  margin: 1em;
 }
 
 .cardContainer {
@@ -285,19 +298,20 @@ section {
 }
 
 .cardContainer .box:nth-child(1) .icon {
-  background-image: url(../img/tandoori.jpg);
+  background-image: url(../img/sub-product.png);
+  background-color: white;
   background-position: top;
-  background-size: cover;
+  background-size: contain;
 }
 
 .cardContainer .box:nth-child(2) .icon {
-  background-image: url(../img/caucus.jpg);
+  background-image: url(../img/tandoori.jpg);
   background-position: top;
   background-size: cover;
 }
 
 .cardContainer .box:nth-child(3) .icon {
-  background-image: url(../img/mtruapehu.png);
+  background-image: url(../img/caucus.jpg);
   background-position: top;
   background-size: cover;
 }
@@ -332,6 +346,16 @@ section {
   background-size: cover;
 }
 
+.flexWrap {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.workPage {
+  margin-top: 6em;
+}
+
 .contactIntro {
   padding-bottom: 20px;
   border-bottom: solid 1px #cecece;
@@ -347,7 +371,7 @@ section {
 @media (max-width: 576px) {
   .contactIntro p {
     font-size: 50px;
-    padding-left: 10%;
+    padding: 5%;
   }
 }
 

diff --git a/css/style.css.map b/css/style.css.map
diff --git a/img/sub-product.png b/img/sub-product.png
diff --git a/img/subproductux.jpg b/img/subproductux.jpg
diff --git a/index.html b/index.html
@@ -2,8 +2,8 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
-    <meta name="description" content="UX designer Sophie Kim">
-    <meta name="keywords" content="HTML,CSS,SCSS,JavaScript">
+    <meta name="description" content="UX/UI designer Sophie Kim's Portfolio">
+    <meta name="keywords" content="HTML,CSS,SCSS,JavaScript,UI,UX,designer,developer">
     <meta name="author" content="Sophie Kim">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sophie Kim's Portfolio</title>
@@ -53,21 +53,31 @@ <h4 class="intro"><span>{ Sophie Kim }</span><br/><br/> <p>Creative UX/UI design
         <div class="aboutTitle col12 "> HELLO, THERE!</div>
         <div class="aboutBox ">
           <h1 class="aboutText animation">
-              I am a UX/UI designer based in Wellington, NZ. I worked at MOBIHQ which is food online ordering SaaS company as a Digital Designer and Front-end Designer. Basically my main role is UI styling for ordering storefront across Web, Mobile, Tablet and Kiosk. Before that, I also worked at the Racing Industry Transition Agency and Tech Expozed International Limited as a UX designer. 
-              I am passionate about creating and building user centric web applications. I love brainstoming based on the UX point of view and enjoy discuss with team and solve the problems. I am queen of the CSS so I confidently handle with code based styling. I have learnt Front-end & back-end web development skill. I learn quickly, adapt easily and am driven to succeed.
-              <br/>Outside of coding, I enjoy fashion, makeup, coffee, travel, hang-out and yoga.
+              I am a UX/UI designer based in Wellington, NZ. 
+              I recently worked with MOBIHQ which is food online ordering SaaS company as a Digital Designer/Front-End Designer. Basically my role was responsible for UX/UI for food ordering storefront improving and styling in the cross-platform. Before that, I also worked at the TAB sports betting agancy and Tech Expozed International Limited as a UX designer. 
+              I am passionate about creating and building user centric web applications. I love brainstoming based on the UX point of view and enjoy discuss with team and solve the problems. I am queen of the CSS so I confidently handle with code based styling. I have learnt full stack web development skill. I learn quickly, adapt easily and am driven to succeed.
+              <br/>Outside of working, I enjoy fashion, coffee, travel and yoga.
               <br/><span style="background-color:#fcf4a3;">I am actively looking for a new opportunity.</span>
           </h1>
         </div>
       </section>
 
 
       <section id="works" class="section">
-        <!-- <div class="row">
-          <h1 class="worksTitle">Projects</h1>
-        </div> -->
+
         <div class="cardContainer">
-          <div class="row">
+          <div class="flexWrap">
+            <div class="box">
+              <a href="subproductpage.html"  target="_self">
+              <div class="icon">
+                <i class="ti-search" aria-hidden="true"></i>
+              </div>
+              <div class="content">
+                <h3>UX/UI</h3>
+                <p>MOBIHQ - Sub product <br/> menu build feature improvement<br/>Using Figma and React Native/CSS</p>
+              </a>
+              </div>
+            </div>
             <div class="box">
               <a href="https://www.behance.net/gallery/85432687/take-away-order-web" target="_blank">
               <div class="icon">
@@ -91,7 +101,7 @@ <h3>UX Research</h3>
               </a>
               </div>
             </div>
-            <div class="box">
+            <!-- <div class="box">
               <a href="https://alexsophiekim.github.io/Mt.ruapehu"  target="_blank">
               <div class="icon">
                 <i class="ti-search" aria-hidden="true"></i>
@@ -101,7 +111,7 @@ <h3>Live</h3>
                   <p>Mt.Ruapehu - Accomodation Booking System <br/> Single Web application using JavaScript, Bootstrap and sweetalerts2 plugin</p>
                 </a>
               </div>
-            </div>
+            </div> -->
             <div class="box">
               <a href="https://alexsophiekim.github.io/beat-music"  target="_blank">
               <div class="icon">
@@ -166,17 +176,21 @@ <h3>UI/UX design</h3>
       <section id="skills" class="section">
         <h1 class="skillsTitle">Skills</h1>
         <article class="skillSet">
-          <p>UX Research</p>
-          <div class="graph line85" >
-              <span style="width:85%">85%</span>
+          <p>UX/UI-Figma</p>
+          <div class="graph line90" >
+              <span style="width:90%">90%</span>
           </div>
           <p>HTML / CSS / SASS</p>
+          <div class="graph line90">
+              <span style="width:90%">90%</span>
+          </div>
+          <p>React.js</p>
           <div class="graph line85">
               <span style="width:85%">85%</span>
           </div>
           <p>JavaScript / jQuery</p>
-          <div class="graph line80">
-              <span style="width:80%">80%</span>
+          <div class="graph line75">
+              <span style="width:75%">75%</span>
           </div>
           <p>PHP / SQL</p>
           <div class="graph line70">
@@ -187,20 +201,16 @@ <h1 class="skillsTitle">Skills</h1>
               <span style="width:75%">75%</span>
           </div>
           <p>MongoDB</p>
-          <div class="graph line85">
-              <span style="width:85%">85%</span>
+          <div class="graph line75">
+              <span style="width:75%">75%</span>
           </div>
           <p>RESTful APIs</p>
           <div class="graph line80">
               <span style="width:80%">80%</span>
           </div>
-          <p>React.js</p>
-          <div class="graph line75">
-              <span style="width:75%">75%</span>
-          </div>
           <p>CMS</p>
-          <div class="graph line70">
-              <span style="width:70%">70%</span>
+          <div class="graph line80">
+              <span style="width:80%">80%</span>
           </div>
           <p>Git / Github</p>
           <div class="graph line80">

diff --git a/scss/_contact.scss b/scss/_contact.scss
@@ -11,7 +11,7 @@
     font-weight: 100;
     @include respond-to(sm){
       font-size: 50px;
-      padding-left: 10%;
+      padding: 5%;
     }
   }
 }

diff --git a/scss/_skill.scss b/scss/_skill.scss
@@ -65,6 +65,11 @@
   40%{ color:rgba(255,255,255,1)}
   100%{ width:85%; color:rgba(255,255,255,1)}
 }
+@keyframes line90{
+  0%{ width:0; color:rgba(255,255,255,0)}
+  40%{ color:rgba(255,255,255,1)}
+  100%{ width:90%; color:rgba(255,255,255,1)}
+}
 
 .animateLine{
   animation: line70 3S 1;

diff --git a/scss/_works.scss b/scss/_works.scss
@@ -1,6 +1,6 @@
 .worksTitle{
 text-align: center;
-margin-bottom: 20px;
+margin:1em
 }
 .cardContainer{
   position: relative;
@@ -85,17 +85,22 @@ margin-bottom: 20px;
   background: #a8b6b1;
 }
 .cardContainer .box:nth-child(1) .icon{
-  background-image: url(../img/tandoori.jpg);
-  background-position: top;    background-size: cover;
+  background-image: url(../img/sub-product.png);
+  background-color: white;
+  background-position: top;    background-size: contain;
 }
 .cardContainer .box:nth-child(2) .icon{
-  background-image: url(../img/caucus.jpg);
+  background-image: url(../img/tandoori.jpg);
   background-position: top;    background-size: cover;
 }
 .cardContainer .box:nth-child(3) .icon{
-  background-image: url(../img/mtruapehu.png);
+  background-image: url(../img/caucus.jpg);
   background-position: top;    background-size: cover;
 }
+// .cardContainer .box:nth-child(3) .icon{
+//   background-image: url(../img/mtruapehu.png);
+//   background-position: top;    background-size: cover;
+// }
 .cardContainer .box:nth-child(4) .icon{
   background-image: url(../img/beat.gif);
   background-position: top;    background-size: cover;
@@ -116,3 +121,13 @@ margin-bottom: 20px;
   background-image: url(../img/receipt.jpg);
   background-position: top;    background-size: cover;
 }
+
+.flexWrap {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.workPage {
+  margin-top: 6em;
+}