style(fluent): update to more fluent components (#33)

victorfrye · Feb 16, 2024 · d11f7bd · d11f7bd
1 parent bede0b6
commit d11f7bd
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 47 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,12 +3,15 @@
 import '@dotcom/styles/globals.css';
 import About from "@dotcom/components/home/about";
 import Connect from "@dotcom/components/home/connect";
+import { Divider } from '@fluentui/react-components';
 
 export default function Home() {
   return (
     <>
       <About />
 
+      <Divider appearance='subtle' inset/>
+
       <Connect />
     </>
   );

diff --git a/src/components/home/about.tsx b/src/components/home/about.tsx
@@ -1,4 +1,4 @@
-import { Link } from "@fluentui/react-components";
+import { Link, Text } from "@fluentui/react-components";
 
 export default function About() {
     const _today: Date = new Date();
@@ -14,20 +14,20 @@ export default function About() {
 
     return (
         <section id="about" className="d-flex flex-column flex-wrap">
-            <h2 className="text-primary pt-3 pb-2">_About</h2>
+            <Text as="h2" className="text-primary pt-4 pb-3">_About</Text>
 
-            <p>
-                Hello from Grand Rapids! <b>I&#x27;m Victor, a software engineer powered by coffee</b>.
+            <Text as="p">
+                Hello from Grand Rapids! <Text weight="bold">I&#x27;m Victor, a software engineer powered by coffee</Text>.
                 With {`${getYearsOfExperience()}`} years of experience in the industry, I&#x27;ve worked with a variety of technologies and platforms.
-                My current focuses are on web development with <strong>React.js</strong>, the <strong>.NET</strong> ecosystem, <strong>Azure</strong> cloud services, and <strong>DevOps</strong> automation and processes.
-            </p>
-            <p>
-                I&#x27;m passionate about <strong>digital transformation</strong>, the <strong>developer experience</strong>, and constructing solutions that help people <strong>achieve more</strong>.
-            </p>
-            <p>
-                I&#x27;m currently working as a <strong>Senior Software Engineer at <Link href="https://leadingedje.com" target="_blank" rel="noreferrer noopener"><strong>Leading EDJE</strong></Link></strong>, a software consultancy based in Columbus, Ohio.
-                In my downtime, I enjoy <b>gaming</b>, <b>reading</b>, and quality time with <b>my wife and our two dogs</b>.
-            </p>
+                My current focuses are on web development with <Text weight="bold">React.js</Text>, the <Text weight="bold">.NET</Text> ecosystem, <Text weight="bold">Azure</Text> cloud services, and <Text weight="bold">DevOps</Text> automation and processes.
+            </Text>
+            <Text as="p">
+                I&#x27;m passionate about <Text weight="bold">digital transformation</Text>, the <Text weight="bold">developer experience</Text>, and constructing solutions that help people <Text weight="bold">achieve more</Text>.
+            </Text>
+            <Text as="p">
+                I&#x27;m currently working as a <Text weight="bold">Senior Software Engineer</Text> at <Link as="a" inline href="https://leadingedje.com" target="_blank" rel="noreferrer noopener">Leading EDJE</Link>, a software consultancy based in Columbus, Ohio.
+                In my downtime, I enjoy <Text weight="bold">gaming</Text>, <Text weight="bold">reading</Text>, and quality time with <Text weight="bold">my wife and our two dogs</Text>.
+            </Text>
         </section>
     )
 }
diff --git a/src/components/home/connect.tsx b/src/components/home/connect.tsx
@@ -1,4 +1,4 @@
-import { Image, Link } from "@fluentui/react-components";
+import { Image, Link, Text } from "@fluentui/react-components";
 import React from "react";
 
 interface ISocial {
@@ -28,16 +28,17 @@ export default function Connect() {
 
     const renderSocialButtons = (): JSX.Element[] => {
         return socialDetails.map((social, index) =>
-            <Link href={social.href} target="_blank" rel="noreferrer noopener" className="btn-link btn-social" key={index} slot="button">
+            <Link as="a" href={social.href} target="_blank" rel="noreferrer noopener" className="btn-link btn-social" key={index} slot="button">
                 {social.image}
             </Link>
         );
     }
 
     return (
         <section id="connect" className="d-flex flex-column flex-wrap">
-            <h2 className="text-primary pt-3 pb-2">_Connect</h2>
-            <div className="d-flex flex-row flex-nowrap gap-3 p-0 pb-3">
+            <Text as="h2" className="text-primary pt-4 pb-3">_Connect</Text>
+
+            <div className="d-flex flex-row flex-nowrap gap-3 p-0 pt-1 pb-3">
                 {renderSocialButtons()}
             </div>
         </section>

diff --git a/src/components/shared/avatar.tsx b/src/components/shared/avatar.tsx
diff --git a/src/components/shared/footer.tsx b/src/components/shared/footer.tsx
@@ -1,9 +1,13 @@
+'use client';
+
+import { Text } from "@fluentui/react-components";
+
 export default function Footer() {
     const _today: Date = new Date();
 
     return (
         <footer className="d-flex justify-content-end mt-auto p-3">
-            © Victor Frye {_today.getFullYear()}
+            <Text as="p" align="end" block>© Victor Frye {_today.getFullYear()}</Text>
         </footer>
     )
 }
diff --git a/src/components/shared/header.tsx b/src/components/shared/header.tsx
@@ -1,16 +1,25 @@
 'use client';
 
-import ProfileAvatar from "./avatar";
+import { Persona, Text } from "@fluentui/react-components";
 
 export default function Header() {
     return (
-        <header id="header" className="d-flex align-items-center">
-            <ProfileAvatar />
-
-            <div className="d-flex flex-column p-3 gap-1">
-                <h1 className="text-primary"><strong>&#91;Victor Frye&#93;</strong></h1>
-                <em>Your friendly neighborhood developer</em>
-            </div>
+        <header id="header" className="d-flex align-items-center py-3">
+            <Persona
+                avatar={{
+                    image: { src: "/images/profile.png", alt: "a profile picture of Victor Frye" },
+                    color: "neutral",
+                    name: "Victor Frye",
+                    active: "active",
+                    activeAppearance: "ring-shadow",
+                    size: 72
+                }}
+                name="Victor Frye"
+                primaryText={<Text as="h1" weight="bold" wrap={false} className="text-primary">&#91;Victor Frye&#93;</Text>}
+                secondaryText={<Text as="p" block/>}
+                tertiaryText={<Text as="em" >Your friendly neighborhood developer</Text>}
+                size="huge"
+            />
         </header>
     )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -17,9 +17,8 @@
   --github-bg: #333333;
   --outlook-bg: #127CD6;
 
-  --gradient: radial-gradient(circle at 30% 107%, var(--secondary) 0%, var(--primary) 30%, #000000 70%);
-  --gradient-tl: linear-gradient(135deg, var(--secondary) 0%, #000000 50%, var(--secondary) 100%);
-  --gradient-br: linear-gradient(135deg, #000000 0%, var(--secondary) 50%, #000000 100%);
+  --gradient: radial-gradient(circle at 30% 107%, var(--secondary) 0%, var(--primary) 30%, #171717 70%);
+  --gradient-corner: linear-gradient(135deg, var(--secondary) 0%, #171717 50%, var(--secondary) 100%);
 }
 
 html,
@@ -50,7 +49,7 @@ h2 {
   content: " ";
   width: 180px;
   height: 180px;
-  background: var(--gradient-tl);
+  background: var(--gradient-corner);
   z-index: -1;
   border-top-left-radius: 2.5rem;
   position: absolute;
@@ -62,7 +61,7 @@ h2 {
   content: " ";
   width: 180px;
   height: 180px;
-  background: var(--gradient-br);
+  background: var(--gradient-corner);
   z-index: -1;
   border-bottom-right-radius: 2.5rem;
   position: absolute;
@@ -79,13 +78,12 @@ h2 {
 
 a,
 .btn-link {
-  color: var(--primary);
+  font-weight: bold !important;
   text-decoration: none !important;
   border-bottom: 1px dotted #7f7f7f;
 }
 
 a:hover {
-  color: #ffffff !important;
   border-bottom: none;
 }