Stash work

default.nix

@@ -3,7 +3,7 @@
 pkgs.mkShell
 {
   nativeBuildInputs = with pkgs; [
-    git,
+    git
     nodejs
   ];
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -10,7 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.2",
-    "astro": "^4.11.5"
+    "@astrojs/mdx": "^3.1.3",
+    "astro": "^4.12.2"
   }
 }

src/components/Cursor.astro

@@ -0,0 +1,44 @@
+---
+---
+
+<div id="cursor"/>
+
+
+<script>
+document.body.onmousemove = function(e) {
+	document.documentElement.style.setProperty (
+		'--x', (
+			e.clientX + window.scrollX
+		)
+		+ 'px'
+	);
+
+	document.documentElement.style.setProperty (
+		'--y', (
+			e.clientY + window.scrollY
+		)
+		+ 'px'
+	);
+}
+</script>
+
+
+<style>
+#cursor {
+	position: absolute;
+
+	top: var(--y, 0);
+	left: var(--x, 0);
+	transform: translate(-50%, -50%);
+	z-index: 2;
+
+	width: 1rem;
+	height: 1rem;
+
+	background: white;
+	border-radius: 50%;
+
+	mix-blend-mode: difference;
+/*	transition: transform 0.2s;*/
+}
+</style>

src/components/ExperienceItem.astro

@@ -3,34 +3,21 @@ import SkillItem from "./SkillItem.astro"
 import WorkReference from "./WorkReference.astro"
 
 interface Props {
-	achor: string;
 	startDate: string;
 	endDate: string;
-	role: string;
-	company: string;
-	href: string;
 	blurb: string;
 	skills: Array<string>;
 	work: Array<Object>;
 }
 
-const { anchor, startDate, endDate, role, company, href, blurb, skills, work } = Astro.props;
+// const { anchor, startDate, endDate, role, company, href, blurb, skills, work } = Astro.props;
+const { startDate, endDate, blurb, skills, work } = Astro.props;
 ---
 
-<div id={anchor} class="experience">
+<div class="experience">
 	<h4 class="date text-dark">{startDate} — {endDate}</h4>
 
-	<a href={href}>
-		<h3 class="role">
-			<span class="line">{role}</span>
-			<span class="line">
-				@ {company}
-				<i class="fa fa-fw fa-angle-double-right" aria-hidden="true"/>
-			</span>
-		</h3>
-	</a>
-
-	<div class="blurb text-dark">{blurb}</div>
+	<div class="blurb">{blurb}</div>
 
 	<div class="work-links">
 		{ work && work.map((work) =>
@@ -41,13 +28,17 @@ const { anchor, startDate, endDate, role, company, href, blurb, skills, work } =
 		)}
 	</div>
 
+	<div style="height: 100%;"/>
+
+	<!--
 	<div class="skills">
-		{ skills && skills.map((skill) =>
+		{ /*skills && skills.map((skill) =>
 			<div class="skill fade-item">
 				{skill}
 			</div>
-		)}
+		)*/}
 	</div>
+	-->
 </div>
 
 
@@ -70,7 +61,7 @@ h3 {
 }
 
 .role {
-	font-family: "Rasa", serif;
+/*	font-family: "Rasa", serif;*/
 	font-size: 1.5em;
 	line-height: 1em;
 
@@ -95,7 +86,7 @@ h3 {
 .work-link {
 	display: block;
 
-	font-family: "Rasa", serif;
+/*	font-family: "Rasa", serif;*/
 	text-decoration: none;
 
 	margin: 0.25em 0;
@@ -130,7 +121,7 @@ h3 {
 	color: var(--gold);
 	background-color: var(--goldTransparent);
 
-	font-family: "Rasa", serif;
+/*	font-family: "Rasa", serif;*/
 	line-height: 2em;
 
 	border-radius: 0.5em;

src/components/ExperienceItemOld.astro

@@ -0,0 +1,157 @@
+---
+import SkillItem from "./SkillItem.astro"
+import WorkReference from "./WorkReference.astro"
+
+interface Props {
+	achor: string;
+	startDate: string;
+	endDate: string;
+	role: string;
+	company: string;
+	href: string;
+	blurb: string;
+	skills: Array<string>;
+	work: Array<Object>;
+}
+
+const { anchor, startDate, endDate, role, company, href, blurb, skills, work } = Astro.props;
+---
+
+<div id={anchor} class="experience">
+	<h4 class="date text-dark">{startDate} — {endDate}</h4>
+
+	<a href={href}>
+		<h3 class="role">
+			<span class="line">{role}</span>
+			<span class="line">
+				@ {company}
+				<i class="fa fa-fw fa-angle-double-right" aria-hidden="true"/>
+			</span>
+		</h3>
+	</a>
+
+	<div class="blurb text-dark">{blurb}</div>
+
+	<div class="work-links">
+		{ work && work.map((work) =>
+			<a class="work-link" href={work.href}>
+				<span class="work-text">{work.text}</span>
+				<i class="fa fa-fw fa-angle-double-right" aria-hidden="true"/>
+			</a>
+		)}
+	</div>
+
+	<div class="skills">
+		{ skills && skills.map((skill) =>
+			<div class="skill fade-item">
+				{skill}
+			</div>
+		)}
+	</div>
+</div>
+
+
+<style>
+
+.experience {
+	padding: 1em;
+}
+
+
+
+h4 {
+	margin: 0.25em 0 0.25em 0.1em;
+}
+
+
+
+h3 {
+	margin: 0.2em 0 0.6em 0;
+}
+
+.role {
+	font-family: "Rasa", serif;
+	font-size: 1.5em;
+	line-height: 1em;
+
+	.line {
+		text-decoration: underline;
+		text-decoration-color: var(--gold);
+	}
+}
+
+
+
+.blurb {
+	margin: 0em 0em 1em 0em;
+}
+
+
+
+.work-links {
+	margin: 1em 0;
+}
+
+.work-link {
+	display: block;
+
+	font-family: "Rasa", serif;
+	text-decoration: none;
+
+	margin: 0.25em 0;
+}
+
+.work-text {
+	text-decoration: underline;
+	text-decoration-color: var(--gold);
+}
+
+
+
+.skills {
+	margin: 1em 0;
+}
+
+.skills .skill {
+	/* This has to be here to properly animate */
+	transition: opacity 0.2s;
+}
+
+.skills:has(.skill:hover) .skill:not(:hover) {
+	opacity: 0.2;
+}
+
+.skill {
+	display: inline-block;
+
+	padding: 0 0.5em;
+	margin: 0.25em 0.1em;
+
+	color: var(--gold);
+	background-color: var(--goldTransparent);
+
+	font-family: "Rasa", serif;
+	line-height: 2em;
+
+	border-radius: 0.5em;
+}
+
+
+
+@media (prefers-reduced-motion) {
+	.skills:has(.skill:hover) .skill:not(:hover) {
+		opacity: 1;
+	}
+}
+
+@media (prefers-reduced-transparency) {
+	.skill {
+		background-color: rgb(47, 41, 28);
+	}
+
+	.skills:has(.skill:hover) .skill:not(:hover) {
+		opacity: 1;
+	}
+}
+
+</style>