Refactoring Technical skills to use flex box and customizeable column…

… length.
aamay001 · Oct 1, 2020 · b28a96b · b28a96b
1 parent e380027
commit b28a96b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/src/components/Resume/TechnicalSkills.js b/src/components/Resume/TechnicalSkills.js
@@ -17,9 +17,8 @@ const TechnicalSkills = ({ techSkills, showSkillLevel, font }) => (
     <hr />
     <div className="grid-container">
       {techSkills.map(
-        (skill, index) => skill.isVisible !== false &&
-          (index < 2 && (
-            <div key={uuid()} className={`grid-column-${index + 1}`}>
+        (skill, index) => skill.isVisible !== false && (
+            <div key={uuid()} className="grid-column" style={{ flexBasis: skill.columnWidthPercent || undefined}}>
               <h3 style={{ fontFamily: font }}>
                 {skill.category}
               </h3>
@@ -31,8 +30,7 @@ const TechnicalSkills = ({ techSkills, showSkillLevel, font }) => (
                   </div>
                 ))
                 : skill.keywords.map((kw, skillIndex) => (skillIndex === skill.keywords.length - 1 ? retString(kw) : `${retString(kw)}, `))}
-            </div>
-          )),
+            </div>)
       )}
     </div>
   </section>

diff --git a/src/resume-data.js b/src/resume-data.js
@@ -123,6 +123,25 @@ const Resume = {
       ],
       isVisible: true,
     },
+    {
+			"category": "Custom Category",
+			"keywords": [
+				{
+					"name": "Item 1",
+					"level": 3
+				},
+				{
+					"name": "Item 2",
+					"level": 4
+				},
+				{
+					"name": "Item 3",
+					"level": 4
+				}
+			],
+			"isVisible": true,
+			"columnWidthPercent": "33.33%"
+		}
   ],
   projects: [
     {

diff --git a/src/styles/Resume.css b/src/styles/Resume.css
@@ -170,18 +170,18 @@
 }
 
 .resume-tech-skills .grid-container {
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: 50% 50%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
 }
 
-.resume-tech-skills .grid-column-1,
-.resume-tech-skills .grid-column-2 {
-  grid-column-start: 1;
+.resume-tech-skills .grid-column {
+  flex-basis: 50%;
   margin-bottom: 15px;
 }
 
-.tech-skills-keyword{
+.tech-skills-keyword {
   width: 100%;
   height: 1.4em;
   padding: 0.1em 0;