+ added Typed.js

+ Updated portfolio + Styling
BE-CH · Oct 8, 2022 · 83a490e · 83a490e
1 parent 0f59711
commit 83a490e
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "next": "11.0.1",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "typed.js": "^2.0.12"
   },
   "devDependencies": {
     "eslint": "^7.30.0",

diff --git a/pages/index.js b/pages/index.js
@@ -1,5 +1,7 @@
 import Head from 'next/head';
 import styles from '../styles/Home.module.css';
+import Typed from 'typed.js';
+import { useEffect } from 'react';
 
 export default function Home() {
   async function linkedinclick() {
@@ -8,6 +10,18 @@ export default function Home() {
     }
   }
 
+  useEffect(() => {
+    var options = {
+      strings: ['website', 'app', 'database', 'Docker containers', 'web solution'],
+      typeSpeed: 60,
+      backSpeed: 60,
+      loop: true,
+      showCursor: false,
+      backDelay: 5000,
+    };
+    new Typed('.testelement', options);
+  }, []);
+
   return (
     <div className={styles.container}>
       <Head>
@@ -25,9 +39,12 @@ export default function Home() {
         <h1 className={styles.title}>Bech Solutions</h1>
 
         <p className={styles.description}>
-          Currently working on your <code className={styles.code}>website</code>!
+          Currently working on your{' '}
+          <code className={styles.code}>
+            <span className="testelement"></span>
+          </code>
+          !
         </p>
-        <p className={styles.small}>That&apos;s why there isn&apos;t much here 😅</p>
 
         <div className={styles.grid}>
           <div className={styles.aboutMeCard}>
@@ -42,12 +59,17 @@ export default function Home() {
           <div className={styles.card}>
             <h2>My skills &rarr;</h2>
             <p>
-              My primary focus is on Javascript, Typescript, HTML and CSS. I have worked with front-end libraries such
-              as React.js, Next.js, Svelte, Fabric.js and more. In terms of back-end I have been working with Node.js,
-              Nest.js, Express.js and more!
+              My primary focus is <mark>Javascript</mark>, <mark>Typescript</mark>, <mark>HTML</mark> and{' '}
+              <mark>CSS</mark>. I have worked with front-end libraries such as <mark>React.js</mark>,{' '}
+              <mark>Next.js</mark>, <mark>Svelte</mark>, <mark>Fabric.js</mark> and more. In terms of back-end I have
+              been working with <mark>Node.js</mark>, <mark>Nest.js</mark>, <mark>Express.js</mark> and more!
             </p>
             <br />
-            <p>My go-to database is MongoDB but I am also skilled in PostgreSQL and MSSQL.</p>
+            <p>
+              My go-to database is <mark>MongoDB</mark> but I am also skilled in <mark>SQL</mark> using{' '}
+              <mark>PostgreSQL</mark> and <mark>MSSQL</mark>. In terms of organizing and running everything, I like
+              doing it inside containerized environments using <mark>Docker</mark>!
+            </p>
             <div className={styles.icons}>
               <div className={styles.actualicons}>
                 <img src="/icons/javascript.svg" alt="Javascript" />
@@ -69,30 +91,33 @@ export default function Home() {
             <div className={styles.myWorkCardContainer}>
               <div className={styles.myWorkCard}>
                 <a href="https://automat.læringsbevis.dk/" target="_blank" rel="noopener noreferrer">
-                  <img className={styles.myWorkImage} src="/laeringsbevis-automat.png" alt="Nem Animation" />
+                  <img className={styles.myWorkImage} src="/laeringsbevis-automat.png" alt="Læringsbevis" />
                   <p>Læringsbevis Automat</p>
                   <p className={styles.myWorkDescription}>
                     A full-stack web app that helps users create resumes and applications when searching for a new job.
                   </p>
-                  <p className={styles.myWorkDescription}>Made with Typescript, Nest.js, Next.js and MongoDB.</p>
+                  <p className={styles.myWorkDescription}>
+                    Made with Typescript, Nest.js, Next.js and MongoDB. Containerized with Docker.
+                  </p>
                 </a>
               </div>
               <div className={styles.myWorkCard}>
-                <a href="https://nemanimation.dk" target="_blank" rel="noopener noreferrer">
-                  <img className={styles.myWorkImage} src="/nemanimation.jfif" alt="Nem Animation" />
-                  <p>Nem Animation</p>
+                <a href="https://pongit.dk" target="_blank" rel="noopener noreferrer">
+                  <img className={styles.myWorkImage} src="/pongit.jpg" alt="PongIT" />
+                  <p>PongIT</p>
                   <p className={styles.myWorkDescription}>
-                    A full-stack web solution with two seperate panels; a customer-panel and an admin-panel.
+                    A full-stack web solution to support creation and paritcipation of table tennis tournaments.
                   </p>
                   <p className={styles.myWorkDescription}>
-                    Made with Node.js, Express.js and MongoDB as back-end. HTML & CSS as front-end.
+                    Made with C#, ASP.NET and EF Core as back-end. Typescript and Next.js as front-end. Containerized
+                    with Docker.
                   </p>
                 </a>
               </div>
 
               <div className={styles.myWorkCard}>
                 <a href="https://firstdrawing.com" target="_blank" rel="noopener noreferrer">
-                  <img className={styles.myWorkImage} src="/firstdrawing.png" alt="Nem Animation" />
+                  <img className={styles.myWorkImage} src="/firstdrawing.png" alt="First Drawing" />
                   <p>First Drawing</p>
                   <p className={styles.myWorkDescription}>
                     A full-stack web solution with three seperate panels; a customer-panel, an admin-panel and a
@@ -105,15 +130,14 @@ export default function Home() {
               </div>
 
               <div className={styles.myWorkCard}>
-                <a href="https://romomotorfestival.dk" target="_blank" rel="noopener noreferrer">
-                  <img className={styles.myWorkImage} src="/romomotorfestival.png" alt="Nem Animation" />
-                  <p>Rømø Motor Festival</p>
-                  <p className={styles.myWorkDescription}>
-                    A full-stack web solution with two seperate panels; a customer-panel and an admin-panel.
-                  </p>
+                <a href="https://tilbudstracker.dk" target="_blank" rel="noopener noreferrer">
+                  <img className={styles.myWorkImage} src="/tilbudstracker.jpeg" alt="Tilbudstracker" />
+                  <p>Tilbudstracker</p>
                   <p className={styles.myWorkDescription}>
-                    Made with Node.js, Express.js and MongoDB as back-end. HTML & CSS as front-end.
+                    A full-stack web app, that tracks and highlights the best deals on groceries from Danish
+                    supermarkets.
                   </p>
+                  <p className={styles.myWorkDescription}>Made with Typescript, Next.js and serverless functions.</p>
                 </a>
               </div>
 

diff --git a/public/pongit.jpg b/public/pongit.jpg
diff --git a/public/tilbudstracker.jpeg b/public/tilbudstracker.jpeg
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -123,6 +123,9 @@
   border: 1px solid #eaeaea8e;
   border-radius: 10px;
   margin-bottom: 10px;
+  height: 135px;
+  object-fit: cover;
+  object-position: center center;
 }
 
 .myWorkCard a {
@@ -196,6 +199,11 @@
   line-height: 1.5;
 }
 
+.card mark {
+  background-color: transparent;
+  color: #0070f3;
+}
+
 .findMyWork {
   text-align: center;
   width: 100%;

diff --git a/yarn.lock b/yarn.lock
@@ -635,6 +635,7 @@ __metadata:
     next: 11.0.1
     react: 17.0.2
     react-dom: 17.0.2
+    typed.js: ^2.0.12
   languageName: unknown
   linkType: soft
 
@@ -4540,6 +4541,13 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"typed.js@npm:^2.0.12":
+  version: 2.0.12
+  resolution: "typed.js@npm:2.0.12"
+  checksum: b17ed74438fc525877252e156c6a5471b352e7a74ff72be51c73a7b223159d5d0f38ef8f83ac5913fce16cbb66193f67ae6dc29b2609a655a92b042cb9d12342
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.1":
   version: 1.0.1
   resolution: "unbox-primitive@npm:1.0.1"