README.md

@@ -16,15 +16,15 @@ npm run dev
 npm run build
 ```
 
-All that is needed to deploy is to copy the contents of the `./out/` folder onto a web hosting.
+All that is needed to deploy is to copy the contents of the `./out/` folder onto any web hosting.
 
 ## Configuration
 
 ### CV content
 
-- [src/PersonalData.ts](src/PersonalData.ts) :: source of all data for the CV, nicely structured in a type-checked TypeScript object literal
+- src/PersonalData.ts :: source of all data for the CV, nicely structured in a type-checked TypeScript object literal
 
 ### Images
 
-- [public/favicon.ico](public/favicon.ico) :: web favicon
+- public/favicon.ico
-- [public/photo.png](public/photo.png) :: cover photo
+- public/photo.png

src/app/components/Tag.tsx

@@ -2,6 +2,6 @@ import React from "react"
 
 export default function Tag(props: {text: string}) {
     return (
-        <span className='badge text-bg-gentle'>{props.text}</span>
+        <span className='badge text-bg-light'>{props.text}</span>
     )
 }

src/app/globals.css

@@ -21,11 +21,6 @@ body {
     margin-top: 1em;
 }
 
-.text-bg-gentle {
-    color: #555;
-    background-color: RGBA(108,117,125,0.1);
-}
-
 .job-card {
     margin-top: 1em;
 }
@@ -39,9 +34,6 @@ body {
 .job-card .card-subtitle {
     margin-bottom: 0.5rem;
 }
-.job-tags > span {
-    margin: 0.2em;
-}
 
 .cloud-primary .tag-badges  {
     font-size: 180%;
@@ -56,6 +48,16 @@ body {
 .tag-badges > span {
     margin: 0.4em;
 }
+.focusable {
+    transition: all 0.3s;
+}
+.focusable:hover {
+    background-color: rgba(236, 241, 245, 0.3);
+    filter: brightness(96%);
+}
+.focused-element {
+    border: 2px dashed red;
+}
 .contacts .contact {
     margin: 0.75em;
 }