diff --git a/Gemfile b/Gemfile index ccd4ffd..b8222f2 100644 --- a/Gemfile +++ b/Gemfile @@ -1,2 +1,3 @@ source "https://rubygems.org" -gem "jekyll", "~> 4.3" \ No newline at end of file +gem "jekyll", "~> 4.3" +gem "jekyll-datapage-generator" \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock index c3c1f99..3f78dd4 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -31,6 +31,7 @@ GEM safe_yaml (~> 1.0) terminal-table (>= 1.8, < 4.0) webrick (~> 1.7) + jekyll-datapage-generator (1.4.0) jekyll-sass-converter (3.0.0) sass-embedded (~> 1.54) jekyll-watch (2.2.1) @@ -65,6 +66,7 @@ PLATFORMS DEPENDENCIES jekyll (~> 4.3) + jekyll-datapage-generator BUNDLED WITH 2.4.2 diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..ddc4658 --- /dev/null +++ b/_config.yml @@ -0,0 +1,11 @@ +plugins: + - jekyll-datapage-generator + +page_gen: +- data: work + template: experience + dir: experience + index_files: false + name: id + title: title + page_data_prefix: data \ No newline at end of file diff --git a/_data/techs.yml b/_data/techs.yml new file mode 100644 index 0000000..d4caa11 --- /dev/null +++ b/_data/techs.yml @@ -0,0 +1,47 @@ +html: + name: HTML + fore: white + back: orangered + link: https://html.spec.whatwg.org/multipage/ + +css: + name: CSS + fore: white + back: royalblue + link: https://www.w3.org/Style/CSS/Overview.en.html + +js: + name: JavaScript + fore: darkslategray + back: gold + link: https://en.wikipedia.org/wiki/JavaScript + +php: + name: PHP + fore: black + back: lightsteelblue + link: https://www.php.net + +docker: + name: Docker + fore: dodgerblue + back: white + link: https://www.docker.com + +azure: + name: Azure + fore: whitesmoke + back: steelblue + link: https://azure.microsoft.com/en-us/ + +mariadb: + name: MariaDB + fore: black + back: peru + link: https://mariadb.org + +react: + name: React + fore: cyan + back: black + link: https://reactjs.org \ No newline at end of file diff --git a/_data/work.yml b/_data/work.yml index 96b2421..16a5c19 100644 --- a/_data/work.yml +++ b/_data/work.yml @@ -1,12 +1,11 @@ malung: - title: - Example - - subtitle: - Just A Test - - stack: - [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ] + id: malung + title: Example + subtitle: Just A Test + stack: [ html, css, js, php, docker, mariadb, azure ] + image: /res/avatar.svg + link: / + color: yellow description: Lorem Ipsum is simply dummy text of the printing and typesetting industry. @@ -24,27 +23,17 @@ malung: - It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. - - image: - /res/avatar.svg - - link: - / - - color: - yellow #*----------------------------------------------------------------------------*# freshmanual: - title: - Example - - subtitle: - Just A Test - - stack: - [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ] + id: freshmanual + title: Example + subtitle: Just A Test + stack: [ html, css, js, php, docker, mariadb, azure ] + image: /res/avatar.svg + link: / + color: blue description: Lorem Ipsum is simply dummy text of the printing and typesetting industry. @@ -62,27 +51,17 @@ freshmanual: - It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. - - image: - /res/avatar.svg - - link: - / - - color: - blue #*----------------------------------------------------------------------------*# pollbuddy: - title: - Example - - subtitle: - Just A Test - - stack: - [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ] + id: pollbuddy + title: Example + subtitle: Just A Test + stack: [ html, css, js, php, docker, mariadb, azure ] + image: /res/avatar.svg + link: / + color: green description: Lorem Ipsum is simply dummy text of the printing and typesetting industry. @@ -100,27 +79,17 @@ pollbuddy: - It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. - - image: - /res/avatar.svg - - link: - / - - color: - green #*----------------------------------------------------------------------------*# rpi-crisis: - title: - Example - - subtitle: - Just A Test - - stack: - [ PHP, JS, CSS, HTML, Docker, MariaDB, Azure ] + id: rpi-crisis + title: Example + subtitle: Just A Test + stack: [ html, css, js, php, docker, mariadb, azure ] + image: /res/avatar.svg + link: / + color: red description: Lorem Ipsum is simply dummy text of the printing and typesetting industry. @@ -138,14 +107,5 @@ rpi-crisis: - It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. - - image: - /res/avatar.svg - - link: - / - - color: - red #*----------------------------------------------------------------------------*# \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index ef65674..ed48d7f 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -25,7 +25,7 @@ {{ content }} -
+
{% include footer.html %} diff --git a/_layouts/experience.html b/_layouts/experience.html new file mode 100644 index 0000000..456456b --- /dev/null +++ b/_layouts/experience.html @@ -0,0 +1,45 @@ +--- +title: Example +layout: default +--- + +{% assign malung = site.data.work[page.data.id] %} +{% assign techs = site.data.techs %} + + + + +
+ +
+
+

