seo update 3

imhul · Feb 4, 2024 · 8530ade · 8530ade
1 parent ea2a9c0
commit 8530ade
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 37 deletions.
diff --git a/src/lib/components/Description/index.svelte b/src/lib/components/Description/index.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    const url =
-        'https://www.linkedin.com/in/oleksandr-plyuto-b45194104/';
+    import { data } from '$lib/utils/config';
 </script>
 
 <article>
+    <h1>{data.description}</h1>
     <h2>About Neumorphism</h2>
     <p>
         Neumorphism, an emerging design trend in the realm of user
@@ -21,39 +21,49 @@
     <p>
         One of the notable figures associated with the popularization
         of neumorphism is the renowned Ukrainian designer <a
-            href={url}
-            rel="noreferrer nofollow"
+            href={data.founder}
+            rel="noreferrer noopener"
             target="_blank">Oleksandr Plyuto</a
         >.
-        <a href={url} rel="noreferrer nofollow" target="_blank"
-            >Plyuto's</a
+        <a
+            href={data.founder}
+            rel="noreferrer noopener"
+            target="_blank">Plyuto's</a
         >
         innovative contributions to UI design have significantly influenced
         the adoption of neumorphism across various digital platforms. Through
         his creative vision and expertise,
-        <a href={url} rel="noreferrer noopener" target="_blank"
-            >Plyuto</a
+        <a
+            href={data.founder}
+            rel="noreferrer noopener"
+            target="_blank">Plyuto</a
         > has demonstrated how neumorphism can be effectively implemented
         to enhance user interactions and elevate the overall design aesthetics
         of applications and websites.
     </p>
 
     <p>
-        <a href={url} rel="noreferrer nofollow" target="_blank"
-            >Plyuto's</a
+        <a
+            href={data.founder}
+            rel="noreferrer noopener"
+            target="_blank">Plyuto's</a
         >
         emphasis on simplicity, elegance, and functionality resonates throughout
         his neumorphic designs, where each element is carefully crafted
         to strike a balance between aesthetics and usability. By leveraging
         the principles of light and shadow,
-        <a href={url} rel="noreferrer nofollow" target="_blank"
-            >Plyuto</a
+        <a
+            href={data.founder}
+            rel="noreferrer noopener"
+            target="_blank">Plyuto</a
         >
         creates visually appealing interfaces that not only captivate users
         but also provide intuitive navigation and seamless user experiences.
         As neumorphism continues to evolve as a prominent design trend,
-        <a href={url} rel="noreferrer nofollow" target="_blank"
-            >Oleksandr Plyuto's</a
+        <a
+            href={data.founder}
+            rel="noreferrer noopener"
+            target="_blank">Oleksandr Plyuto's</a
         > contributions serve as a testament to the innovative spirit and
         creative potential within the realm of UI design.
     </p>
@@ -66,8 +76,20 @@
         max-width: rem(1200);
         margin: 0 auto rem(100);
 
+        h1,
+        h2,
+        p {
+            color: var(--dark);
+            line-height: 140%;
+        }
+
+        h1 {
+            margin-bottom: rem(20);
+            font-size: 180%;
+        }
+
         h2 {
-            margin-bottom: rem(30);
+            margin-bottom: rem(20);
             font-size: 150%;
         }
 

diff --git a/src/lib/components/Header/index.svelte b/src/lib/components/Header/index.svelte
@@ -1,6 +1,15 @@
-<header>
-    <h1>Neumorphine.css - Concept CSS Library</h1>
+<script lang="ts">
+    import logo from '$lib/assets/logo.svg';
+    import { data } from '$lib/utils/config';
+</script>
 
+<header>
+    <img
+        src={logo}
+        alt="Neumorphine Logo"
+        width="50"
+        title={data.siteName}
+    />
     <a
         href="https://github.com/imhul/neumorphine.css"
         target="_blank"
@@ -21,35 +30,33 @@
 
 <style lang="scss">
     header {
-        position: absolute;
+        position: relative;
         top: 0;
         left: 0;
         width: 100%;
-        height: rem(50);
+        height: rem(90);
         display: flex;
         align-items: center;
         justify-content: flex-start;
         padding: 0 rem(20);
+        z-index: 1;
+        background-color: var(--light);
 
-        h1 {
-            font-size: rem(24);
-            color: var(--dark);
-            font-weight: 400;
+        @media screen and (min-width: 800px) {
+            position: absolute;
+            z-index: unset;
+            background-color: var(--transparent);
         }
 
         a {
             position: absolute;
             left: 50%;
-            top: rem(70);
-            transform: translateX(-50%);
+            top: 50%;
+            transform: translate(-50%, -50%);
             text-decoration: none;
             text-align: center;
             margin: 0 auto;
 
-            @media screen and (min-width: rem(1024)) {
-                top: rem(15);
-            }
-
             svg > path {
                 fill: var(--dark);
             }

diff --git a/src/lib/utils/config.ts b/src/lib/utils/config.ts
@@ -12,7 +12,7 @@ export const states = [
 ];
 
 export const defaults = {
-    lightColor: '#cfd8dc',
+    lightColor: '#eceff1',
     darkColor: '#546e7a',
     angle: 45,
     offset: 5,
@@ -38,5 +38,6 @@ export const data = {
     datePublished: '2024-02-01T20:27:01.288Z',
     homePage: 'https://weblogic.netlify.app/',
     gitHub: 'https://github.com/imhul',
-    googleId: 'GDG6jgEQmYmiM4K97vTzvksOLC97pq7b7f_8G0RIq8Y'
+    googleId: 'GDG6jgEQmYmiM4K97vTzvksOLC97pq7b7f_8G0RIq8Y',
+    founder: 'https://www.linkedin.com/in/oleksandr-plyuto-b45194104/'
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -28,7 +28,8 @@
 
 <style lang="scss">
     .output {
-        display: none;
+        max-height: 100vh;
+        overflow: hidden;
 
         .wrapper {
             width: 100%;
@@ -39,29 +40,32 @@
         }
 
         @media screen and (min-width: 800px) {
-            display: block;
+            max-height: 100%;
+            overflow: unset;
         }
     }
 
     .mobile-helper {
         position: fixed;
-        top: 0;
+        bottom: 0;
         left: 0;
         width: 100%;
-        height: 100%;
+        height: calc(100vh - rem(90));
         display: flex;
+        flex-flow: column wrap;
         align-items: center;
         justify-content: center;
         color: var(--primary);
+        background-color: var(--light);
 
         @media screen and (min-width: 800px) {
             display: none;
         }
 
         h1 {
-            max-width: 60%;
+            max-width: 70%;
             font-size: rem(34);
-            line-height: 1;
+            line-height: 120%;
             text-align: center;
         }
     }