Initial Material Design build

tassyguy · Oct 12, 2023 · f77a0a6 · f77a0a6
1 parent b639e12
commit f77a0a6
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/data/portfolio.json b/data/portfolio.json
@@ -16,5 +16,11 @@
     "link": "https://www.linkedin.com/in/simonxphillips",
     "icon": "/images/project-b-icon.png",
     "description": "My LinkedIn profile."
+  },
+  {
+    "name": "Resume",
+    "link": "https://drive.google.com/file/d/10zoCEWRpc8XblT5ZZE10HWRTkMMMTuu0/view?usp=sharing",
+    "icon": "/images/project-b-icon.png",
+    "description": "A link to view my current resume."
   }
 ]
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,17 +1,18 @@
 // src/components/Header.tsx
-import React from 'react';
+import React, {useState} from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 
 const Header: React.FC = () => {
+
   return (
     <header className="navbar">
       <div className="logo">
         <Link href="/">
           <Image src="/images/logo-dark.jpg" alt="My logo" width={48} height={48} className="logoImage"/>
         </Link>
       </div>
-      <nav className="nav-items">
+      <nav className={'nav-items'}>
         <ul>
           <li>
             <Link href="/about">About</Link>

diff --git a/styles/styles.scss b/styles/styles.scss
@@ -5,6 +5,7 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 @import './fonts.scss';
+@import './themes/material/theme.css';
 
 /* Your custom SCSS styles go here */
 
@@ -13,6 +14,14 @@ header {
     background-color: aqua;
 }
 
+body {
+    background-color: var(--md-sys-color-background);
+}
+
+p, ul, li, .section-header {
+    color: var(--md-sys-color-on-background);
+}
+
 .section-header {
     text-align: center;
 }
@@ -33,7 +42,7 @@ header {
     /* Horizontally distribute items evenly */
     align-items: center;
     /* Vertically center items */
-    background-color: #000;
+    background-color: var(--md-sys-color-primary);
     border-radius: 50vh;
     /* Background color of the navigation bar */
     /*padding: 10px 20px;
@@ -66,7 +75,7 @@ header {
 }
 
 .nav-items a {
-    color: #fff;
+    color: var(--md-sys-color-on-primary);
     /* Text color for navigation items */
     text-decoration: none;
     /* Remove underlines from links */