style and content

2025-01-08 20:19:14 -05:00 · 2025-01-08 20:19:14 -05:00 · ad8c1554aa
parent ebcb831b03
commit ad8c1554aa
9 changed files with 132 additions and 57 deletions
--- a/index.html
+++ b/index.html
@ -1,34 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <!-- Primary favicon -->
-    <link rel="icon" type="image/png" href="https://i.imgur.com/Clv3Y1d.png" />
-    
-    <!-- iOS/macOS icons -->
-    <link rel="apple-touch-icon" href="https://i.imgur.com/Clv3Y1d.png" />
-    <link rel="mask-icon" href="https://i.imgur.com/Clv3Y1d.png" color="#000000" />
-    
-    <!-- Windows/IE -->
-    <meta name="msapplication-TileImage" content="https://i.imgur.com/Clv3Y1d.png" />
-    <meta name="msapplication-TileColor" content="#000000" />
-    
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#000000" />
-    
-    <!-- SEO meta tags -->
-    <title>Chris Wylde | Web3 Futurist</title>
-    <meta name="description" content="Web3 Futurist, Nuclear Professional, and DAO Designer" />
-    <meta name="keywords" content="Web3, Nuclear, DAO, Blockchain, Radiation Protection" />
-    
-    <!-- Open Graph / Social Media -->
-    <meta property="og:title" content="Chris Wylde | Web3 Futurist" />
-    <meta property="og:description" content="Web3 Futurist, Nuclear Professional, and DAO Designer" />
-    <meta property="og:image" content="https://i.imgur.com/Clv3Y1d.png" />
-    <meta property="og:url" content="https://www.chriswylde.xyz" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <!-- Preload critical fonts -->
+  <link 
+    rel="preload" 
+    href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap"
+    as="style"
+  />
+  <link 
+    rel="preload"
+    href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"
+    as="style"
+  />
+  
+  <!-- Load fonts -->
+  <link 
+    href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Space+Mono:wght@400;700&display=swap"
+    rel="stylesheet"
+  />
+
+  <!-- Primary favicon -->
+  <link rel="icon" type="image/png" href="https://i.imgur.com/Clv3Y1d.png" />
+  <!-- iOS/macOS icons -->
+  <link rel="apple-touch-icon" href="https://i.imgur.com/Clv3Y1d.png" />
+  <link rel="mask-icon" href="https://i.imgur.com/Clv3Y1d.png" color="#000000" />
+  <!-- Windows/IE -->
+  <meta name="msapplication-TileImage" content="https://i.imgur.com/Clv3Y1d.png" />
+  <meta name="msapplication-TileColor" content="#000000" />
+  
+  <!-- Viewport and theme -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="theme-color" content="#000000" />
+  
+  <!-- SEO meta tags -->
+  <title>Chris Wylde | Web3 Futurist</title>
+  <meta name="description" content="Web3 Futurist, Nuclear Professional, and DAO Designer" />
+  <meta name="keywords" content="Web3, Nuclear, DAO, Blockchain, Radiation Protection, Boilermaker" />
+  
+  <!-- Open Graph / Social Media -->
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Chris Wylde | Web3 Futurist" />
+  <meta property="og:description" content="Web3 Futurist, Nuclear Professional, and DAO Designer" />
+  <meta property="og:image" content="https://i.imgur.com/Clv3Y1d.png" />
+  <meta property="og:url" content="https://www.chriswylde.xyz" />
+  
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Chris Wylde | Web3 Futurist" />
+  <meta name="twitter:description" content="Web3 Futurist, Nuclear Professional, and DAO Designer" />
+  <meta name="twitter:image" content="https://i.imgur.com/Clv3Y1d.png" />
+
+  <!-- Font display optimization -->
+  <style>
+    .font-courier-prime {
+      font-family: 'Courier Prime', monospace;
+    }
+    .font-space-mono {
+      font-family: 'Space Mono', monospace;
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
 </html>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -9,14 +9,18 @@ import { Contact } from './components/Contact';

 const App: FC = () => {
  return (
-    <div className="bg-black">
+    // Add base font for general content
+    <div className="bg-black font-['Space_Mono']">
+      {/* Navigation can use Space Mono for clean reading */}
      <Navigation />
      
      <main className="relative">
-        <section id="home" className="relative z-10">
+        {/* Hero section uses Courier Prime for the terminal look */}
+        <section id="home" className="relative z-10 font-['Courier_Prime']">
          <Hero />
        </section>

+        {/* Content sections use Space Mono for better readability */}
        <div className="relative z-10">
          <Expertise />
        </div>
--- a/src/components/Expertise/index.tsx
+++ b/src/components/Expertise/index.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { Atom, Database, Shield, Users, Wrench, Factory, Power, Coins } from 'lucide-react';
+import { Atom, Database, Shield, Users, Wrench, Factory, Coins, BatteryCharging } from 'lucide-react';
 import { ExpertiseProps, ExperienceCardProps, SectionProps } from './types';
 import { ExperienceItem } from '../../types';

@ -9,12 +9,13 @@ const ExperienceCard: React.FC<ExperienceCardProps> = ({
  company,
  period,
  description,
-  className = ''
+  className = '',
+  gradientFrom // Add this to customize the icon color
 }) => (
  <div className={`bg-gray-900 rounded-lg p-6 hover:bg-gray-800 transition-colors duration-300 ${className}`}>
    <div className="flex items-start gap-4">
-      <div className="p-3 bg-blue-500/10 rounded-lg">
-        <Icon className="text-blue-500" size={24} />
+      <div className={`p-3 bg-${gradientFrom}/10 rounded-lg`}>
+        <Icon className={`text-${gradientFrom}`} size={24} />
      </div>
      <div>
        <h3 className="text-xl font-semibold text-white">{title}</h3>
@ -43,7 +44,7 @@ const Section: React.FC<SectionProps> = ({
    </div>
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {items.map((exp, index) => (
-        <ExperienceCard key={index} {...exp} />
+        <ExperienceCard key={index} {...exp} gradientFrom={gradientFrom} />
      ))}
    </div>
  </section>
@ -58,7 +59,7 @@ const defaultIndustryExperience: ExperienceItem[] = [
    icon: Wrench
  },
  {
-    title: "Industrial Operations",
+    title: "Industrial Maintenance and Construction",
    company: "Multiple Sectors",
    period: "2003 - Present",
    description: "Extensive experience in oil refineries, steel mills, and power generation facilities. Specialized in maintenance, repairs, and large-scale equipment installations.",
@ -71,15 +72,15 @@ const defaultNuclearExperience: ExperienceItem[] = [
    title: "Radiation Protection",
    company: "Makwa-Cahill/Nuvia",
    period: "2019 - Present",
-    description: "Lead Radiation Protection Specialist for Bruce Nuclear's Major Component Replacement Project. Managing radiological safety for one of North America's largest nuclear refurbishment projects.",
+    description: "Radiation Protection Technician for Bruce Nuclear's Major Component Replacement Project. Managing radiological safety for one of North America's largest nuclear refurbishment projects.",
    icon: Shield
  },
  {
-    title: "Nuclear Operations",
+    title: "Nuclear Maintenance and Refurbishment",
    company: "Multiple Nuclear Facilities",
    period: "2003 - Present",
    description: "20 years of nuclear experience including Pickering, Darlington, and Bruce Power. Specialized focus on reactor refurbishment and radiation protection for the last 8 years.",
-    icon: Power
+    icon: BatteryCharging
  }
 ];

@ -114,8 +115,8 @@ export const Expertise: React.FC<ExpertiseProps> = ({
          title="Industrial Expertise"
          icon={Factory}
          items={defaultIndustryExperience}
-          gradientFrom="blue-500"
-          gradientTo="purple-500"
+          gradientFrom="cyan-500"
+          gradientTo="indigo-500"
        />
        
        {/* Nuclear Section */}
@ -124,8 +125,8 @@ export const Expertise: React.FC<ExpertiseProps> = ({
          title="Nuclear Expertise"
          icon={Atom}
          items={nuclearExperience}
-          gradientFrom="blue-500"
-          gradientTo="purple-500"
+          gradientFrom="blue-600"
+          gradientTo="emerald-400"
        />

        {/* Web3 Section */}
@ -134,8 +135,8 @@ export const Expertise: React.FC<ExpertiseProps> = ({
          title="Web3 Innovation"
          icon={Database}
          items={web3Experience}
-          gradientFrom="blue-500"
-          gradientTo="purple-500"
+          gradientFrom="purple-500"
+          gradientTo="pink-500"
        />
      </div>
    </div>
--- a/src/components/Expertise/types.ts
+++ b/src/components/Expertise/types.ts
@ -9,6 +9,7 @@ export interface ExpertiseProps {

 export interface ExperienceCardProps extends ExperienceItem {
  className?: string;
+  gradientFrom?: string;  // Add this for icon color customization
 }

 export interface SectionProps {
--- a/src/components/Hero/index.tsx
+++ b/src/components/Hero/index.tsx
@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { Terminal, ExternalLink, AtSign, Calendar, Binary } from 'lucide-react';
+import { SiFarcaster } from "react-icons/si";
 import { HeroProps, QuickLink, AnimationState } from './types';

 const defaultIntroText = `> const profile = {
  name: "Christopher Wylde",
-  alias: "boilerrat",
+  alias: "boiler, boilerrat",
  roles: [
    "Radiation Protection Specialist",
    "Journeyman Boilermaker",
@ -27,7 +28,7 @@ const quickLinks: QuickLink[] = [
  },
  {
    icon: AtSign,
-    label: "Contact",
+    label: "email",
    href: "mailto:128boilerrat@gmail.com"
  },
  {
@ -37,9 +38,9 @@ const quickLinks: QuickLink[] = [
    external: true
  },
  {
-    icon: Binary,
-    label: "DAO Masons",
-    href: "https://www.daomasons.com",
+    icon: SiFarcaster,
+    label: "DM on Warpcast",
+    href: "https://www.warpcast.com/boiler",
    external: true
  }
 ];
--- a/src/components/Hero/types.ts
+++ b/src/components/Hero/types.ts
@ -1,4 +1,5 @@
 import { LucideIcon } from 'lucide-react';
+import { IconType } from 'react-icons';

 export interface HeroProps {
  className?: string;
@ -6,7 +7,7 @@ export interface HeroProps {
 }

 export interface QuickLink {
-  icon: LucideIcon;
+  icon: LucideIcon | IconType;  // Allow both Lucide and React icons
  label: string;
  href: string;
  external?: boolean;
--- a/src/components/Navigation/index.tsx
+++ b/src/components/Navigation/index.tsx
@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Home, Atom, Database, Award, Image, User, Factory } from 'lucide-react';
+import { Home, Atom, Database, Award, Image, User, Factory, Briefcase } from 'lucide-react';
 import { NavItem } from '../../types';
 import { NavigationProps, ScrollState } from './types';

@ -19,9 +19,10 @@ export const Navigation: React.FC<NavigationProps> = ({
    { id: 'nuclear', icon: Atom, label: 'Nuclear' },
    { id: 'web3', icon: Database, label: 'Web3' },
    { id: 'achievements', icon: Award, label: 'Achievements' },
+    { id: 'skills', icon: Briefcase, label: 'Skills' },
    { id: 'nfts', icon: Image, label: 'NFTs' },
    { id: 'contact', icon: User, label: 'Contact' }
-  ];
+   ];

  const navItems = customNavItems || defaultNavItems;

--- a/src/types/index.tsx
+++ b/src/types/index.tsx
@ -34,6 +34,12 @@ export interface TooltipProps {
  }>;
 }

+export interface Skills {
+    title: string;
+    description: string;
+    date: string;
+}
+
 export interface NFT {
  id: number;
  image: string;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -5,7 +5,33 @@ export default {
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        'courier-prime': ['Courier Prime', 'monospace'],
+        'space-mono': ['Space Mono', 'monospace'],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-in forwards',
+        'float': 'float 20s ease-in-out infinite',
+        'float-delayed': 'floatDelayed 15s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        float: {
+          '0%': { transform: 'translate(0, 0)' },
+          '50%': { transform: 'translate(-10px, 10px)' },
+          '100%': { transform: 'translate(0, 0)' },
+        },
+        floatDelayed: {
+          '0%': { transform: 'translate(0, 0)' },
+          '50%': { transform: 'translate(10px, -10px)' },
+          '100%': { transform: 'translate(0, 0)' },
+        },
+      },
+    },
  },
  plugins: [],
 }