[TASK] Style improvements, add licence and readme

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Philipp Dieter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,9 @@
-# Heading
+# Portfolio Template
+
+![](src/images/portfolio-long.png)
+
+# Licence
+
+The project itself is published under the MIT licence.
+
+The assets used in this project are subject to their own licenses, this includes images, fonts and the css framework.

src/index.pug

@@ -37,7 +37,10 @@ html(lang = 'de')
               li Lobortis eu felis. Nulla felis velit
               li Ornare ac porttitor ut, rhoncus eu ipsum.
             div
-              a.button(href = 'https://www.example.com')
+              a.button(
+                href   = 'https://www.example.com',
+                target = '_blank'
+                )
                 span Zur Website
                 span.icon
                   include images/open-new-window.svg
@@ -60,7 +63,10 @@ html(lang = 'de')
               li Lobortis eu felis. Nulla felis velit
               li Ornare ac porttitor ut, rhoncus eu ipsum.
             div
-              a.button(href = 'https://www.example.com')
+              a.button(
+                href   = 'https://www.example.com',
+                target = '_blank'
+                )
                 span Zur Website
                 span.icon
                   include images/open-new-window.svg
@@ -83,7 +89,10 @@ html(lang = 'de')
               li Lobortis eu felis. Nulla felis velit
               li Ornare ac porttitor ut, rhoncus eu ipsum.
             div
-              a.button(href = 'https://www.example.com')
+              a.button(
+                href   = 'https://www.example.com',
+                target = '_blank'
+                )
                 span Zur Website
                 span.icon
                   include images/open-new-window.svg
@@ -92,6 +101,8 @@ html(lang = 'de')
               img.image-screenshot(src = 'images/portfolio.png')
     footer.footer
       .container.content
-        p Hintergrundbild von XY über unsplash.com
-        p
-          | https://unsplash.com/de/fotos/eine-nahaufnahme-einer-computertastatur-mit-verschwommenem-hintergrund-s1nDVsVgDVQ
+        a(
+          href   = 'https://unsplash.com/de/fotos/eine-nahaufnahme-einer-computertastatur-mit-verschwommenem-hintergrund-s1nDVsVgDVQ',
+          target = '_blank'
+          )
+          span Hintergrundbild: @adeveloper79, unsplash.com

src/styles/screen.sass

@@ -1,6 +1,7 @@
 @use 'fonts.css'
 :root
   --bulma-radius: 0
+  --bulma-radius-medium: 0
 html
   scroll-behavior: smooth
 body
@@ -22,7 +23,7 @@ body
     margin: 0 -48px
 img
   &.image-screenshot
-    border: 1px solid #999
+    border: 1px solid #000
 
 .svg-icon.svg-arrow-down
   width: 80px
@@ -35,6 +36,9 @@ body
   position: static
 h1, h2
   font-family: 'Source Code Pro', monospace
+  font-weight: lighter !important
+  text-wrap: balance
+ 
 .hero-body
   @media screen and (min-width:1024px)
     h1
@@ -43,19 +47,43 @@ h1, h2
       font-size: 120%
 h2
   border-bottom: 1px solid var(--bulma-body-color)
-  padding-bottom: .5714em
+  padding-bottom: .4rem
+p
+  hyphens: auto
+.content
+  padding: 3rem 3rem 1rem .75rem;
+  ul
+    list-style: square;
+.container-documents
+  margin-top: 2rem
+  padding-bottom: 5rem
+  border-bottom: 1px solid var(--bulma-border)
+  .buttons
+    justify-content: center
+    gap: 2rem
 .button
   border: 0
   border-bottom: 1px solid var(--bulma-body-color)
   box-shadow: none
-  span + span
-    margin-left: 10px
   .icon
     display: inline-block
     stroke: var(--bulma-body-color)
     position: relative
     bottom: 2px
+    &:last-child:not(:first-child)
+      margin-inline-start: 10px
     &,
     svg
       width: 16px
       height: 16px
+  &.is-medium
+    span + span
+      margin-left: 20px
+    .icon
+      bottom: 4px
+      &,
+      svg
+        width: 18px
+        height: 18px
+footer a
+  color: rgb(106, 110, 138);