Merge pull request #35 from SteinCodeAT/dev-te

fix: implemented seo imrpovements

src/components/StackItem.astro

@@ -6,6 +6,20 @@ import {projectImageTypes} from '../const.js'
 import EmbeddedMp4Gif from '../components/media/Mp4Gif.astro'
 
 const {classes, slug, title, projectType, description, imageObject, imageType, year} = Astro.props
+
+/*
+* We want to create a shortened description but it should not cut through a word but end in a whitespace
+* to make it more readable.
+*/
+// cut the description at a desired minimum length
+const minimumDescriptionLength = 170;
+const descriptionEnd = description.slice(minimumDescriptionLength, description.length)
+
+// find the first whitespace after the cut
+const firstWhiteSpaceIndex = descriptionEnd.indexOf(" ")
+
+// perform the final truncation of the description to the target whitespace 
+const shortDescription = description.slice(0, minimumDescriptionLength + firstWhiteSpaceIndex) + " ..."
 ---
 
 <style is:global>
@@ -200,12 +214,12 @@ const {classes, slug, title, projectType, description, imageObject, imageType, y
             }
             <div class="stack-item--image-text">
                 <div class="stack-item--image-title-area">
-                    <h2 class="stack-item--image-title">{title}</h2>
+                    <p class="stack-item--image-title">{title}</p>
                     <small class="stack-item--image-sub-title">{year}</small>
                 </div>
                 <div class="stack-item--image-text-bottom">
                     <p class="stack-item--image-short-description">
-                        {description}
+                        {shortDescription}
                     </p>
                     <p 
                         class="stack-item--image-link"

src/pages/index.astro

@@ -199,14 +199,9 @@ const projects = [
 
 
 const description = `
-Çağdaş Çeçen is a Vienna based media artist.
-Currently, his artistic practices focuses in the relationship between 
-human movement, space and uncertainity and he is developing 
-new ways of interaction between human and space by using synesthetic 
-nature of Quantum Physics not just symbolic or inspirational way 
-but as an active element in his artworks. 
-His projects have been already presented in several countries: 
-Austria, Italy, Poland, Greece, Bosnia and Herzegovina.
+Çağdaş Çeçen is a Vienna based media artist. His focus is in the relationship between 
+human movement, space and uncertainty and developing 
+new ways of interaction between human and space.
 `
 ---
 
@@ -265,7 +260,7 @@ Austria, Italy, Poland, Greece, Bosnia and Herzegovina.
 							<div class="circle-dots-container"></div>
 						</div>
 						<div class="content-card-2">
-							<h2 class="title font-family-header glow sub-title">MEDIA:ART<span class="tubelight">S</span></h2>
+							<h1 class="title font-family-header glow sub-title"><span class="title-prefix">Çağdaş Çeçen | </span>MEDIA:ART<span class="tubelight">S</span></h1>
 							<div class="line-container"></div>
 							<a href="#projects-section" class="highlight-link">&gt; Upcoming Projects</a>
 						</div>
@@ -506,7 +501,7 @@ Austria, Italy, Poland, Greece, Bosnia and Herzegovina.
 					Çağdaş Çeçen is a Vienna based media artist. He studied Media Art :
 					Digital Art at University of Applied Arts Vienna and Physics at University of Vienna.
 					Currently, his artistic practices focuses in the relationship between
-					human movement, space and uncertainity. Since 2018 he is developing
+					human movement, space and uncertainty. Since 2018 he is developing
 					new ways of interaction between human and space by using synesthetic
 					nature of Quantum Physics not just symbolic or inspirational way
 					but as an active element in his artworks. He strongly believes that

src/styles/index.css

@@ -252,6 +252,11 @@ header nav li {
 
 }
 
+
+.banner-card .content-card .title-prefix {
+    display: none;
+}
+
 .banner-card .content-card-2 {
     padding-top: 5vh;
 }