1/21 media mobile header,home,projects complete

Author: levelopers

package-lock.json

@@ -45,9 +45,11 @@
     "react-app-polyfill": "^0.2.0",
     "react-dev-utils": "^7.0.1",
     "react-dom": "^16.7.0",
+    "react-responsive": "^6.0.1",
     "react-router-dom": "^4.3.1",
     "resolve": "1.8.1",
     "sass-loader": "7.1.0",
+    "scss-loader": "0.0.1",
     "style-loader": "0.23.0",
     "terser-webpack-plugin": "1.1.0",
     "url-loader": "1.1.1",

package.json

@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import Home from './pages/home'
 import './App.css'
+import Projects from './pages/projects'
 import UC from './components/underConstruction'
 
 export default function App(props){
@@ -11,6 +12,7 @@ export default function App(props){
       <Router>
         <Switch>
           <Route exact path="/" component={Home}/>
+          <Route path="/projects" component={Projects}/>
         </Switch>
       </Router>
     </div>

src/App.js

@@ -2,9 +2,9 @@ import React from 'react'
 import './stars.css'
 export default function index() {
   return (
-    <div class="backgroundStar">
-      <div class="stars"></div>
-      <div class="twinkling"></div>
+    <div className="backgroundStar">
+      <div className="stars"></div>
+      <div className="twinkling"></div>
     </div>
   )
 }

src/assets/JSLogo.png

@@ -34,13 +34,13 @@
 }
 .backgroundStar {
   position: fixed;
+  width: 100%;
+  height: 100vh;
   z-index: -3;
   top:0;
   left:0;
   right:0;
   bottom:0;
-  width: 100%;
-  height: 100vh;
 }
 .stars, .twinkling {
 position:absolute;

src/assets/nodejsLogo.png

@@ -1,4 +1,6 @@
 @import url("https://fonts.googleapis.com/css?family=Josefin+Slab|Roboto+Slab")
+@import '../../modules/mediaQuery/app'
+
 .outbox
   z-index: 1
   background: white
@@ -44,6 +46,12 @@
     margin-top: 10px
     margin-bottom: 10px
 
+@media screen and (max-width: $mobileM)
+  .content_title
+    font-size: 15px
+  .content_context
+    font-size: 10px
+
 .menu .contact .social
   display: flex
   flex-direction: column

src/components/cssStarBackground/index.js

@@ -37,8 +37,8 @@ export default function index() {
             <p>Social</p>
           </div>
           <div className={styles.content_context}>
-            <a target="blank" href="https://github.com/levelopers">Github</a>
-            <a target="blank" href="https://www.linkedin.com/in/dongsheng-yin-97b992136/">Linkedin</a>
+            <a target="blank_github" href="https://github.com/levelopers">Github</a>
+            <a target="blank_linkedin" href="https://www.linkedin.com/in/dongsheng-yin-97b992136/">Linkedin</a>
           </div>
         </div>
       </div>

src/components/cssStarBackground/stars.css

@@ -1,11 +1,13 @@
 @import '../../modules/mediaQuery/app'
 @import url("https://fonts.googleapis.com/css?family=Indie+Flower|ZCOOL+KuaiLe")
+
 .outbox
   font-family: 'ZCOOL KuaiLe', cursive
   font-size: 25px
+  width: 100%
   height: 10vh
   display: flex
-  flex-direction: row
+  justify-content: space-between
   z-index: 1
   background-color: white
   box-shadow: 0 1px 5px 1px orange
@@ -36,17 +38,25 @@
       text-decoration: none
       color: black
 
-// .toggleButton
-//   @include device(tablet)
-//     display: none  
+.toggle_button
+  display: none
+  
+
+@media screen and (max-width: $tablet)
+  .logo
+    min-width: 100px
+    font-size: 20px
+
+  .toggle_button
+    display: flex 
+    align-items: center 
+    margin-right: 20px
+    font-size: 10px
 
-// .toggle_nav
-//   @include device(tablet)
-//     display: none
-//     height: 0
-//   display: flex
-//   transition: max-height 0.2s ease-out
-// .responsive
-//   @include device(tablet)
-//     display: none
-//     height: 0
+  .header_nav
+    font-size: 10px
+    display: flex
+    justify-content: flex-start
+    margin-left: 20px
+    
+