Page Spacing & FireFox

_Firefox doesn't like mixing justify-self as a child of a Grid css object, so Justify-self only works on display:grid objects, this seems wrong.... But firefox is the new Internet Explorer of CSS + JS
_AboutMe and Init didn't have any width with the page content

WhatAmI CSS & Skill Columns

_WhatAmI skills were fitting to a single column once in a while, auto-fit instead
_Reordered my skills some / added to
_Soften unselected Section buttons

Author: ProcStack

docs/js/pxlRooms/CampfireEnvironment/CampfireEnvironment.js

@@ -263,9 +263,11 @@ export class CampfireEnvironment extends RoomEnvironment{
 
     eWisps.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
 
+    particleSourcePos = particleSourcePos.clone();
+    particleSourcePos.y += -2.0; // Raise the ember wisps above the campfire
 
     let emberSettings = eWisps.getSettings();
-    emberSettings["vertCount"] = 30;
+    emberSettings["vertCount"] = 17;
     emberSettings["pScale"] = 10;
     emberSettings["offsetPos"] = particleSourcePos; // Offset center of the system
     //emberSettings["fadeOutScalar"] = opacityRolloff;
@@ -277,6 +279,11 @@ export class CampfireEnvironment extends RoomEnvironment{
     //emberSettings["offsetPos"] = particleSourcePos;
     //emberSettings["wanderInf"] = wanderInfluence;
     //emberSettings["wanderFrequency"] = wanderFrequency;
+    
+    emberSettings["EmberSpread"] = 9.0;
+    emberSettings["EmberFadeDistance"] = 0.052;
+    emberSettings["ShiftFromZero"] = 0.65;
+    emberSettings["MultPosXZ"] = 0.650;
 
     //
     let emberAtlasPicks=eWisps.elementDuplicator([ [0.0,0.75], [0.0,0.5], [0.25,0.75], [0.25,0.5] ],4);

docs/pages/aboutMe.js

@@ -25,7 +25,7 @@ const pageContentObject = {
   'subHeader' : '',
   'pageStyles' : {
     'block' : ['procPagesContentStyle', 'gitAboutMePageStyle'],
-    'before' : [ 'procPagesInnerBefore' ],
+    'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
     'parent' : [ 'procPagesParentStyle', 'gitAboutMePageParentStyle', 'procPagesLockVertical' ],
     'header' : [ 'procPagesHeaderStyle' ],
     'subHeader' : [],
@@ -40,7 +40,7 @@ const pageContentObject = {
     'sectionCaption' : [ 'gitAboutMePage-sectionCaptionStyle' ],
     'content' : [ 'procPagesScrollbarStyle' ],
     'media' : [ 'procPagesScrollbarStyle' ],
-    'after' : [ 'procPagesInnerAfter' ]
+    'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
   },
   'styleOverrides' : {
     'procPagesNavBlock' : 'procPagesNav_aboutMeStyle',

docs/pages/aboutMe/whatAmI.js

@@ -16,14 +16,14 @@ export const pageListingData = {
       <span class="textBold">Technical Artist</span>; 2D+3D asset optimization, shaders, & pipeline tools
     </div>
     <div class='procPagesAboutMe-skillListStyle'>
-      <span class="ppamSkillListing">Houdini</span>
-      <span class="ppamSkillListing">Maya</span>
-      <span class="ppamSkillListing">Unity</span>
+      <span class="ppamSkillListing">Houdini / VEX</span>
+      <span class="ppamSkillListing">Maya / MEL</span>
+      <span class="ppamSkillListing">Unity / C#</span>
       <span class="ppamSkillListing">Photoshop</span>
 
       <span class="ppamSkillListing">Python</span>
-      <span class="ppamSkillListing">VEX/MEL</span>
-      <span class="ppamSkillListing">C#</span>
+      <span class="ppamSkillListing">PyQT</span>
+      <span class="ppamSkillListing">GLSL</span>
       <span class="ppamSkillListing">JavaScript</span>
     </div>
 

docs/pages/blog.js

@@ -19,7 +19,7 @@ const pageContentObject = {
   'subHeader' : '',
   'pageStyles' : {
     'block' : ['procPagesContentStyle', 'gitBlogPageStyle'],
-    'before' : [ 'procPagesInnerBefore' ],
+    'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
     'parent' : [ 'procPagesParentStyle', 'gitBlogPageParentStyle', 'procPagesLayoutTripleStyle' ],
     'header' : [ 'procPagesHeaderStyle' ],
     'headerLine' : [ 'gitBlogPage-headerLine' ],
@@ -35,7 +35,7 @@ const pageContentObject = {
     'sectionCaption' : [ 'gitBlogPage-sectionCaptionStyle' ],
     'content' : [ 'gitBlogPageScrollbarStyle' ],
     'media' : [ 'gitBlogPageScrollbarStyle' ],
-    'after' : [ 'procPagesInnerAfter' ]
+    'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
   },
   'styleOverrides' : {
     'procPagesNavBlock' : 'procPagesNav_blogStyle',

docs/pages/makingOf.js

@@ -19,7 +19,7 @@ const pageContentObject = {
   'subHeader' : '',
   'pageStyles' : {
     'block' : [ 'procPagesContentStyle', 'gitReposPageStyle' ],
-    'before' : [ 'procPagesInnerBefore' ],
+    'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
     'parent' : [ 'procPagesParentStyle', 'gitReposPageParentStyle', 'procPagesLayoutTripleStyle' ],
     'header' : [ 'procPagesHeaderStyle' ],
     'headerLine' : [ 'gitReposPage-headerLine' ],
@@ -35,7 +35,7 @@ const pageContentObject = {
     'sectionCaption' : [ 'gitReposPage-sectionCaptionStyle' ],
     'content' : [ 'gitReposPageScrollbarStyle' ],
     'media' : [ 'gitReposPageScrollbarStyle' ],
-    'after' : [ 'procPagesInnerAfter' ]
+    'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
   },
   'styleOverrides' : {
     'procPagesNavBlock' : 'procPagesNav_reposStyle',

docs/pages/projects.js

@@ -39,7 +39,7 @@ const pageContentObject = {
   `,
   'pageStyles' : {
     'block' : ['procPagesContentStyle', 'gitProjectsPageStyle'],
-    'before' : [ 'procPagesInnerBefore' ],
+    'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
     'parent' : [ 'procPagesParentStyle', 'gitProjectsPageParentStyle', 'procPagesLayoutTripleStyle' ],
     'header' : [ 'procPagesHeaderStyle' ],
     'headerLine' : [ 'gitProjectsPage-headerLine' ],
@@ -56,7 +56,7 @@ const pageContentObject = {
     'sectionCaption' : [ 'gitProjectsPage-sectionCaptionStyle' ],
     'content' : [ 'gitProjectsPageScrollbarStyle' ],
     'media' : [ 'gitProjectsPageScrollbarStyle' ],
-    'after' : [ 'procPagesInnerAfter' ]
+    'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
   },
   'styleOverrides' : {
     'procPagesNavBlock' : 'procPagesNav_projectsStyle',

docs/pages/projects/dwitter.js

@@ -40,7 +40,7 @@ export const pageListingData = {
     <div class="procPagesSpacer"></div>
     
     <br> I'm running a <span class="textName">recursive</span> function to draw circles over & over,
-    <br>&nbsp;&nbsp; That are getting smaller as they go down.
+    <br>&nbsp;&nbsp; That are getting smaller as they go up.
     <br>&nbsp;&nbsp; After a short amount of time,
     <br>&nbsp;&nbsp;&nbsp;&nbsp; using Tan() to have them fall off the screen.
     <br>

docs/pages/projects/pxlVisualizer.js

@@ -13,7 +13,7 @@ export const pageListingData = {
   'content' : `
     <a href='https://github.com/ProcStack/pxlVisualizer' class='procPagesRepoLinkStyle' target='_blank'>pxlVisualizer</a> <span class="textDrinkMeAlice textItalic">2019</span>
     <br><span class="textBump">Different switchable trippy visuals</span>
-    <br><span class="textShrink textItalic textName ">Language - <span class="textBold">C++ / OpenFrameWorks</span></span>
+    <br><span class="textShrink textItalic textName ">Language - <span class="textBold">C++ / OpenFrameWorks & GLSL</span></span>
     <div class="pppHBar"></div>
     
     Originally written in Python for PyGame, decided it would be a fun project to learn C++ on.

docs/pages/pxlNav.js

@@ -25,7 +25,7 @@ const pageContentObject = {
   'subHeader' : `<span>A javascript player controller & environment manager<span class='procPagesHideWhenThin'>&nbsp;for Three.js</span></span>`,
   'pageStyles' : {
     'block' : ['procPagesContentStyle', 'gitPxlNavPageStyle'],
-    'before' : [ 'procPagesInnerBefore' ],
+    'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
     'parent' : [ 'procPagesParentStyle', 'gitPxlNavPageParentStyle', 'gitPxlNavPageScrollbarStyle', 'procPagesLayoutTripleStyle' ],
     'header' : [ 'procPagesHeaderStyle' ],
     'headerLine' : [ 'gitPxlNav-headerLine' ],
@@ -42,7 +42,7 @@ const pageContentObject = {
     'sectionCaption' : [ 'gitPxlNav-sectionCaptionStyle' ],
     'content' : [ 'gitPxlNavPageScrollbarStyle' ],
     'media' : [ 'gitPxlNavPageScrollbarStyle' ],
-    'after' : [ 'procPagesInnerAfter' ]
+    'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
   },
   'styleOverrides' : {
     'procPagesNavBlock' : 'procPagesNav_pxlNavStyle',

docs/style/procPages/procPages_aboutMeStyle.css

@@ -7,7 +7,7 @@
   z-index: 6;
   overflow: hidden;
   position: fixed;
-  left: max(0px, calc(min(15vw, max(0px, 100vw - 1250px) / 4.5)));
+  left: max( 1vmax, calc(min(15vw, max(0px, 100vw - 1250px) / 4.5)) );
   bottom: 2.5vmin;
 }
 
@@ -18,7 +18,7 @@
   color: rgba(237, 237, 237, 0.9);
   text-shadow: 1.5px 1.5px 4px rgba(37, 37, 37, 0.632);
   background-color: rgba(86, 86, 86, 0.37);
-  border-color: rgba(192, 192, 192, 0.85) rgba(144, 144, 144, 0.29);
+  border-color: rgba(192, 192, 192, 0.45) rgba(144, 144, 144, 0.2);
   border-style: solid;
 }
 .gitAboutMePage-sectionNavButtonStyle:hover{
@@ -64,7 +64,7 @@
 
 
 .gitAboutMePageParentStyle{
-  width: min(100vw, 1100px);
+  width: min( calc(100vw - 2vmax), 1100px);
   height: calc(90vh - 40px);
   display: grid;
   grid-auto-flow: row;
@@ -81,27 +81,11 @@
 }
 
 .gitAboutMePageStyle .procPagesInnerBefore {
-  content : '';
-  border-radius: var(--inner-before-after-radiusBefore);
-  background: transparent;
-  border-width: 0px 2px 2px 2px;
   border-color: #5d5d5d;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-bottom: var(--inner-before-after-margin);
 }
 
 .gitAboutMePageStyle .procPagesInnerAfter {
-  content : '';
-  border-radius: var(--inner-before-after-radiusAfter);
-  background: transparent;
-  border-width: 2px 2px 0px 2px;
   border-color: #5d5d5d;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-top: var(--inner-before-after-margin);
 }
 
 /* -- -- -- */
@@ -183,15 +167,16 @@
   max-width: 1200px;
   justify-self: center;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(45%, 200px), 1fr));
   grid-auto-rows: auto;
   gap: 8px 9px;
   margin-bottom: 10px;
 }
 
 @media screen and (max-width: 500px) {
   .procPagesAboutMe-skillListStyle{
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(min(45%, 100px), 1fr));
   }
 
 }