first commit

tolunaydundar · Aug 3, 2023 · fd7a20c · fd7a20c
commit fd7a20c
Show file tree

Hide file tree

Showing 20 changed files with 472 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/.DS_Store
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/logo/github-logo-light.png b/images/logo/github-logo-light.png
diff --git a/images/logo/github-logo.png b/images/logo/github-logo.png
diff --git a/images/logo/instagram-logo-light.png b/images/logo/instagram-logo-light.png
diff --git a/images/logo/instagram-logo.png b/images/logo/instagram-logo.png
diff --git a/images/logo/linkedin-logo-light.png b/images/logo/linkedin-logo-light.png
diff --git a/images/logo/linkedin-logo.png b/images/logo/linkedin-logo.png
diff --git a/images/logo/mario-auditore-logo.png b/images/logo/mario-auditore-logo.png
diff --git a/images/logo/super-mario-logo.png b/images/logo/super-mario-logo.png
diff --git a/images/logo/twitter-logo-light.png b/images/logo/twitter-logo-light.png
diff --git a/images/logo/twitter-logo.png b/images/logo/twitter-logo.png
diff --git a/images/placeholder/mario-placeholder1.png b/images/placeholder/mario-placeholder1.png
diff --git a/images/placeholder/mario-placeholder2.png b/images/placeholder/mario-placeholder2.png
diff --git a/images/placeholder/mario-placeholder3.png b/images/placeholder/mario-placeholder3.png
diff --git a/images/placeholder/mario-placeholder4.png b/images/placeholder/mario-placeholder4.png
diff --git a/index.html b/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Henlo</title>
+
+        <link rel="stylesheet" href="./styles/main.css">
+        <link rel="stylesheet" href="./styles/mobile.css" media="screen and (max-width: 1024px)">
+
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
+    </head>
+
+    <body>
+        <nav id="navbar">
+            <p>TD</p>
+            <a href="#about">About</a>
+            <a href="#projects">Portfolio</a>
+            <a href="#contact">Contact</a>
+        </nav>
+
+        <section id="about">
+            <div id="mario-logo">
+                <a href="https://www.youtube.com/watch?v=RJcPc6OQ384" target="_blank"><img
+                        src="./images/logo/super-mario-logo.png" alt=""></a>
+                <h1 id="welcome-header">It's a me! Mario!</h1>
+                <p id="secret-text">Congratulations! <br>Click on the image to watch the secret video.</p>
+            </div>
+
+        </section>
+
+        <section id="projects">
+            <h2 id="projects-header">Portfolio</h2>
+
+            <div id=project-tiles>
+                <div class="project-tile">
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sed ut delectus vero ex sunt?
+                        Accusantium laboriosam dolore eius ea incidunt nesciunt minus vero ratione unde repellat
+                        architecto commodi veritatis, modi corrupti quisquam ducimus natus magnam! Quibusdam ipsum,
+                        doloribus, laudantium asperiores earum odio, quo veniam cumque sunt nihil tempora quisquam!</p>
+                    <img src="./images/placeholder/mario-placeholder1.png" alt="placeholder">
+                </div>
+
+                <div class="project-tile">
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam ipsum neque numquam consequuntur
+                        et explicabo? Consequatur eligendi fugiat neque natus magni debitis saepe obcaecati ex. Tempora
+                        aspernatur, architecto cupiditate praesentium nesciunt provident esse qui accusamus! Eveniet
+                        assumenda, tenetur deleniti repudiandae quod ipsam est eaque, vel qui quia, rem voluptatibus
+                        quaerat?</p>
+                    <img src="./images/placeholder/mario-placeholder2.png" alt="placeholder">
+                </div>
+
+                <div class="project-tile">
+                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut repellendus quod consectetur
+                        repellat corporis cum magnam quaerat expedita, illum culpa pariatur, illo molestiae dignissimos,
+                        sunt est? Earum animi, sint ea quam placeat suscipit maiores vero tempora eveniet provident ipsa
+                        ad, repudiandae perspiciatis delectus ex amet eius, aliquam minus culpa similique!</p>
+                    <img src="./images/placeholder/mario-placeholder3.png" alt="placeholder">
+                </div>
+
+                <div class="project-tile">
+                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia quos optio dolorum
+                        perspiciatis assumenda accusantium. Tenetur consequuntur error quae beatae odio minima
+                        consequatur iusto iure qui saepe reiciendis explicabo ipsum rerum voluptatum, cumque deleniti
+                        ratione eaque repellendus suscipit omnis nostrum nemo earum ipsa quisquam? Itaque at
+                        perspiciatis qui maxime fuga!</p>
+                    <img src="./images/placeholder/mario-placeholder4.png" alt="placeholder">
+                </div>
+            </div>
+        </section>
+
+        <section id="contact">
+            <h2 id="contact-header">Contact</h2>
+
+            <div id="contact-links">
+                <div id="github-logo"><a href="https://github.com/tolunaydundar" target="_blank"><img
+                            src="./images/logo/github-logo.png" alt="github-logo"></a></div>
+                <div id="linkedin-logo"><a href="https://www.linkedin.com/in/tolunaydundar/" target="_blank"><img
+                            src="./images/logo/linkedin-logo.png" alt="linkedin-logo"></a></div>
+                <div id="twitter-logo"><a href="#contact"><img src="./images/logo/twitter-logo.png"
+                            alt="twitter-logo"></a></div>
+                <div id="instagram-logo"><a href="#contact"><img src="./images/logo/instagram-logo.png"
+                            alt="instagram-logo"></a></div>
+            </div>
+
+            <div id="image-sources">
+                <div>Super Mario image from <a
+                        href="https://www.teahub.io/viewwp/mmRbwo_super-mario-bross-wallpaper-hd/"
+                        target="_blank">www.teahub.io</a></div>
+                <div>Mario and Luigi image from <a href="https://pixelz.cc/images/mario-and-luigi-uhd-4k-wallpaper/"
+                        target="_blank">www.pixelz.cc</a></div>
+                <div>Icons made by <a href="https://www.freepik.com" title="Freepik" target="_blank">Freepik</a> from <a
+                        href="https://www.flaticon.com/" title="Flaticon" target="_blank">www.flaticon.com</a></div>
+                <div>Super Mario logo vector from <a href="https://seeklogo.com/vector-logo/247880/super-mario"
+                        target="_blank">www.seeklogo.com</a></div>
+                <div>Icons made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect"
+                        target="_blank">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon"
+                        target="_blank">www.flaticon.com</a></div>
+                <div>Super Mario characters image from <a
+                        href="https://www.wallpaperflare.com/super-mario-wallpaper-mario-bros-luigi-yoshi-princess-peach-wallpaper-pczgm"
+                        target="_blank">www.wallpaperflare.com</a></div>
+                <div>Mario Auditore image by <a href="https://assassinscreed.fandom.com/wiki/User:Freeze129"
+                        target="_blank">Freeze129</a> from <a
+                        href="https://assassinscreed.fandom.com/wiki/Mario_Auditore"
+                        target="_blank">www.assassinscreed.fandom.com</a></div>
+                <div>Mario Mushrooms Pattern made by <a href="https://www.deviantart.com/lucasavancini"
+                        target="_blank">lucasavancini</a> from <a
+                        href="https://www.deviantart.com/lucasavancini/art/Mario-Mushrooms-Pattern-158362772"
+                        target="_blank">www.deviantart.com</a></div>
+            </div>
+        </section>
+    </body>
+
+</html>
diff --git a/styles/main.css b/styles/main.css
@@ -0,0 +1,180 @@
+html,
+body {
+    width: 100%;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    font-family: 'Permanent Marker', cursive, 'Times New Roman', Times, serif;
+}
+
+#navbar {
+    height: 50px;
+    width: 100vw;
+    padding-right: 20px;
+    box-sizing: border-box;
+    display: flex;
+    position: fixed;
+    align-items: center;
+    justify-content: flex-end;
+    background-color: #000C66;
+}
+
+#navbar p {
+    margin-left: 20px;
+    margin-right: auto;
+    color: white;
+}
+
+#navbar a {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    color: white;
+    padding: 0 15px;
+}
+
+#navbar a:hover {
+    background-color: black;
+}
+
+#about {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    background-color: brown;
+    text-shadow: black 1px 0 10px;
+    border-bottom: 2rem solid black;
+}
+
+#about #mario-logo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#about #mario-logo #secret-text {
+    display: none;
+}
+
+#about #mario-logo:hover {
+    background-image: url(../images/logo/mario-auditore-logo.png);
+    background-size: 150px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+#about #mario-logo:hover img {
+    opacity: 0;
+}
+
+#about #mario-logo:hover #secret-text {
+    display: unset;
+    text-align: center;
+}
+
+#projects {
+    min-height: 100vh;
+    min-width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 2rem solid black;
+}
+
+#projects #project-tiles {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: repeat(2, 1fr);
+    margin: 0 1rem;
+}
+
+#projects #project-tiles .project-tile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+#projects #project-tiles .project-tile p {
+    text-align: center;
+    text-shadow: slategrey 1px 0 10px;
+}
+
+#contact {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: rgb(246, 13, 245);
+    background: linear-gradient(160deg, rgba(245, 0, 252, 1) 0%, rgba(254, 165, 165, 1) 57%, rgba(255, 255, 255, 1) 99%);
+}
+
+#contact #contact-header {
+    margin-top: 80px;
+}
+
+#contact #contact-links {
+    margin: auto;
+    display: flex;
+    gap: 15px;
+}
+
+#contact #contact-links a img {
+    height: 100px;
+}
+
+#contact #contact-links #github-logo:hover {
+    background-image: url(../images/logo/github-logo-light.png);
+    background-size: 100px;
+    background-repeat: no-repeat;
+}
+
+#contact #contact-links #github-logo:hover img {
+    opacity: 0;
+}
+
+#contact #contact-links #linkedin-logo:hover {
+    background-image: url(../images/logo/linkedin-logo-light.png);
+    background-size: 100px;
+    background-repeat: no-repeat;
+}
+
+#contact #contact-links #linkedin-logo:hover img {
+    opacity: 0;
+}
+
+#contact #contact-links #twitter-logo:hover {
+    background-image: url("../images/logo/twitter-logo-light.png");
+    background-size: 100px;
+    background-repeat: no-repeat;
+}
+
+#contact #contact-links #twitter-logo:hover img {
+    opacity: 0;
+}
+
+#contact #contact-links #instagram-logo:hover {
+    background-image: url("../images/logo/instagram-logo-light.png");
+    background-size: 100px;
+    background-repeat: no-repeat;
+}
+
+#contact #contact-links #instagram-logo:hover img {
+    opacity: 0;
+}
+
+
+#contact #image-sources div {
+    text-align: center;
+}
diff --git a/styles/mobile.css b/styles/mobile.css
@@ -0,0 +1,40 @@
+#navbar {
+    justify-content: center;
+}
+
+#navbar p {
+    display: none;
+}
+
+#projects {
+    height: 100%;
+    max-height: none;
+}
+
+#projects #project-tiles {
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+    margin-bottom: 20px;
+}
+
+#projects #project-tiles .project-tile {
+    width: 100%;
+}
+
+#projects #project-tiles .project-tile img {
+    max-width: 80%;
+}
+
+#contact {
+    min-height: 100vh;
+    height: 100%;
+}
+
+#contact #contact-links {
+    flex-direction: column;
+}
+
+#contact #image-sources {
+    font-size: x-small;
+}