From ad8c1554aa608933a360317b234babdd487fa241 Mon Sep 17 00:00:00 2001 From: boilerrat <128boilerrat@gmail.com> Date: Wed, 8 Jan 2025 20:19:14 -0500 Subject: [PATCH] style and content --- index.html | 96 +++++++++++++++++++---------- src/App.tsx | 8 ++- src/components/Expertise/index.tsx | 31 +++++----- src/components/Expertise/types.ts | 1 + src/components/Hero/index.tsx | 11 ++-- src/components/Hero/types.ts | 3 +- src/components/Navigation/index.tsx | 5 +- src/types/index.tsx | 6 ++ tailwind.config.js | 28 ++++++++- 9 files changed, 132 insertions(+), 57 deletions(-) diff --git a/index.html b/index.html index 34b2628..52ffef3 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,68 @@ - - - - - - - - - - - - - - - - - - Chris Wylde | Web3 Futurist - - - - - - - - - - -
- - + + + + + + + + + + + + + + + + + + + + + + + + Chris Wylde | Web3 Futurist + + + + + + + + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 43c2aa1..4d04981 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,14 +9,18 @@ import { Contact } from './components/Contact'; const App: FC = () => { return ( -
+ // Add base font for general content +
+ {/* Navigation can use Space Mono for clean reading */}
-
+ {/* Hero section uses Courier Prime for the terminal look */} +
+ {/* Content sections use Space Mono for better readability */}
diff --git a/src/components/Expertise/index.tsx b/src/components/Expertise/index.tsx index 8589e78..62990dd 100644 --- 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 = ({ company, period, description, - className = '' + className = '', + gradientFrom // Add this to customize the icon color }) => (
-
- +
+

{title}

@@ -43,7 +44,7 @@ const Section: React.FC = ({
{items.map((exp, index) => ( - + ))}
@@ -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 = ({ 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 = ({ 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 = ({ title="Web3 Innovation" icon={Database} items={web3Experience} - gradientFrom="blue-500" - gradientTo="purple-500" + gradientFrom="purple-500" + gradientTo="pink-500" />
diff --git a/src/components/Expertise/types.ts b/src/components/Expertise/types.ts index d0da84a..831cd51 100644 --- 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 { diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx index 90cfda5..634bb09 100644 --- 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 } ]; diff --git a/src/components/Hero/types.ts b/src/components/Hero/types.ts index 20a31a3..b528b2f 100644 --- 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; diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index 24aa8b2..299b7e1 100644 --- 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 = ({ { 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; diff --git a/src/types/index.tsx b/src/types/index.tsx index c20e87e..f5809b5 100644 --- 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; diff --git a/tailwind.config.js b/tailwind.config.js index 89a305e..067b031 100644 --- 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: [], } \ No newline at end of file