feat: Home page (#1)

jonas-martinez · Jul 6, 2024 · ce4ab3e · ce4ab3e
1 parent 52b0974
commit ce4ab3e
Show file tree

Hide file tree

Showing 7 changed files with 234 additions and 0 deletions.
diff --git a/css/home.css b/css/home.css
@@ -0,0 +1,152 @@
+body * {
+    font-family: Helvetica, sans-serif;
+}
+
+p {
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+}
+
+li {
+    padding: 0;
+    margin: 0;
+}
+
+button {
+    border: none;
+
+    cursor: pointer;
+}
+
+.button-primary {
+    background-color: #54B9AF;
+    border-radius: 8px;
+    color: white;
+
+    padding: 8px;
+    width: fit-content;
+
+    font-weight: bold;
+}
+
+.text-light {
+    font-weight: 300;
+}
+
+.shadow {
+    filter: drop-shadow(2px 4px 4px #00000066)
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+    padding: 24px 32px;
+}
+
+body > nav > div > aside {
+    position: absolute;
+    top: 0;
+    left: -200px;
+
+    box-sizing: border-box;
+
+    height: 100%;
+
+    padding: 32px;
+
+    background-color: white;
+
+    border-right: 1px solid lightgray;
+
+    transition: left 0.3s ease-in-out;
+
+    &>ul {
+        display: grid;
+        row-gap: 16px;
+
+        &>li {
+            list-style-type: none;
+            font-size: 1.5rem;
+        }
+    }
+}
+
+body > nav > div > #openMenu:checked ~ aside {
+    left: 0px;
+}
+
+body > nav {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    &>a>img {
+        width: 40px;
+    }
+
+    &>div {
+        align-content: center;
+
+        &>label>img {
+            cursor: pointer;
+        }
+    }
+}
+
+body > section:first-of-type {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+
+    max-width: 800px;
+
+    text-align: center;
+
+    &>div>p {
+        font-size: 16px;
+    }
+
+    &>div>.text-bold {
+        font-size: 24px;
+        font-weight: bold;
+    }
+
+    &>img {
+        width: 120px;
+        border-radius: 60px;
+
+        margin-top: 16px;
+    }
+}
+
+body > section:nth-of-type(2) {
+    text-align: center;
+
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    &>p {
+        font-size: 24px;
+    }
+
+    &>div {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        justify-content: center;
+    }
+}
diff --git a/home.html b/home.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Jonas Martinez | Fullstack Developer</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='css/home.css'>
+</head>
+
+<body>
+    <nav>
+        <a href="/home.html"><img class="shadow" src="img/signature.png" /></a>
+        <div>
+            <input type="checkbox" id="openMenu" hidden>
+            <label for="openMenu">
+                <img src="img/burger.svg" alt="Open menu">
+            </label>
+
+            <aside class="shadow">
+                <ul>
+                    <li>
+                        <a href="/home.html">
+                            Home
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/about.html">
+                            About
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/portfolio.html">
+                            Portfolio
+                        </a>
+                    </li>
+                </ul>
+            </aside>
+        </div>
+    </nav>
+
+    <section>
+        <div>
+            <p>Hi ! I'm</p>
+            <p class="text-bold">Jonas Martinez,</p>
+            <p class="text-bold">a Fullstack Developer at Lenra, France</p>
+        </div>
+
+        <p class="text-light">Constantly developing new skills and keeping an eye on emerging technologies. Passionate
+            about exploring and applying innovative solutions to real-world problems.</p>
+
+        <button class="button-primary" onclick="location.href='about.html'">Learn More</button>
+
+        <img class="shadow" src="img/me.png" alt="Jonas' Picture">
+    </section>
+
+    <section>
+        <p>Socials</p>
+        <div>
+            <a href="https://github.com/jonas-martinez" target="_blank">
+                <img class="shadow" src="img/github.svg" alt="Github Logo">
+            </a>
+            <a href="https://www.linkedin.com/in/jonas-martinez-69b62a163/" target="_blank">
+                <img class="shadow" src="img/linkedin.svg" alt="LinkedIn Logo">
+            </a>
+        </div>
+    </section>
+</body>
+
+</html>
diff --git a/img/burger.svg b/img/burger.svg
diff --git a/img/github.svg b/img/github.svg
diff --git a/img/linkedin.svg b/img/linkedin.svg
diff --git a/img/me.png b/img/me.png
diff --git a/img/signature.png b/img/signature.png