+ {{malung.description}} +

+
+
    + {% for outcome in malung.outcomes %} +
  • {{outcome}}
    • + {% endfor %} +
+ View Example +
+
+
+

Image Not Available

+
+
+ {% for tech in malung.stack %} + {% assign data = techs[tech] %} + {{data.name}} + {% endfor %} +
+
+
+
\ No newline at end of file diff --git a/experience/malung.html b/experience/malung.html deleted file mode 100644 index 92d1fc8..0000000 --- a/experience/malung.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Example -description: A description of Maxim Voldman Hutz's work on Example. -layout: default ---- - - - -
- -
-
-

- Lorem Ipsum is simply dummy text of the printing and typesetting industry. - Lorem Ipsum has been the industry's standard dummy text ever since the - 1500s, when an unknown printer took a galley of type and scrambled it to - make a type specimen book. -

-
-
    -
  • - Lorem Ipsum is simply dummy text of the printing and typesetting industry. -
    • -
  • - Lorem Ipsum has been the industry's standard dummy text ever since the - 1500s, when an unknown printer took a galley of type and scrambled it to - make a type specimen book. -
    • -
  • - It has survived not only five centuries, but also the leap into electronic - typesetting, remaining essentially unchanged. -
    • -
- View Example -
-
- -
-
-
\ No newline at end of file diff --git a/styles/404.css b/styles/404.css index 24a0ed0..a6a43e2 100644 --- a/styles/404.css +++ b/styles/404.css @@ -1,6 +1,6 @@ #notfound { --color: var(--dark) linear-gradient(#0000, #0003); - flex: 1; + flex: 99999999999999; display: flex; justify-content: center; align-items: center; diff --git a/styles/default.css b/styles/default.css index 105b171..be11375 100644 --- a/styles/default.css +++ b/styles/default.css @@ -171,7 +171,7 @@ nav { /*----------------------------------------------------------------------------*/ #projects { - padding: 30px auto; + padding: 30px 0; position: relative; display: flex; flex-direction: column; diff --git a/styles/experience.css b/styles/experience.css index 8375dc4..f299406 100644 --- a/styles/experience.css +++ b/styles/experience.css @@ -13,6 +13,12 @@ display: flex; flex-direction: column; align-items: flex-start; + text-align: justify; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + -o-hyphens: auto; + hyphens: auto; } #content { @@ -20,14 +26,14 @@ flex-wrap: wrap-reverse; align-items: flex-end; gap: 30px; + padding-bottom: 30px; } #image { - flex: 1; background-color: #ccc; border-radius: 10px; height: 300px; - min-width: min(500px, 100%); + width: 100%; } #description { @@ -37,4 +43,28 @@ flex-direction: column; align-items: flex-start; min-width: min(300px, 100%); +} + +#image-side { + flex: 1; + gap: 30px; + display: flex; + flex-direction: column; + align-items: flex-start; + min-width: min(500px, 100%); +} + +#stack { + display: flex; + gap: 20px; + flex-flow: row wrap; +} + +#stack .chip { + flex: 1; +} + +#stack::after { + content: ""; + flex: 1000000; } \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index 8ac4e30..8415637 100644 --- a/styles/global.css +++ b/styles/global.css @@ -31,8 +31,9 @@ .white { --color: white } .flex-space, .flex, br { flex-grow: 1 } -.flex.dark { background-color: var(--dark); } +.flex.dark { background-color: var(--dark) } .space { flex: 1000 } +.npad { padding: 0 !important } /*----------------------------------------------------------------------------*/ diff --git a/styles/tech.css b/styles/tech.css new file mode 100644 index 0000000..c1ad712 --- /dev/null +++ b/styles/tech.css @@ -0,0 +1,24 @@ +--- +--- + +.chip { + font-size: 15px; + font-family: "Open Sans"; + font-weight: 900; + display: inline-flex; + justify-content: center; + align-items: center; + padding: 5px 20px; + border-radius: 10px; + text-decoration: none; +} + +{% for tech in site.data.techs %} + {% assign id = tech[0] %} + {% assign data = tech[1] %} + + .chip.{{id}} { + background-color: {{data.back}}; + color: {{data.fore}}; + } +{% endfor %} \ No newline at end of file