[TASK] Init

.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/_site/

README.md

@@ -0,0 +1 @@
+# Heading

eleventy.config.js

@@ -0,0 +1,57 @@
+import path from 'path';
+import prettier from 'prettier';
+import pugPlugin from "@11ty/eleventy-plugin-pug";
+import sass from 'sass';
+import {deleteSync} from 'del';
+
+export default function(eleventyConfig) {
+  deleteSync('_site/*');
+  eleventyConfig.setInputDirectory('src');
+  eleventyConfig.addPlugin(pugPlugin);
+  eleventyConfig.addPassthroughCopy('src/styles/bulma.min.css', {debug: true});
+  eleventyConfig.addPassthroughCopy('src/images/*', {debug: true});
+  eleventyConfig.addPassthroughCopy('src/fonts/*', {debug: true});
+  eleventyConfig.addTemplateFormats("sass");
+  eleventyConfig.addExtension("sass", {
+    outputFileExtension: "css",
+    useLayouts: false,
+    compile: async function (inputContent, inputPath) {
+      let parsed = path.parse(inputPath);
+      if(parsed.name.startsWith("_")) {
+        return;
+      }
+      let result = sass.compileString(inputContent, {
+        loadPaths: [
+          parsed.dir || ".",
+          this.config.dir.includes,
+        ],
+        syntax: 'indented',
+      });
+      this.addDependencies(inputPath, result.loadedUrls);
+      return async (data) => {
+        return result.css;
+      };
+    },
+  });
+  eleventyConfig.addNunjucksAsyncShortcode('svgIcon', async (src, alt, sizes) => {
+    let metadata = await Image(src, {
+      formats: ['svg'],
+      dryRun: true,
+    });
+    return metadata.svg[0].buffer.toString();
+  });
+  eleventyConfig.addTransform("prettier", function (content) {
+    if ((this.page.outputPath || "").endsWith(".html")) {
+      let prettified = prettier.format(content, {
+        bracketSameLine: true,
+        printWidth: 512,
+        parser: "html",
+        tabWidth: 2
+      });
+      return prettified;
+    }
+
+    // If not an HTML output, return content as-is
+    return content;
+  });
+};

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "portfolio",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "@11ty/eleventy": "^3.1.2",
+    "@11ty/eleventy-plugin-pug": "^1.0.0",
+    "bulma": "^1.0.4",
+    "del": "^8.0.0",
+    "prettier": "^3.6.2",
+    "sass": "^1.91.0"
+  }
+}

src/images/nav-arrow-down.svg

@@ -0,0 +1 @@
+<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M6 9L12 15L18 9"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

src/images/open-new-window.svg

@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M21 3L15 3M21 3L12 12M21 3V9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H11"  stroke-width="1.5" stroke-linecap="round"></path></svg>

src/index.pug

@@ -0,0 +1,97 @@
+doctype html
+html(lang = 'de')
+  head
+    title Portfolio
+    meta(charset = 'utf-8')
+    meta(name = 'viewport', content = 'width=device-width, initial-scale=1')
+    link(rel = 'stylesheet', href = 'styles/bulma.min.css')
+    link(rel = 'stylesheet', href = 'styles/screen.css')
+  body
+    //-https://iconoir.com/
+    section.hero.is-fullheight
+      .hero-body
+        div.container
+          .hero-text
+            h1.title
+              | Vorname Nachname
+            p.subtitle
+              | Titel
+      .hero-foot
+        div.container
+          a(href = '#content')
+            .svg-icon.svg-arrow-down
+              include images/nav-arrow-down.svg
+    section.section#content
+      .container
+        .columns
+          .column.content.is-5
+            h2 Projekt 1
+            p.
+              Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.
+              Quisque in ultrices lectus. Nulla at urna diam. Proin sodales
+              lobortis libero eu facilisis. In sem urna, aliquam vel consectetur
+              sit amet, pulvinar sit amet lectus. Quisque molestie dapibus
+              libero non pellentesque.
+            ul 
+              li Vivamus quam arcu, dictum quis hendrerit eget
+              li Lobortis eu felis. Nulla felis velit
+              li Ornare ac porttitor ut, rhoncus eu ipsum.
+            div
+              a.button(href = 'https://www.example.com')
+                span Zur Website
+                span.icon
+                  include images/open-new-window.svg
+          .column.is-7
+            figure.image
+              img.image-screenshot(src = 'images/portfolio.png')
+    section.section
+      .container
+        .columns
+          .column.content.is-5
+            h2 Projekt 2
+            p.
+              Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.
+              Quisque in ultrices lectus. Nulla at urna diam. Proin sodales
+              lobortis libero eu facilisis. In sem urna, aliquam vel consectetur
+              sit amet, pulvinar sit amet lectus. Quisque molestie dapibus
+              libero non pellentesque.
+            ul 
+              li Vivamus quam arcu, dictum quis hendrerit eget
+              li Lobortis eu felis. Nulla felis velit
+              li Ornare ac porttitor ut, rhoncus eu ipsum.
+            div
+              a.button(href = 'https://www.example.com')
+                span Zur Website
+                span.icon
+                  include images/open-new-window.svg
+          .column.is-7
+            figure.image
+              img.image-screenshot(src = 'images/portfolio.png')
+    section.section
+      .container
+        .columns
+          .column.content.is-5
+            h2 Projekt 3
+            p.
+              Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.
+              Quisque in ultrices lectus. Nulla at urna diam. Proin sodales
+              lobortis libero eu facilisis. In sem urna, aliquam vel consectetur
+              sit amet, pulvinar sit amet lectus. Quisque molestie dapibus
+              libero non pellentesque.
+            ul 
+              li Vivamus quam arcu, dictum quis hendrerit eget
+              li Lobortis eu felis. Nulla felis velit
+              li Ornare ac porttitor ut, rhoncus eu ipsum.
+            div
+              a.button(href = 'https://www.example.com')
+                span Zur Website
+                span.icon
+                  include images/open-new-window.svg
+          .column.is-7
+            figure.image
+              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

src/styles/_fonts.css

@@ -0,0 +1,35 @@
+/* source-sans-3-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/source-sans-3-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* source-sans-3-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/source-sans-3-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* source-code-pro-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/source-code-pro-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* source-code-pro-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/source-code-pro-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

src/styles/screen.sass

@@ -0,0 +1,61 @@
+@use 'fonts.css'
+:root
+  --bulma-radius: 0
+html
+  scroll-behavior: smooth
+body
+  font-family: 'Source Sans 3', sans-serif
+.hero
+  background-image: url("../images/sandeep-s1nDVsVgDVQ-unsplash.jpg")
+  background-size: cover
+  background-position: center
+.hero-text
+  font-size: 200%
+  background-color: rgba(31, 34, 41, 0.5)
+  padding: 1.5rem
+  margin: 0 -1.5rem
+  p,
+  h1
+    color: #fff
+  @media screen and (min-width:1024px)
+    padding: 48px
+    margin: 0 -48px
+img
+  &.image-screenshot
+    border: 1px solid #999
+
+.svg-icon.svg-arrow-down
+  width: 80px
+  display: block
+  margin: 0 auto
+  svg
+    width: 80px
+    stroke: #fff
+body
+  position: static
+h1, h2
+  font-family: 'Source Code Pro', monospace
+.hero-body
+  @media screen and (min-width:1024px)
+    h1
+      font-size: 200%
+    .subtitle
+      font-size: 120%
+h2
+  border-bottom: 1px solid var(--bulma-body-color)
+  padding-bottom: .5714em
+.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
+    &,
+    svg
+      width: 16px
+      height: 16px