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

updates to components

This commit is contained in:
boilerrat 2025-01-08 05:55:36 -05:00
parent 0f63060a3a
commit 317bd3aef9
6 changed files with 107 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -1,13 +1,34 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <!-- 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="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

24
src/components/Contact/index.tsx
View File

@ -62,11 +62,13 @@ export const Contact: FC<ContactProps> = ({
}) => { }) => {
return ( return (
<section id="contact" className={`min-h-screen bg-black text-white p-8 ${className}`}> <section id="contact" className={`min-h-screen bg-black text-white p-8 ${className}`}>
<div className="max-w-4xl mx-auto space-y-16"> <div className="max-w-6xl mx-auto space-y-8">
<h2 className="text-3xl font-bold bg-gradient-to-r from-green-500 to-blue-500 bg-clip-text text-transparent"> <div className="flex items-center gap-4">
Connect With Me <h2 className="text-3xl font-bold bg-gradient-to-r from-green-500 to-blue-500 bg-clip-text text-transparent">
</h2> Connect With Me
<div className="grid gap-12"> </h2>
</div>
<div className="grid gap-12 mt-8">
{socialLinks.map((category, index) => ( {socialLinks.map((category, index) => (
<CategorySection <CategorySection
key={index} key={index}
@ -99,7 +101,7 @@ const defaultSocialLinks = [
{ {
name: "Resume", name: "Resume",
icon: MdLanguage, icon: MdLanguage,
url: "//https://rxresu.me/boilerrat/victorious-present-lungfish", url: "https://rxresu.me/boilerrat/victorious-present-lungfish",
username: "Download PDF" username: "Download PDF"
} }
] ]
@ -128,7 +130,8 @@ const defaultSocialLinks = [
{ {
name: "Telegram", name: "Telegram",
icon: FaTelegram, icon: FaTelegram,
url: "https://t.me/boilerrat" url: "https://t.me/boilerrat",
username: "@boilerrat"
}, },
{ {
name: "Farcaster", name: "Farcaster",
@ -138,11 +141,12 @@ const defaultSocialLinks = [
}, },
{ {
name: "Lens", name: "Lens",
icon: BiSearch, // You might want to find a more specific Lens icon icon: BiSearch,
url: "https://lenster.xyz/u/boilerrat", url: "https://lenster.xyz/u/boilerrat",
username: "boilerrat" username: "boilerrat"
} }
] ]
}, }
];
]; export default Contact;

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

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Atom, Database, Shield, Binary, Users, Award } from 'lucide-react'; import { Atom, Database, Shield, Binary, Users, Award, Wrench, Factory, Power, Coins } from 'lucide-react';
import { ExpertiseProps, ExperienceCardProps, SectionProps } from './types'; import { ExpertiseProps, ExperienceCardProps, SectionProps } from './types';
import { ExperienceItem } from '../../types'; import { ExperienceItem } from '../../types';
@ -49,37 +49,54 @@ const Section: React.FC<SectionProps> = ({
</section> </section>
); );
const defaultIndustryExperience: ExperienceItem[] = [
{
title: "Journeyman Boilermaker",
company: "International Brotherhood of Boilermakers",
period: "2003 - Present",
description: "Two decades of experience across industrial sectors, specializing in pressure vessels, heat exchangers, and critical infrastructure. Led teams in major projects nationwide.",
icon: Wrench
},
{
title: "Industrial Operations",
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.",
icon: Factory
}
];
const defaultNuclearExperience: ExperienceItem[] = [ const defaultNuclearExperience: ExperienceItem[] = [
{ {
title: "Radiation Protection", title: "Radiation Protection",
company: "Makwa-Cahill/Nuvia", company: "Makwa-Cahill/Nuvia",
period: "2019 - Present", period: "2019 - Present",
description: "Delivering comprehensive Radiation Protection services for Bruce Nuclear's Major Component Replacement Project.", 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.",
icon: Shield icon: Shield
}, },
{ {
title: "Journeyman Boilermaker", title: "Nuclear Maintenance and Refurbishment",
company: "International Brotherhood of Boilermakers", company: "Multiple Nuclear Facilities",
period: "2003 - Present", period: "2003 - Present",
description: "Leading diverse projects in nuclear facilities, focusing on reactor refurbishment at top facilities.", description: "20 years of nuclear experience including Pickering, Darlington, and Bruce Power. Specialized focus on reactor refurbishment and maintenance",
icon: Binary icon: Power
} }
]; ];
const defaultWeb3Experience: ExperienceItem[] = [ const defaultWeb3Experience: ExperienceItem[] = [
{ {
title: "Public HAUS Champion", title: "DAO Governance Lead",
company: "Public HAUS", company: "Public HAUS",
period: "2022 - Present", period: "2022 - Present",
description: "Secured $197K in grants from Moloch DAO, Optimism, and Public Nouns. Leading onboarding and governance.", description: "Secured $300K+ in grants through governance proposals to Moloch DAO, Optimism, Plurality Labs and Public Nouns. Pioneering governance frameworks and community development initiatives.",
icon: Users icon: Users
}, },
{ {
title: "Founder", title: "Web3 Innovation",
company: "DAO Masons", company: "DAO Masons & MetaCartel",
period: "2022 - 2024", period: "2022 - 2024",
description: "Distributed $100K ARB tokens through Grant Ships, empowering decentralized organizations.", description: "Founded DAO Masons, led Grant Ships program distributing $100K ARB tokens. Active contributor to MetaCartel, driving Web3 adoption and innovation in DAOs.",
icon: Award icon: Coins
} }
]; ];
@ -91,6 +108,16 @@ export const Expertise: React.FC<ExpertiseProps> = ({
return ( return (
<div className={`min-h-screen bg-black text-white p-8 ${className}`}> <div className={`min-h-screen bg-black text-white p-8 ${className}`}>
<div className="max-w-6xl mx-auto space-y-16"> <div className="max-w-6xl mx-auto space-y-16">
{/* Industry Section */}
<Section
id="industry"
title="Industrial Expertise"
icon={Factory}
items={defaultIndustryExperience}
gradientFrom="blue-500"
gradientTo="purple-500"
/>
{/* Nuclear Section */} {/* Nuclear Section */}
<Section <Section
id="nuclear" id="nuclear"
@ -113,4 +140,6 @@ export const Expertise: React.FC<ExpertiseProps> = ({
</div> </div>
</div> </div>
); );
}; };
export default Expertise;

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

@ -7,12 +7,14 @@ const defaultIntroText = `> const profile = {
alias: "boilerrat", alias: "boilerrat",
roles: [ roles: [
"Radiation Protection Specialist", "Radiation Protection Specialist",
"Journeyman Boilermaker",
"Web3 Innovator", "Web3 Innovator",
"DAO Designer" "DAO Designer"
], ],
expertise: { expertise: {
nuclear: "19+ years in Radiation Protection", boilermaker: "20+ years across industrial sectors, nationwide experience",
web3: "Lead multiple DAOs, $300K+ in grants" nuclear: "20 years total, 8 years specialized in radiation protection",
web3: "Lead multiple DAOs, $300K+ in grants secured and distributed"
} }
};`; };`;
@ -42,7 +44,7 @@ const quickLinks: QuickLink[] = [
} }
]; ];
export const Hero: React.FC<HeroProps> = ({ export const Hero: React.FC<HeroProps> = ({
className = '', className = '',
customIntroText customIntroText
}) => { }) => {
@ -95,10 +97,10 @@ export const Hero: React.FC<HeroProps> = ({
<div className="space-y-8 opacity-0 animate-fade-in"> <div className="space-y-8 opacity-0 animate-fade-in">
<div className="text-center"> <div className="text-center">
<h1 className="text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mb-4"> <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mb-4">
Bridging Nuclear & Web3 Bridging Industry & Web3
</h1> </h1>
<p className="text-gray-400 text-lg"> <p className="text-gray-400 text-lg">
Building the future of decentralized governance while ensuring nuclear safety Bringing decades of industrial expertise to decentralized innovation
</p> </p>
</div> </div>
@ -121,4 +123,6 @@ export const Hero: React.FC<HeroProps> = ({
</div> </div>
</div> </div>
); );
}; };
export default Hero;

7
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 } from 'lucide-react'; import { Home, Atom, Database, Award, Image, User, Factory } from 'lucide-react';
import { NavItem } from '../../types'; import { NavItem } from '../../types';
import { NavigationProps, ScrollState } from './types'; import { NavigationProps, ScrollState } from './types';
@ -15,6 +15,7 @@ export const Navigation: React.FC<NavigationProps> = ({
const defaultNavItems: NavItem[] = [ const defaultNavItems: NavItem[] = [
{ id: 'home', icon: Home, label: 'Home' }, { id: 'home', icon: Home, label: 'Home' },
{ id: 'industry', icon: Factory, label: 'Industry' },
{ 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' },
@ -92,4 +93,6 @@ export const Navigation: React.FC<NavigationProps> = ({
</div> </div>
</nav> </nav>
); );
}; };
export default Navigation;

21
src/components/Skills/index.tsx
View File

@ -2,16 +2,15 @@ import type { FC } from 'react';
import { ChevronRight } from 'lucide-react'; import { ChevronRight } from 'lucide-react';
import type { SkillsProps, SkillCardProps, SkillBarProps, Skill } from './types'; import type { SkillsProps, SkillCardProps, SkillBarProps, Skill } from './types';
const SkillBar: FC<SkillBarProps> = ({ const SkillBar: FC<SkillBarProps> = ({
level, level,
maxLevel = 5, maxLevel = 5,
className = '' className = ''
}) => { }) => {
const percentage = (level / maxLevel) * 100; const percentage = (level / maxLevel) * 100;
return ( return (
<div className={`h-2 w-32 bg-gray-800 rounded-full overflow-hidden ${className}`}> <div className={`h-2 w-32 bg-gray-800 rounded-full overflow-hidden ${className}`}>
<div <div
className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transform origin-left transition-transform duration-1000 ease-out" className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transform origin-left transition-transform duration-1000 ease-out"
style={{ transform: `scaleX(${percentage / 100})` }} style={{ transform: `scaleX(${percentage / 100})` }}
/> />
@ -19,9 +18,9 @@ const SkillBar: FC<SkillBarProps> = ({
); );
}; };
const SkillCard: FC<SkillCardProps> = ({ const SkillCard: FC<SkillCardProps> = ({
skill, skill,
className = '' className = ''
}) => ( }) => (
<div className={`bg-gray-900 rounded-lg p-6 hover:bg-gray-800 transition-all duration-300 ${className}`}> <div className={`bg-gray-900 rounded-lg p-6 hover:bg-gray-800 transition-all duration-300 ${className}`}>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
@ -120,13 +119,13 @@ export const Skills: FC<SkillsProps> = ({
}) => { }) => {
return ( return (
<section id="skills" className={`min-h-screen bg-black text-white p-8 ${className}`}> <section id="skills" className={`min-h-screen bg-black text-white p-8 ${className}`}>
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto space-y-8">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<h2 className="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent"> <h2 className="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
Professional Skills Professional Skills
</h2> </h2>
</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 mt-8">
{skills.map((skill, index) => ( {skills.map((skill, index) => (
<SkillCard key={index} skill={skill} /> <SkillCard key={index} skill={skill} />
))} ))}
@ -134,4 +133,6 @@ export const Skills: FC<SkillsProps> = ({
</div> </div>
</section> </section>
); );
}; };
export default Skills;