Substantial refinement/polish on content of webpage (not just structural/coding elements)
This commit is contained in:
@@ -94,6 +94,32 @@ export function ProjectDetail({ investigation }: ProjectDetailProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Domain skills */}
|
||||
{investigation.skills && investigation.skills.length > 0 && (
|
||||
<div>
|
||||
<h3 style={sectionHeadingStyle}>Domain Skills</h3>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
|
||||
{investigation.skills.map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
style={{
|
||||
padding: '3px 10px',
|
||||
fontSize: '11px',
|
||||
fontWeight: 500,
|
||||
fontFamily: 'var(--font-geist-mono)',
|
||||
color: '#0D9488',
|
||||
backgroundColor: 'rgba(13,148,136,0.08)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
border: '1px solid rgba(13,148,136,0.2)',
|
||||
}}
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
<div>
|
||||
<h3 style={sectionHeadingStyle}>Results</h3>
|
||||
@@ -106,37 +132,85 @@ export function ProjectDetail({ investigation }: ProjectDetailProps) {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* External link */}
|
||||
{investigation.externalUrl && (
|
||||
<a
|
||||
href={investigation.externalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
{/* Action buttons */}
|
||||
{(investigation.externalUrl || investigation.demoUrl) && (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', alignSelf: 'flex-start' }}>
|
||||
{investigation.externalUrl && (
|
||||
<a
|
||||
href={investigation.externalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
padding: '8px 16px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
fontFamily: 'var(--font-ui)',
|
||||
color: 'var(--surface)',
|
||||
backgroundColor: 'var(--accent)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
textDecoration: 'none',
|
||||
transition: 'background-color 150ms',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'var(--accent-hover)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'var(--accent)'
|
||||
}}
|
||||
>
|
||||
<ExternalLink size={14} />
|
||||
View Live Project
|
||||
</a>
|
||||
)}
|
||||
{investigation.demoUrl && (
|
||||
<a
|
||||
href={investigation.demoUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
padding: '8px 16px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
fontFamily: 'var(--font-ui)',
|
||||
color: '#0D9488',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid #0D9488',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
textDecoration: 'none',
|
||||
transition: 'background-color 150ms, color 150ms',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'rgba(13,148,136,0.08)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'transparent'
|
||||
}}
|
||||
>
|
||||
<ExternalLink size={14} />
|
||||
Interactive Demo
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Thumbnail */}
|
||||
{investigation.thumbnail && (
|
||||
<img
|
||||
src={investigation.thumbnail}
|
||||
alt={`${investigation.name} screenshot`}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
padding: '8px 16px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
fontFamily: 'var(--font-ui)',
|
||||
color: 'var(--surface)',
|
||||
backgroundColor: 'var(--accent)',
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
textDecoration: 'none',
|
||||
alignSelf: 'flex-start',
|
||||
transition: 'background-color 150ms',
|
||||
border: '1px solid var(--border-light)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'var(--accent-hover)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'var(--accent)'
|
||||
}}
|
||||
>
|
||||
<ExternalLink size={14} />
|
||||
View Live Project
|
||||
</a>
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -13,13 +13,6 @@ const categoryLabels: Record<SkillMedication['category'], string> = {
|
||||
Leadership: 'Strategic & Leadership',
|
||||
}
|
||||
|
||||
// Proficiency bar color based on value
|
||||
function getProficiencyColor(proficiency: number): string {
|
||||
if (proficiency >= 90) return 'var(--success)'
|
||||
if (proficiency >= 75) return 'var(--accent)'
|
||||
return 'var(--amber)'
|
||||
}
|
||||
|
||||
export function SkillDetail({ skill }: SkillDetailProps) {
|
||||
// Find roles that use this skill from constellation data
|
||||
const usedInRoles = roleSkillMappings
|
||||
@@ -96,44 +89,6 @@ export function SkillDetail({ skill }: SkillDetailProps) {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Proficiency bar */}
|
||||
<div>
|
||||
<h3 style={sectionHeadingStyle}>Proficiency</h3>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
height: '6px',
|
||||
backgroundColor: 'var(--border-light)',
|
||||
borderRadius: '3px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: `${skill.proficiency}%`,
|
||||
height: '100%',
|
||||
backgroundColor: getProficiencyColor(skill.proficiency),
|
||||
borderRadius: '3px',
|
||||
transition: 'width 400ms ease-out',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: 700,
|
||||
fontFamily: 'var(--font-geist)',
|
||||
color: getProficiencyColor(skill.proficiency),
|
||||
minWidth: '36px',
|
||||
textAlign: 'right',
|
||||
}}
|
||||
>
|
||||
{skill.proficiency}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Years of experience */}
|
||||
<div>
|
||||
<h3 style={sectionHeadingStyle}>Experience</h3>
|
||||
|
||||
@@ -40,7 +40,7 @@ export function SkillsAllDetail({ category }: SkillsAllDetailProps) {
|
||||
label,
|
||||
skills: skills
|
||||
.filter((s) => s.category === id)
|
||||
.sort((a, b) => b.proficiency - a.proficiency),
|
||||
.sort((a, b) => b.yearsOfExperience - a.yearsOfExperience),
|
||||
}))
|
||||
|
||||
const handleSkillClick = (skill: SkillMedication) => {
|
||||
@@ -200,46 +200,6 @@ function SkillRow({ skill, yearsSuffix, onClick }: SkillRowProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Proficiency */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '40px',
|
||||
height: '4px',
|
||||
backgroundColor: 'var(--border-light)',
|
||||
borderRadius: '2px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: `${skill.proficiency}%`,
|
||||
height: '100%',
|
||||
backgroundColor: skill.proficiency >= 90 ? 'var(--success)' : skill.proficiency >= 75 ? 'var(--accent)' : 'var(--amber)',
|
||||
borderRadius: '2px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
fontFamily: '"Geist Mono", monospace',
|
||||
color: 'var(--text-tertiary)',
|
||||
minWidth: '28px',
|
||||
textAlign: 'right',
|
||||
}}
|
||||
>
|
||||
{skill.proficiency}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Chevron */}
|
||||
<ChevronRight
|
||||
size={14}
|
||||
|
||||
Reference in New Issue
Block a user