Update skills section to portfolio

2 files changed, 95 insertions, 124 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
index 1381432..fe2b6db 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,21 +1,19 @@
 @import "https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto:300,400,500,700&display=swap";
-@import url('https://fonts.googleapis.com/css?family=Work+Sans:600&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Cantarell:400,700&display=swap');
-
-.contain {object-fit: contain;}
+.contain {
+  object-fit: contain;
+}
 
-.uk-button-text{
+.uk-button-text {
   border-bottom: 1px solid #333;
 }
 
-.uk-button-text::before{
+.uk-button-text::before {
   border-bottom: 1px solid mediumblue;
 }
 
-.footer-section h5{
+.footer-section h5 {
   margin-bottom: 5px;
   margin-top: 20px;
-
 }
 
 .footer {
@@ -25,18 +23,18 @@
   padding-top: 5em;
 }
 
-.uk-link,a{
-  color: #0077aa
+.uk-link,
+a {
+  color: #0077aa;
 }
 
-
-.uk-lightbox{
+.uk-lightbox {
   background: rgba(0, 0, 0, 0.7);
   /*As there isn't firefox support for this I won't use it*/
   /*backdrop-filter: blur(8px);*/
 }
 
-.uk-lightbox-toolbar{
+.uk-lightbox-toolbar {
   background: rgba(0, 0, 0, 0);
 }
 
@@ -44,23 +42,20 @@
   margin-bottom: 40px;
 }
 
-figcaption p{
+figcaption p {
   font-size: 0.8em;
   color: grey;
 }
 
-figure img{
+figure img {
   border: solid thin black;
   padding: 10px;
 }
 
-em{
-  color:unset;
+em {
+  color: unset;
 }
-img.experience{
+img.experience {
   width: 150px;
   height: 180px;
 }
-
-
-
diff --git a/layouts/index.html b/layouts/index.html
index 4424279..80afc65 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -98,60 +98,43 @@
 {{ end }}
 
 
-<!--
-
-   _____   _      _   _   _
-  / ____| | |    (_) | | | |
- | (___   | | __  _  | | | |  ___
-  \___ \  | |/ / | | | | | | / __|
-  ____) | |   <  | | | | | | \__ \
- |_____/  |_|\_\ |_| |_| |_| |___/
 
 
+<!-- portfolio -->
+{{ if .Site.Data.homepage.portfolio.enable }}
 
--->
-{{ if .Site.Data.homepage.skill.enable }}
-
-{{ range .Site.Data.homepage.skill.item }}
-<div id="{{ replace (replace .title " " "_") "." "_" }}" uk-modal>
-    <div class="uk-modal-dialog uk-modal-body">
-        <button class="uk-modal-close-default" type="button" uk-close></button>
-        <div class="uk-modal-header">
-            <h2 class="uk-modal-title">{{.title}}</h2>
-        </div>
-        <p>{{.description | safeHTML}}</p>
-    </div>
-</div>
-{{ end }}
-
-<section class="uk-margin-large-top uk-margin-large-bottom">
+<section class="uk-margin-large-bottom uk-margin-large-top">
     <div class="uk-container">
-        <h1 class="uk-heading-line uk-text-center uk-heading-medium"><span>Skills</span></h1>
-
-        <p class="uk-text-center uk-text-lead"><i>Click the images below to find out more</i></p>
-        <div class="uk-child-width-1-6@l uk-child-width-1-3@m uk-child-width-1-3@s uk-child-width-1-2 uk-text-center uk-flex-center"
-            uk-grid>
-            {{ range .Site.Data.homepage.skill.item }}
-            <div class="imagemargin">
-                <img class="contain skills" src="{{.logo}}" alt="{{.company}}" loading="lazy" style="cursor: pointer"
-                    uk-toggle="target: #{{ replace (replace .title " " "_") "." "_" }}">
-                <h4>{{.title }}</h4>
+        <h1 class="uk-heading-line  uk-heading-medium"><span>Portfolio</span></h1>
+        {{ range .Site.Data.homepage.portfolio.item }}
+        <div>
+        <h2 class="uk-text-center uk-text-bold uk-margin-large-top"> {{.title}} </h2>
+        <div class="uk-flex uk-flex-center">
+        <img src="{{.image}}" class="uk-width-medium uk-width-large@s" >
+        </div>
+        <p class="uk-text-center">{{.description}}</p>  
+        <div class="uk-flex uk-flex-center">
+            <div uk-grid>
+                {{ range .tools}}
+            <div>
+                <img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/{{.}}.svg" />
+            </div>
+            {{end}}
             </div>
-            {{ end }}
         </div>
-
-    </div>
+        <div class="uk-flex uk-flex-center uk-margin-medium-top"> 
+        <a href="{{.link}}" class="uk-text-center">Find out more</a>
+        </div>
+        </div>
+        {{end}}
 
 </section>
+{{ end }}
 
 
 
 
 
-
-<!-- /skills -->
-{{ end }}
-
 <!--
 
   ______                                _
@@ -168,14 +151,12 @@
 
 
 
-{{ if .Site.Data.homepage.experience.enable }}
 <!-- experience -->
-<section class="uk-margin-large-bottom">
+{{ if .Site.Data.homepage.experience.enable }}
 
+<section class="uk-margin-large-bottom">
     <div class="uk-container">
-        <h1 class="uk-heading-line uk-text-center uk-heading-medium"><span>Experience</span></h1>
-
-
+        <h1 class="uk-heading-line  uk-heading-medium"><span>Experience</span></h1>
 
         <div class="uk-child-width-1-4@m uk-child-width-1-2  uk-text-center uk-flex-center" uk-grid
             style="padding-left: 20px; padding-right: 20px">
@@ -197,67 +178,14 @@
             </div>
             {{ end }}
         </div>
-
-
-
-
-
-
-
 </section>
-<!-- ./experience -->
 {{ end }}
 
+<!-- ./experience -->
 
 
-<!--Hackathons-->
-{{ if .Site.Data.homepage.hackathons.enable }}
 
-<section class="uk-margin-large-bottom">
-    <div class="uk-container">
-        <h1 class="uk-heading-line uk-heading-medium uk-text-center"><span>Hackathons</span></h1>
-    </div>
-    <p class="uk-text-center uk-text-lead"><i>Hover over the logos to find out more</i></p>
-</section>
-<div class="uk-container uk-margin-large-bottom uk-text-center">
-    <ul id="hexGrid">
-        {{range .Site.Data.homepage.hackathons.item}}
-        <li class="hex">
-            <div class="hexIn">
-                <div class="hexLink">
-                    <img src="{{.image}}" alt="{{.title}}" loading="lazy" />
-                    {{if eq .url "none"}}
-                    <div style="all:unset">
-
-                        <h1>
-                            {{.title}}</h1>
-                    </div>
-                    {{else}}
-                    <a href="{{.url}}" class="text unset">
-
-                        <h1>
-                            {{.title}}</h1>
-                    </a>
 
-                    {{end}}
-                    {{if eq .url "none"}}
-                    <div style="all:unset">
-                        <p>
-                            {{.description}}</p>
-                    </div>
-                    {{else}}
-                    <a href="{{.url}}" class="text unset">
-                        <p>
-                            {{.description}}</p>
-                    </a>
-                    {{end}}
-                </div>
-            </div>
-        </li>
-        {{end}}
-    </ul>
-</div>
-{{end}}
 
 
 <!-- Certifications -->
@@ -266,7 +194,7 @@
 
 <section class="uk-margin-large-top uk-margin-medium-bottom">
     <div class="uk-container">
-        <h1 class="uk-heading-line uk-text-center uk-heading-medium"><span>Certifications</span></h1>
+        <h1 class="uk-heading-line  uk-heading-medium"><span>Certifications</span></h1>
 
         <p class="uk-text-center uk-text-lead"><i>Click the images below to view the proof</i></p>
         <div class="uk-child-width-1-6@l uk-child-width-1-3@m uk-child-width-1-3@s uk-child-width-1-2 uk-text-center uk-flex-center"
@@ -300,7 +228,7 @@
 
 <section class="uk-margin-large-top uk-margin-medium-bottom">
     <div class="uk-container">
-        <h1 class="uk-heading-line uk-text-center uk-heading-medium"><span>Awards and Achievements</span></h1>
+        <h1 class="uk-heading-line uk-heading-medium"><span>Awards and Achievements</span></h1>
 
         <div class="uk-child-width-1-6@l uk-child-width-1-3@m uk-child-width-1-3@s uk-child-width-1-2 uk-text-center uk-flex-center"
             uk-grid uk-height-match="target: > div > h4">
@@ -326,6 +254,54 @@
 
 <!-- /Awards -->
 
+<!--Hackathons-->
+{{ if .Site.Data.homepage.hackathons.enable }}
+
+<section class="uk-margin-large-bottom">
+    <div class="uk-container">
+        <h1 class="uk-heading-line uk-heading-medium "><span>Hackathons</span></h1>
+    </div>
+    <p class="uk-text-center uk-text-lead"><i>Hover over the logos to find out more</i></p>
+</section>
+<div class="uk-container uk-margin-large-bottom uk-text-center">
+    <ul id="hexGrid">
+        {{range .Site.Data.homepage.hackathons.item}}
+        <li class="hex">
+            <div class="hexIn">
+                <div class="hexLink">
+                    <img src="{{.image}}" alt="{{.title}}" loading="lazy" />
+                    {{if eq .url "none"}}
+                    <div style="all:unset">
+
+                        <h1>
+                            {{.title}}</h1>
+                    </div>
+                    {{else}}
+                    <a href="{{.url}}" class="text unset">
+
+                        <h1>
+                            {{.title}}</h1>
+                    </a>
+
+                    {{end}}
+                    {{if eq .url "none"}}
+                    <div style="all:unset">
+                        <p>
+                            {{.description}}</p>
+                    </div>
+                    {{else}}
+                    <a href="{{.url}}" class="text unset">
+                        <p>
+                            {{.description}}</p>
+                    </a>
+                    {{end}}
+                </div>
+            </div>
+        </li>
+        {{end}}
+    </ul>
+</div>
+{{end}}
 
 
 <!--
@@ -345,7 +321,7 @@
 <section class="uk-margin-xlarge-bottom">
     <div class="uk-container">
 
-        <h1 class="uk-heading-line uk-heading-medium uk-text-center uk-margin-large-bottom"><span>Education</span></h1>
+        <h1 class="uk-heading-line uk-heading-medium  uk-margin-large-bottom"><span>Education</span></h1>
 
 
         <div class=" uk-grid-large uk-child-width-1-3@s uk-child-width-1  uk-text-center uk-flex-center" uk-grid