MANY CLEANUP CHANGES

- organize work into renders and graphics
- notation
- add gfx

1 files changed, 163 insertions, 13 deletions

diff --git a/css/style.css b/css/style.css
index 7978e7f..ff41d6a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -300,12 +300,13 @@ h6 {
       height: 500px;
 }
 
-.project1 {
-      background: url(/projects/iced-out/assets/img.png) no-repeat 50% 50%;
+/*--------------- render section --------------- */
+.render1 {
+      background: url(/projects/renders/iced-out/assets/img.png) no-repeat 50% 50%;
       background-size: cover;
 }
 
-.project1::after {
+.render1::after {
       content: "iced out.";
       font-family: "Roboto Mono";
       font-size: 36px;
@@ -318,12 +319,12 @@ h6 {
       bottom: 0;
 }
 
-.project2 {
-      background: url(/projects/rockstar/assets/img.png) no-repeat 50% 50%;
+.render2 {
+      background: url(/projects/renders/rockstar/assets/img.png) no-repeat 50% 50%;
       background-size: cover;
 }
 
-.project2::after {
+.render2::after {
       content: "rockstar.";
       font-family: "Roboto Mono";
       font-size: 36px;
@@ -336,12 +337,12 @@ h6 {
       bottom: 0;
 }
 
-.project3 {
-      background: url(/projects/allegiance/assets/img.png) no-repeat 50% 50%;
+.render3 {
+      background: url(/projects/renders/allegiance/assets/img.png) no-repeat 50% 50%;
       background-size: cover;
 }
 
-.project3::after {
+.render3::after {
       content: "allegiance.";
       font-family: "Roboto Mono";
       font-size: 36px;
@@ -354,13 +355,13 @@ h6 {
       bottom: 0;
 }
 
-.project4 {
-      background: url(https://images.unsplash.com/photo-1435685813800-51ba4ceb9c4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1785&q=80) no-repeat 50% 50%;
+.render4 {
+      background: url(/projects/renders/?/assets/img.png) no-repeat 50% 50%;
       background-size: cover;
 }
 
-.project4::after {
-      content: "departure.";
+.render4::after {
+      content: "?.";
       font-family: "Roboto Mono";
       font-size: 36px;
       position: relative;
@@ -372,6 +373,155 @@ h6 {
       bottom: 0;
 }
 
+/*--------------- graphic section --------------- */
+.graphic1 {
+      background: url(/projects/graphics/devils-work/assets/img.png) no-repeat 50% 50%;
+      background-size: cover;
+}
+
+.graphic1::after {
+      content: "devils work.";
+      font-family: "Roboto Mono";
+      font-size: 36px;
+      position: relative;
+      color: #fff;
+      display: block;
+      top: 8%;
+      left: -60%;
+      right: 0;
+      bottom: 0;
+}
+
+.graphic2 {
+      background: url(/projects/graphics/swavy-pfps/assets/img2.png) no-repeat 50% 50%;
+      background-size: cover;
+}
+
+.graphic2::after {
+      content: "swavy pfps.";
+      font-family: "Roboto Mono";
+      font-size: 36px;
+      position: relative;
+      color: #fff;
+      display: block;
+      top: 80%;
+      left: 90%;
+      right: 0;
+      bottom: 0;
+}
+
+/*
+.graphic3 {
+      background: url(/projects/renders/allegiance/assets/img.png) no-repeat 50% 50%;
+      background-size: cover;
+}
+
+.graphic3::after {
+      content: "allegiance.";
+      font-family: "Roboto Mono";
+      font-size: 36px;
+      position: relative;
+      color: #fff;
+      display: block;
+      top: 80%;
+      left: -50%;
+      right: 0;
+      bottom: 0;
+}
+
+.graphic4 {
+      background: url(/projects/renders/devils-work/assets/img.png) no-repeat 50% 50%;
+      background-size: cover;
+}
+
+.render4::after {
+      content: "devils work.";
+      font-family: "Roboto Mono";
+      font-size: 36px;
+      position: relative;
+      color: #fff;
+      display: block;
+      top: 10%;
+      left: 90%;
+      right: 0;
+      bottom: 0;
+}
+*/
+
+/*--------------- category section --------------- */
+.category1 {
+      background: url(/projects/renders/iced-out/assets/img.png) no-repeat 50% 50%;
+      background-size: cover;
+}
+
+.category1::after {
+      content: "renders.";
+      font-family: "Roboto Mono";
+      font-size: 36px;
+      position: relative;
+      color: #fff;
+      display: block;
+      top: 8%;
+      left: -60%;
+      right: 0;
+      bottom: 0;
+}
+
+.category2 {
+      background: url(/projects/graphics/devils-work/assets/img.png) no-repeat 50% 50%;
+      background-size: cover;
+}
+
+.category2::after {
+      content: "graphics.";
+      font-family: "Roboto Mono";
+      font-size: 36px;
+      position: relative;
+      color: #fff;
+      display: block;
+      top: 80%;
+      left: 90%;
+      right: 0;
+      bottom: 0;
+}
+/*
+.category3 {
+      background: url(/projects/renders/allegiance/assets/img.png) no-repeat 50% 50%;
+      background-size: cover;
+}
+
+.category3::after {
+      content: "allegiance.";
+      font-family: "Roboto Mono";
+      font-size: 36px;
+      position: relative;
+      color: #fff;
+      display: block;
+      top: 80%;
+      left: -50%;
+      right: 0;
+      bottom: 0;
+}
+
+.category4 {
+      background: url(/projects/renders/devils-work/assets/img.png) no-repeat 50% 50%;
+      background-size: cover;
+}
+
+.category4::after {
+      content: "devils work.";
+      font-family: "Roboto Mono";
+      font-size: 36px;
+      position: relative;
+      color: #fff;
+      display: block;
+      top: 10%;
+      left: 90%;
+      right: 0;
+      bottom: 0;
+}
+*/
+
 @media(max-width: 768px) {
       .project {
             width: 90% !important;