Startsida Utforska Hjälp
Registrera dig Logga in
lee
/
leemorgan-dev
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

Add basic layout of the first page.

Lee Morgan 5 år sedan
förälder
eae7c57190
incheckning
958de2e643
3 ändrade filer med 197 tillägg och 1 borttagningar
Unifierad Vy Visa Diff Statistik
  1. 2 1
      routes.js
  2. 75 0
      views/main/index.css
  3. 120 0
      views/main/index.html

+ 2 - 1
routes.js
Visa fil 

@@ -1,3 +1,4 @@
 
 module.exports = function(app){
 
 module.exports = function(app){
 
-    app.get("/", (req, res)=>{console.log("main")});
 
+    app.get("/", (req, res)=>{res.sendFile(`${__dirname}/views/main/index.html`)});
 
+    app.get("/style", (req, res)=>{res.sendFile(`${__dirname}/views/main/index.css`)});
 
 }
 
 }

+ 75 - 0
views/main/index.css
Visa fil 

@@ -0,0 +1,75 @@
 
+*{margin:0;padding:0;}
 
+
 
+body{
 
+    height: 100vh;
 
+    width: 100vw;
 
+    display: flex;
 
+}
 
+
 
+.sidebar{
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: space-around;
 
+    align-items: center;
 
+    background: rgb(23, 171, 192);
 
+    height: 100vh;
 
+    width: 25vw;
 
+    color: white;
 
+}
 
+
 
+    .description{
 
+        background: #5FECE0;
 
+        color: black;
 
+        width: 100%;
 
+        padding: 25px;
 
+        box-sizing: border-box;
 
+        font-size: 20px;
 
+        text-align: justify;
 
+    }
 
+
 
+    .leeLinks a{
 
+        display: flex;
 
+        color: white;
 
+        margin: 10px;
 
+    }
 
+
 
+    .leeLinks svg{
 
+        margin-right: 5px;
 
+    }
 
+
 
+#menu{
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    background: #152730;
 
+    width: 100px;
 
+    height: 100vh;
 
+}
 
+
 
+    #menu > button{
 
+        display: flex;
 
+        flex-direction: column;
 
+        justify-content: center;
 
+        align-items: center;
 
+        height: 100px;
 
+        width: 100px;
 
+        color: white;
 
+        cursor: pointer;
 
+        background: none;
 
+        border: none;
 
+    }
 
+
 
+    #menu .active{
 
+        background: rgb(196, 198, 192);
 
+        color: black;
 
+        cursor: default;
 
+    }
 
+
 
+#main{
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: space-around;
 
+    background: rgb(196, 198, 192);
 
+    height: 100vh;
 
+    width: 75vw;
 
+}

+ 120 - 0
views/main/index.html
Visa fil 

@@ -0,0 +1,120 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <title>Lee Morgan</title>
 
+        <link rel="stylesheet" href="/style">
 
+    </head>
 
+    <body>
 
+        <div class="sidebar">
 
+            <h1>Hi, I'm Lee Morgan</h1>
 
+
 
+            <p class="description">I'm a human being from planet Earth. I am also a developer. I often spend my time doing human things, and sometimes developer things. I sometimes write articles about relatable human/developer things. Sometimes I don't. I like to learn new human things such as human languages and computer languages.</p>
 
+
 
+            <div class="leeLinks">
 
+                <a href="https://github.com/MorganLee909">
 
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
 
+                    </svg>
 
+                    <p>MorganLee909</p>
 
+                </a>
 
+
 
+                <a href="https://www.linkedin.com/in/lee-morgan-79575b1b/">
 
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
 
+                        <rect x="2" y="9" width="4" height="12"></rect>
 
+                        <circle cx="4" cy="4" r="2"></circle>
 
+                    </svg>
 
+                    <p>Lee Morgan</p>
 
+                </a>
 
+
 
+                <a href="mailto:me@leemorgan.io">
 
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
 
+                        <polyline points="22,6 12,13 2,6"></polyline>
 
+                    </svg>
 
+                    <p>me@leemorgan.io</p>
 
+                </a>
 
+            </div>
 
+        </div>
 
+
 
+        <div id="menu">
 
+            <button id="aboutButton" class="active">
 
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
 
+                    <circle cx="12" cy="7" r="4"></circle>
 
+                </svg>
 
+                <p>About Me</p>
 
+            </button>
 
+
 
+            <button id="projectsButton">
 
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                    <polyline points="16 18 22 12 16 6"></polyline>
 
+                    <polyline points="8 6 2 12 8 18"></polyline>
 
+                </svg>
 
+
 
+                <p>My Projects</p>
 
+            </button>
 
+
 
+            <button id="writingButton">
 
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                    <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
 
+                    <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
 
+                    <path d="M2 2l7.586 7.586"></path>
 
+                    <circle cx="11" cy="11" r="2"></circle>
 
+                </svg>
 
+
 
+                <p>My Writing</p>
 
+            </button>
 
+
 
+            <button id="linksButton">
 
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
 
+                    <line x1="3" y1="9" x2="21" y2="9"></line>
 
+                    <line x1="9" y1="21" x2="9" y2="9"></line>
 
+                </svg>
 
+
 
+                <p>Favorite Sites</p>
 
+            </button>
 
+        </div>
 
+
 
+        <div id="main">
 
+            <div id="about">
 
+                <h1>About Me</h1>
 
+            </div>
 
+
 
+            <div id="projects" style="display:none;">
 
+                <h1>My Projects</h1>
 
+            </div>
 
+
 
+            <div id="writing" style="display:none;">
 
+                <h1>My Writing</h1>
 
+            </div>
 
+
 
+            <div id="links" style="display:none;">
 
+                <h1>Cool Links</h1>
 
+            </div>
 
+        </div>
 
+
 
+        <script>
 
+            let buttons = document.getElementById("menu").children;
 
+            let content = document.getElementById("main").children;
 
+
 
+            for(let i = 0; i < buttons.length; i++){
 
+                buttons[i].onclick = ()=>{
 
+                    for(let j = 0; j < buttons.length; j++){
 
+                        buttons[j].classList.remove("active");
 
+                    }
 
+                    buttons[i].classList.add("active");
 
+
 
+                    for(let j = 0; j < content.length; j++){
 
+                        content[j].style.display = "none";
 
+                    }
 
+
 
+                    let string = buttons[i].id.replace("Button", "");
 
+                    document.getElementById(string).style.display = "flex";
 
+                };
 
+            }
 
+        </script>
 
+    </body>
 
+</html>