web/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Project pages now auto-generated with jekyll data.

Browse Source
This commit is contained in:
MajorDroolz
2023-01-04 21:32:02 -05:00
parent f0b2bc0474
commit 34e75a3748
13 changed files with 196 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Gemfile
View File

@@ -1,2 +1,3 @@
source "https://rubygems.org"
gem "jekyll", "~> 4.3"
gem "jekyll-datapage-generator"

2
Gemfile.lock
View File

@@ -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

11
_config.yml Normal file
View File

@@ -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

47
_data/techs.yml Normal file
View File

@@ -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

96
_data/work.yml
View File

@@ -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.
@@ -25,26 +24,16 @@ 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.
@@ -63,26 +52,16 @@ 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.
@@ -101,26 +80,16 @@ 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.
@@ -139,13 +108,4 @@ 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
#*----------------------------------------------------------------------------*#

2
_layouts/default.html
View File

@@ -25,7 +25,7 @@
{{ content }}
<div class="flex dark back"></div>
<div class="flex dark back npad"></div>
{% include footer.html %}
</body>

45
_layouts/experience.html Normal file
View File

@@ -0,0 +1,45 @@
---
title: Example
layout: default
---
{% assign malung = site.data.work[page.data.id] %}
{% assign techs = site.data.techs %}
<link rel="stylesheet" href="/styles/experience.css">
<link rel="stylesheet" href="/styles/tech.css">
<section id="experience" class="dark back">
<section id="banner" class="{{malung.color}} back">
<div>
<h1>{{malung.title}}</h1>
<i>{{malung.subtitle}}</i>
</div>
<button class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
</section>
<div id="content">
<div id="description">
<p>
{{malung.description}}
</p>
<hr class="lighter">
<ul>
{% for outcome in malung.outcomes %}
<li>{{outcome}}</li>
{% endfor %}
</ul>
<a href="/404" id="experience-button" class="nav-link white button r-icon" data-i="arrow_right">View Example</a>
</div>
<div id="image-side">
<div id="image" class="shadow">
<h1>Image Not Available</h1>
</div>
<div id="stack">
{% for tech in malung.stack %}
{% assign data = techs[tech] %}
<a class="chip {{tech}} shadow" href="{{data.link}}" target="_blank">{{data.name}}</a>
{% endfor %}
</div>
</div>
</div>
</section>

46
experience/malung.html
View File

@@ -1,46 +0,0 @@
---
title: Example
description: A description of Maxim Voldman Hutz's work on Example.
layout: default
---
<link rel="stylesheet" href="/styles/experience.css">
<section id="experience" class="dark back">
<section id="banner" class="yellow back">
<div>
<h1>Example</h1>
<i>Just A Test</i>
</div>
<button class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
</section>
<div id="content">
<div id="description">
<p>
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.
</p>
<hr class="lighter">
<ul>
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</li>
<li>
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.
</li>
<li>
It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.
</li>
</ul>
<a href="/404" id="experience-button" class="nav-link white button r-icon" data-i="arrow_right">View Example</a>
</div>
<div id="image" class="shadow">
</div>
</div>
</section>

2
styles/404.css
View File

@@ -1,6 +1,6 @@
#notfound {
--color: var(--dark) linear-gradient(#0000, #0003);
flex: 1;
flex: 99999999999999;
display: flex;
justify-content: center;
align-items: center;

2
styles/default.css
View File

@@ -171,7 +171,7 @@ nav {
/*----------------------------------------------------------------------------*/
#projects {
padding: 30px auto;
padding: 30px 0;
position: relative;
display: flex;
flex-direction: column;

34
styles/experience.css
View File

@@ -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 {
@@ -38,3 +44,27 @@
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;
}

3
styles/global.css
View File

@@ -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 }
/*----------------------------------------------------------------------------*/

24
styles/tech.css Normal file
View File

@@ -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 %}