boiler
/
Web3CV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style and content

This commit is contained in:
boilerrat 2025-01-08 20:19:14 -05:00
parent ebcb831b03
commit ad8c1554aa
9 changed files with 132 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
index.html
View File

@ -1,34 +1,68 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<!-- Primary favicon --> <!-- Preload critical fonts -->
<link rel="icon" type="image/png" href="https://i.imgur.com/Clv3Y1d.png" /> <link
rel="preload"
<!-- iOS/macOS icons --> href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap"
<link rel="apple-touch-icon" href="https://i.imgur.com/Clv3Y1d.png" /> as="style"
<link rel="mask-icon" href="https://i.imgur.com/Clv3Y1d.png" color="#000000" /> />
<link
<!-- Windows/IE --> rel="preload"
<meta name="msapplication-TileImage" content="https://i.imgur.com/Clv3Y1d.png" /> href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"
<meta name="msapplication-TileColor" content="#000000" /> as="style"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#000000" /> <!-- Load fonts -->
<link
<!-- SEO meta tags --> href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Space+Mono:wght@400;700&display=swap"
<title>Chris Wylde | Web3 Futurist</title> rel="stylesheet"
<meta name="description" content="Web3 Futurist, Nuclear Professional, and DAO Designer" /> />
<meta name="keywords" content="Web3, Nuclear, DAO, Blockchain, Radiation Protection" />
<!-- Primary favicon -->
<!-- Open Graph / Social Media --> <link rel="icon" type="image/png" href="https://i.imgur.com/Clv3Y1d.png" />
<meta property="og:title" content="Chris Wylde | Web3 Futurist" /> <!-- iOS/macOS icons -->
<meta property="og:description" content="Web3 Futurist, Nuclear Professional, and DAO Designer" /> <link rel="apple-touch-icon" href="https://i.imgur.com/Clv3Y1d.png" />
<meta property="og:image" content="https://i.imgur.com/Clv3Y1d.png" /> <link rel="mask-icon" href="https://i.imgur.com/Clv3Y1d.png" color="#000000" />
<meta property="og:url" content="https://www.chriswylde.xyz" /> <!-- Windows/IE -->
</head> <meta name="msapplication-TileImage" content="https://i.imgur.com/Clv3Y1d.png" />
<body> <meta name="msapplication-TileColor" content="#000000" />
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <!-- Viewport and theme -->
</body> <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> </html>

8
src/App.tsx
View File

