selfdefined · jjziv · Jun 20, 2020
diff --git a/.eleventy.js b/.eleventy.js
@@ -153,7 +153,7 @@ module.exports = function(eleventyConfig) {
     var tags = [];
     collection.getAll()
       .map( item => {
-        if ( item.inputPath.indexOf("wants/") > -1 )
+        if ( item.inputPath.indexOf("devs/") > -1 )
         {
           item.data.tags.map( tag => {
             if ( tags.indexOf( tag ) < 0 )

diff --git a/_includes/assets/css/inline.css b/_includes/assets/css/inline.css
@@ -538,3 +538,90 @@ hr {
     content: " ";
   }
 }
+
+body {
+  margin: set-size(10);
+  background: get-color(soft-white, -1);
+}
+
+.profile {
+  background: get-color(white);
+  display: inline-block;
+  padding: set-size(4);
+  border-radius: set-size(2);
+}
+
+.profile__name {
+  @include set-type(display, 10, medium);
+  text-decoration: none;
+  color: get-color(soft-black);
+  display: block;
+
+  &:before {
+    $favorite-color: #c0ffee;
+    display: block;
+    content: '';
+    width: 100%;
+    height: set-size(8);
+    background: linear-gradient(to right, $favorite-color, adjust-hue($favorite-color, 120deg), adjust-hue($favorite-color, 240deg));
+    margin-bottom: set-size(4);
+    border-radius: set-size(micro);
+  }
+}
+
+.profile__pronoun {
+  @include set-type(display, 6, medium);
+  margin-bottom: set-size(4);
+  color: get-color(black, 5);
+}
+
+
+.profile__searching {
+  @include set-type(display, 5);
+  margin-bottom: set-size(4);
+}
+
+.profile__searching-as,
+.profile__searching-for {
+  @include set-type-weight(bold);
+  display: inline-block;
+  background-color: get-color(greenyellow, 0, 40);
+  padding: 0 set-size(1);
+}
+
+.profile__statement {
+  @include set-type(text, 5, medium);
+  margin-bottom: set-size(1);
+}
+
+.profile__tag-list,
+.profile__social-list {
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0 0 set-size(6) 0;
+}
+
+.profile__tag {
+  @include set-type(interface, 4);
+  @include set-type-line-height(xs);
+  background-color: get-color(soft-white, -1);
+  padding: set-size(1);
+  border-radius: set-size(micro);
+  display: inline-block;
+}
+
+.profile__tag--hu_lang {
+  background-color: get-color(blue, 7);
+}
+
+.profile__tag--cp_lang {
+  background-color: get-color(purple, 7);
+}
+
+.profile__tag--subject {
+  background-color: get-color(papayawhip);
+}
+
+.screenreader-only {
+  @include screen-reader-only;
+}
diff --git a/_includes/components/dev.njk b/_includes/components/dev.njk
@@ -0,0 +1,45 @@
+---
+layout: layouts/base.njk
+section: devs
+body_class: "profile"
+javascript:
+  head:
+    - /static/js/indieconfig.js
+    - /static/js/webaction.js
+  body:
+    - /static/js/sharing.js
+---
+
+<div class="profile">
+    <div class="profile__searching"><span class="profile__searching-as">Protege</span> Seeking <span class="profile__searching-for">Mentor</span></div>
+  <a class="profile__name" href="#" target="_blank">Taurean Bryant</a>
+  <div class="profile__pronoun">He/Him/His</div>
+
+
+  <div class="profile__statement">Human languages </div>
+  <ul class="profile__tag-list">
+    <li class="profile__tag profile__tag--hu_lang">English</li>
+    <li class="profile__tag profile__tag--hu_lang">language</li>
+    <li class="profile__tag profile__tag--hu_lang">language</li>
+  </ul>
+
+  <div class="profile__statement">Machines languages</div>
+  <ul class="profile__tag-list">
+    <li class="profile__tag profile__tag--cp_lang">CSS</li>
+    <li class="profile__tag profile__tag--cp_lang">SCSS</li>
+    <li class="profile__tag profile__tag--cp_lang">HTML</li>
+  </ul>
+
+  <div class="profile__statement">Areas of focus</div>
+  <ul class="profile__tag-list">
+    <li class="profile__tag profile__tag--subject">Accessibility</li>
+    <li class="profile__tag profile__tag--subject">Design Systems</li>
+    <li class="profile__tag profile__tag--subject">Front-end Web Development</li>
+  </ul>
+
+  <ul class="profile__social-list">
+    <li><a href="#" target="_blank"><i class="icon">codepen logo</i><span class="screenreader-only">Codepen</span></a></li>
+    <li><a href="#" target="_blank"><i class="icon">twitter logo</i><span class="screenreader-only">Twitter</span></a></li>
+    <li><a href="#" target="_blank"><i class="icon">github logo</i><span class="screenreader-only">Github</span></a></li>
+  </ul>
+</div>
diff --git a/_includes/components/devs.njk b/_includes/components/devs.njk
@@ -1,4 +1,4 @@
-{% from "macros/site.njk" import dev %}
+{% from "macros/site.njk" import devs %}
 
 <ul class="devs">
   {% for d in devs %}

diff --git a/_includes/layouts/dev.njk b/_includes/layouts/dev.njk
diff --git a/_includes/layouts/devs.njk b/_includes/layouts/devs.njk
@@ -1,7 +1,7 @@
 ---
 layout: layouts/base.njk
-section: wants
-permalink: "/wants/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}{% else %}index{% endif %}.html"
+section: devs
+permalink: "/devs/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}{% else %}index{% endif %}.html"
 pagination:
   data: collections.devs
   size: 10

diff --git a/_includes/macros/site.njk b/_includes/macros/site.njk
@@ -3,8 +3,8 @@
    ======================== #}
 
 {% macro dev( block_tag, additional_classes, url, title_tag, title, submitter ) %}
-  <{{ block_tag }} class="want {{ additional_classes }}">
-    <{{ title_tag }}><a class="want__title" href="{{ url }}">{{ title | markdownify | widont | safe }}</a></{{ title_tag }}>
+  <{{ block_tag }} class="dev {{ additional_classes }}">
+    <{{ title_tag }}><a class="dev" href="{{ url }}">{{ title | markdownify | widont | safe }}</a></{{ title_tag }}>
     <p class="dev__meta">Submitted by {{ submitter }}</p>
   </{{ block_tag }}>
 {% endmacro %}
diff --git a/admin/config.yml b/admin/config.yml
@@ -9,7 +9,7 @@ backend:
 media_folder: "static/img" # Media files will be stored in the repo under images/uploads
 
 collections:
-  # Wants
+  # Devs
   - name: "devs"
     label: "Dev"
     folder: "devs"

diff --git a/devs/devs.json b/devs/devs.json
@@ -1,3 +1,6 @@
 {
-  "layout": "layouts/dev.njk"
+  "title": "Joe Zatkovich",
+  "number": 1,
+  "tags": "test",
+  "description": "test"
 }
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
     "clean-css": "^4.2.1",
+    "fsevents": "^2.1.3",
     "html-minifier": "^4.0.0",
     "uglify-es": "^3.3.9"
   }

diff --git a/pages/about.md b/pages/about.md
@@ -12,5 +12,6 @@ Something goes here…
 
 * [Tatiana Mac](https://twitter.com/TatianaTMac) — Project Founder
 * [Aaron Gustafson](https://twitter.com/aarongustafson)
+* [Joe Zatkovich](https://twitter.com/jzbetweeting)
 
 Interested in getting involved? [Reach out!](/contact)
diff --git a/pages/contact.md b/pages/contact.md
@@ -8,4 +8,4 @@ permalink: /contact/
 
 Have a question? Need help with something? Drop us a line below.
 
-*Please note that all fields are required, but we **will not** retain any of the information you submit beyond the time it takes us to address your message.*
+*Please note that all fields are required, but we **will not** retain any of the information you submit beyond the time it takes us to address your message.*
diff --git a/pages/wants.md → pages/devs.md b/pages/wants.md → pages/devs.md
@@ -1,8 +1,8 @@
 ---
-layout: layouts/devs.njk
 title: The Devs of Colour
 description: Get to know the developers of colour.
 date: 2019-01-02T00:00:00.000Z
+permalink: /devs/
 navtitle: Devs
 tags:
   - nav
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,4 +8,4 @@ permalink: /contact/

		Have a question? Need help with something? Drop us a line below.

		Please note that all fields are required, but we will not* retain any of the information you submit beyond the time it takes us to address your message.*
		Please note that all fields are required, but we will not* retain any of the information you submit beyond the time it takes us to address your message.*