chore: updated page styles 83269256
Steve · 2026-03-16 21:43 1 file(s) · +20 −6
packages/client/src/pages/cv.astro +20 −6
44 44 
		<div class="relative space-y-10">
45 45 
			<span class="absolute left-[4px] top-3 bottom-0 w-px bg-gradient-to-b from-accent to-transparent" aria-hidden="true"></span>
46 46 
			{experience.map((job, i) => (
47 - 
				<div class="relative pl-7">
48 - 
					<span class:list={[
49 - 
						"absolute left-0 top-1.5 h-2.5 w-2.5 rounded-full",
50 - 
						i === 0 ? "border border-accent bg-accent" : "border border-accent/50 bg-[#121113]",
51 - 
					]} />
52 - 
					<div class:list={[i > 0 && "opacity-50"]}>
47 + 
				<div
48 + 
					class="cv-item relative pl-7"
49 + 
					style={`--item-opacity: ${i === 0 ? 1 : 1 - (i / (experience.length - 1)) * 0.6}`}
50 + 
				>
51 + 
					<span
52 + 
						class:list={["cv-item-child absolute left-0 top-1.5 h-2.5 w-2.5 rounded-full",
53 + 
							i === 0 ? "border border-accent bg-accent" : "border border-accent/50 bg-[#121113]",
54 + 
						]}
55 + 
					/>
56 + 
					<div class="cv-item-child">
53 57 
						<h3 class="text-base font-semibold">{job.company}</h3>
54 58 
						<ul class="mt-1 space-y-2">
55 59 
							{job.roles.map((role) => (
65 69 
		</div>
66 70 
	</div>
67 71 
</PageLayout>
72 + 

            

            
            

                
                73
                +
                
<style>

            

            
            

                
                74
                +
                
	.cv-item-child {

            

            
            

                
                75
                +
                
		opacity: var(--item-opacity);

            

            
            

                
                76
                +
                
		transition: opacity 300ms ease;

            

            
            

                
                77
                +
                
	}

            

            
            

                
                78
                +
                
	.cv-item:hover .cv-item-child {

            

            
            

                
                79
                +
                
		opacity: 1;

            

            
            

                
                80
                +
                
	}

            

            
            

                
                81
                +
                
</style>