@ -9,14 +9,18 @@ import { Contact } from './components/Contact';
const App: FC = () => { const App: FC = () => {
return ( 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 /> <Navigation />
<main className="relative"> <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 /> <Hero />
</section> </section>
{/* Content sections use Space Mono for better readability */}
<div className="relative z-10"> <div className="relative z-10">
<Expertise /> <Expertise />
</div> </div>

31
src/components/Expertise/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; 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 { ExpertiseProps, ExperienceCardProps, SectionProps } from './types';
import { ExperienceItem } from '../../types'; import { ExperienceItem } from '../../types';
@ -9,12 +9,13 @@ const ExperienceCard: React.FC<ExperienceCardProps> = ({
company, company,
period, period,
description, 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={`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="flex items-start gap-4">
<div className="p-3 bg-blue-500/10 rounded-lg"> <div className={`p-3 bg-${gradientFrom}/10 rounded-lg`}>
<Icon className="text-blue-500" size={24} /> <Icon className={`text-${gradientFrom}`} size={24} />
</div> </div>
<div> <div>
<h3 className="text-xl font-semibold text-white">{title}</h3> <h3 className="text-xl font-semibold text-white">{title}</h3>
@ -43,7 +44,7 @@ const Section: React.FC<SectionProps> = ({
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{items.map((exp, index) => ( {items.map((exp, index) => (
<ExperienceCard key={index} {...exp} /> <ExperienceCard key={index} {...exp} gradientFrom={gradientFrom} />
))} ))}
</div> </div>
</section> </section>
@ -58,7 +59,7 @@ const defaultIndustryExperience: ExperienceItem[] = [
icon: Wrench icon: Wrench
}, },
{ {
title: "Industrial Operations", title: "Industrial Maintenance and Construction",
company: "Multiple Sectors", company: "Multiple Sectors",
period: "2003 - Present", period: "2003 - Present",
description: "Extensive experience in oil refineries, steel mills, and power generation facilities. Specialized in maintenance, repairs, and large-scale equipment installations.", 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", title: "Radiation Protection",
company: "Makwa-Cahill/Nuvia", company: "Makwa-Cahill/Nuvia",
period: "2019 - Present", 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 icon: Shield
}, },
{ {
title: "Nuclear Operations", title: "Nuclear Maintenance and Refurbishment",
company: "Multiple Nuclear Facilities", company: "Multiple Nuclear Facilities",
period: "2003 - Present", 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.", 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" title="Industrial Expertise"
icon={Factory} icon={Factory}
items={defaultIndustryExperience} items={defaultIndustryExperience}
gradientFrom="blue-500" gradientFrom="cyan-500"
gradientTo="purple-500" gradientTo="indigo-500"
/> />
{/* Nuclear Section */} {/* Nuclear Section */}
@ -124,8 +125,8 @@ export const Expertise: React.FC<ExpertiseProps> = ({
title="Nuclear Expertise" title="Nuclear Expertise"
icon={Atom} icon={Atom}
items={nuclearExperience} items={nuclearExperience}
gradientFrom="blue-500" gradientFrom="blue-600"
gradientTo="purple-500" gradientTo="emerald-400"
/> />
{/* Web3 Section */} {/* Web3 Section */}
@ -134,8 +135,8 @@ export const Expertise: React.FC<ExpertiseProps> = ({
title="Web3 Innovation" title="Web3 Innovation"
icon={Database} icon={Database}
items={web3Experience} items={web3Experience}
gradientFrom="blue-500" gradientFrom="purple-500"
gradientTo="purple-500" gradientTo="pink-500"
/> />
</div> </div>
</div> </div>

1
src/components/Expertise/types.ts
View File

@ -9,6 +9,7 @@ export interface ExpertiseProps {
export interface ExperienceCardProps extends ExperienceItem { export interface ExperienceCardProps extends ExperienceItem {
className?: string; className?: string;
gradientFrom?: string; // Add this for icon color customization
} }
export interface SectionProps { export interface SectionProps {

11
src/components/Hero/index.tsx
View File

@ -1,10 +1,11 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Terminal, ExternalLink, AtSign, Calendar, Binary } from 'lucide-react'; import { Terminal, ExternalLink, AtSign, Calendar, Binary } from 'lucide-react';
import { SiFarcaster } from "react-icons/si";
import { HeroProps, QuickLink, AnimationState } from './types'; import { HeroProps, QuickLink, AnimationState } from './types';
const defaultIntroText = `> const profile = { const defaultIntroText = `> const profile = {
name: "Christopher Wylde", name: "Christopher Wylde",
alias: "boilerrat", alias: "boiler, boilerrat",
roles: [ roles: [
"Radiation Protection Specialist", "Radiation Protection Specialist",
"Journeyman Boilermaker", "Journeyman Boilermaker",
@ -27,7 +28,7 @@ const quickLinks: QuickLink[] = [
}, },
{ {
icon: AtSign, icon: AtSign,
label: "Contact", label: "email",
href: "mailto:128boilerrat@gmail.com" href: "mailto:128boilerrat@gmail.com"
}, },
{ {
@ -37,9 +38,9 @@ const quickLinks: QuickLink[] = [
external: true external: true
}, },
{ {
icon: Binary, icon: SiFarcaster,
label: "DAO Masons", label: "DM on Warpcast",
href: "https://www.daomasons.com", href: "https://www.warpcast.com/boiler",
external: true external: true
} }
]; ];

3
src/components/Hero/types.ts
View File

@ -1,4 +1,5 @@
import { LucideIcon } from 'lucide-react'; import { LucideIcon } from 'lucide-react';
import { IconType } from 'react-icons';
export interface HeroProps { export interface HeroProps {
className?: string; className?: string;
@ -6,7 +7,7 @@ export interface HeroProps {
} }
export interface QuickLink { export interface QuickLink {
icon: LucideIcon; icon: LucideIcon | IconType; // Allow both Lucide and React icons
label: string; label: string;
href: string; href: string;
external?: boolean; external?: boolean;

5
src/components/Navigation/index.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from 'react'; 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 { NavItem } from '../../types';
import { NavigationProps, ScrollState } from './types'; import { NavigationProps, ScrollState } from './types';
@ -19,9 +19,10 @@ export const Navigation: React.FC<NavigationProps> = ({
{ id: 'nuclear', icon: Atom, label: 'Nuclear' }, { id: 'nuclear', icon: Atom, label: 'Nuclear' },
{ id: 'web3', icon: Database, label: 'Web3' }, { id: 'web3', icon: Database, label: 'Web3' },
{ id: 'achievements', icon: Award, label: 'Achievements' }, { id: 'achievements', icon: Award, label: 'Achievements' },
{ id: 'skills', icon: Briefcase, label: 'Skills' },
{ id: 'nfts', icon: Image, label: 'NFTs' }, { id: 'nfts', icon: Image, label: 'NFTs' },
{ id: 'contact', icon: User, label: 'Contact' } { id: 'contact', icon: User, label: 'Contact' }
]; ];
const navItems = customNavItems || defaultNavItems; const navItems = customNavItems || defaultNavItems;

6
src/types/index.tsx
View File

@ -34,6 +34,12 @@ export interface TooltipProps {
}>; }>;
} }
export interface Skills {
title: string;
description: string;
date: string;
}
export interface NFT { export interface NFT {
id: number; id: number;
image: string; image: string;

28
tailwind.config.js
View File

@ -5,7 +5,33 @@ export default {
"./src/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}",
], ],
theme: { 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: [], plugins: [],
} }