fix: add new item

unreal-pixels · Jan 21, 2024 · e6913f3 · e6913f3
1 parent 1334daf
commit e6913f3
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 32 deletions.
diff --git a/public/api/portfolio-items.json b/public/api/portfolio-items.json
@@ -0,0 +1,9 @@
+[
+  {
+    "type": ["web"],
+    "image": "/images/json-linter.jpg",
+    "name": "JSON Linter",
+    "id": "json-linter",
+    "link": "https://jsonlinter.unrealpixels.com"
+  }
+]
diff --git a/public/images/json-linter.jpg b/public/images/json-linter.jpg
diff --git a/src/portfolio/images/test.jpg b/src/portfolio/images/test.jpg
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -31,6 +31,15 @@ $header-size: 70px;
   }
 }
 
+@mixin button-reset {
+  margin: 0;
+  padding: 0;
+  text-align: initial;
+  border: none;
+  display: inline-block;
+  background: none;
+}
+
 @mixin base-button {
   font-family: "Raleway", sans-serif;
   text-transform: uppercase;

diff --git a/src/views/Portfolio/Portfolio.scss b/src/views/Portfolio/Portfolio.scss
@@ -33,15 +33,17 @@
   }
 
   .portfolio-item {
+    @include button-reset();
+
     margin-bottom: 30px;
     position: relative;
   }
 
   .portfolio-item .portfolio-info {
-    opacity: 0;
+    opacity: 1;
     position: absolute;
-    left: 12px;
-    right: 12px;
+    left: 0;
+    right: 0;
     bottom: 0;
     z-index: 3;
     transition: all ease-in-out 0.3s;
@@ -51,14 +53,13 @@
 
   .portfolio-item .portfolio-info h4 {
     font-size: 18px;
-    color: #fff;
+    color: $background-color;
     font-weight: 600;
-    color: $text-color;
     margin-bottom: 5px;
   }
 
   .portfolio-item .portfolio-info p {
-    color: $text-color;
+    color: $background-color;
     font-size: 14px;
     margin-bottom: 0;
   }
@@ -67,13 +68,13 @@
   .portfolio-item .portfolio-info .details-link {
     position: absolute;
     right: 48px;
-    font-size: 28px;
-    top: calc(50% - 28px);
+    font-size: 24px;
+    top: calc(50% - 16px);
     color: $primary-color;
   }
 
-  .portfolio-item .portfolio-info .preview-link:hover,
-  .portfolio-item .portfolio-info .details-link:hover {
+  .portfolio-item:hover .portfolio-info .preview-link,
+  .portfolio-item:hover .portfolio-info .details-link {
     color: $secondary-color;
   }
 

diff --git a/src/views/Portfolio/index.tsx b/src/views/Portfolio/index.tsx
@@ -1,34 +1,36 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React from 'react';
 import './Portfolio.scss';
+import Axios from 'axios';
 
-type FilterTypes = 'web' | 'app' | 'server' | 'it';
+type FilterTypes = 'web' | 'mobile' | 'server' | 'it';
 
 interface PortfolioItem {
-  type: FilterTypes
+  type: FilterTypes[]
   image: string
   name: string
   id: string
+  link: string
 }
 
 export default class Portfolio extends React.Component {
   state = {
     filter: undefined as FilterTypes | undefined,
+    loading: true,
   };
 
-  private readonly portfolioFullList: PortfolioItem[] = [
-  ];
+  private portfolioFullList: PortfolioItem[] = [];
 
   private get portfolioItems (): PortfolioItem[] {
     const { filter } = this.state;
 
-    return filter ? this.portfolioFullList.filter(item => item.type === filter) : this.portfolioFullList;
+    return filter ? this.portfolioFullList.filter(item => item.type.includes(filter)) : this.portfolioFullList;
   }
 
   private getTypeName (type: FilterTypes): string {
     const typeMap = {
       web: 'Web',
-      app: 'Mobile app',
+      mobile: 'Mobile app',
       server: 'Server/API',
       it: 'IT Services',
     };
@@ -38,14 +40,14 @@ export default class Portfolio extends React.Component {
 
   private getPortfolioEntry (item: PortfolioItem): React.ReactNode {
     return (
-            <div className="col-lg-4 col-md-6 portfolio-item" key={item.id}>
-                <img src={item.image} className="img-fluid" alt={item.name} />
-                <div className="portfolio-info">
-                <h4>{item.name}</h4>
-                <p>{this.getTypeName(item.type)}</p>
-                <a href={`/projects/${item.id}`} className="details-link" title="More Details"><i className="bi bi-box-arrow-up-right"></i></a>
-                </div>
-            </div>
+      <button type="button" onClick={() => { window.open(item.link, '_blank'); }} className="col-lg-4 col-md-6 portfolio-item" key={item.id}>
+          <img src={item.image} className="img-fluid" alt={item.name} />
+          <div className="portfolio-info">
+          <h4>{item.name}</h4>
+          <p>{item.type.map(type => this.getTypeName(type)).join(', ')}</p>
+          <span className="details-link" title="More Details"><i className="bi bi-box-arrow-up-right"></i></span>
+          </div>
+      </button>
     );
   }
 
@@ -55,19 +57,33 @@ export default class Portfolio extends React.Component {
 
   private get noItems (): React.ReactNode {
     return (
-            <div className="row">
-                <div className="col-md-12">
-                    <h4 className="section-subtitle">No results</h4>
-                    <p className="section-description">No items exist. Try changing the filter or check back later.</p>
-                </div>
-            </div>
+      <div className="row">
+        <div className="col-md-12">
+          <h4 className="section-subtitle">No results</h4>
+          <p className="section-description">No items exist. Try changing the filter or check back later.</p>
+        </div>
+      </div>
     );
   }
 
+  componentDidMount(): void {
+    Axios.get('/api/portfolio-items.json').then(response => {
+      this.portfolioFullList = response.data as PortfolioItem[];
+      this.setState({ loading: false });
+    }).catch(error => {
+      console.error('Portfolio: unable to get items', error);
+      this.setState({ loading: false });
+    });
+  }
+
   render (): React.ReactNode {
-    const { filter } = this.state;
+    const { filter, loading } = this.state;
     const items = this.portfolioItems;
 
+    if (loading) {
+      return null;
+    }
+
     return (
         <section id="portfolio">
             <div className="container" data-aos="fade-up">
@@ -84,7 +100,7 @@ export default class Portfolio extends React.Component {
                     <ul id="portfolio-filters">
                     <li onClick={() => { this.changeFilter(undefined); }} className={filter === undefined ? 'filter-active' : ''}>All</li>
                     <li onClick={() => { this.changeFilter('web'); }} className={filter === 'web' ? 'filter-active' : ''}>{this.getTypeName('web')}</li>
-                    <li onClick={() => { this.changeFilter('app'); }} className={filter === 'app' ? 'filter-active' : ''}>{this.getTypeName('app')}</li>
+                    <li onClick={() => { this.changeFilter('mobile'); }} className={filter === 'mobile' ? 'filter-active' : ''}>{this.getTypeName('mobile')}</li>
                     <li onClick={() => { this.changeFilter('server'); }} className={filter === 'server' ? 'filter-active' : ''}>{this.getTypeName('server')}</li>
                     <li onClick={() => { this.changeFilter('it'); }} className={filter === 'it' ? 'filter-active' : ''}>{this.getTypeName('it')}</li>
                     </ul>