From 18869351347bc2e4a2b6a6c682167d7da1683c71 Mon Sep 17 00:00:00 2001 From: Nico Date: Tue, 15 Oct 2024 23:57:58 -0500 Subject: [PATCH] feat: Upgrade to new color scheme; Add favicon svg; Add email obfuscator --- public/favicon.svg | 10 +- public/scripts/warpspeed-dark.min.js | 7 + public/scripts/warpspeed-light.min.js | 7 + public/search-index.json | 36 ++++ src/components/Header.astro | 42 +++-- src/components/ObfuscatedEmail.astro | 29 ++++ src/components/SearchBar.astro | 69 +++++--- src/components/Theme.astro | 30 ++-- src/layouts/BlogLayout.astro | 95 +++++++---- src/layouts/Layout.astro | 86 +++++++--- src/pages/blog/[...page].astro | 194 +++++++++------------ src/pages/index.astro | 233 +++++++++++++++----------- src/pages/tags/[tag].astro | 41 +---- src/styles/global.css | 116 ++++++++++--- 14 files changed, 605 insertions(+), 390 deletions(-) create mode 100644 public/scripts/warpspeed-dark.min.js create mode 100644 public/scripts/warpspeed-light.min.js create mode 100644 src/components/ObfuscatedEmail.astro diff --git a/public/favicon.svg b/public/favicon.svg index f157bd1..23fff0a 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,9 +1 @@ - - - - + \ No newline at end of file diff --git a/public/scripts/warpspeed-dark.min.js b/public/scripts/warpspeed-dark.min.js new file mode 100644 index 0000000..81f051f --- /dev/null +++ b/public/scripts/warpspeed-dark.min.js @@ -0,0 +1,7 @@ +window.requestAnimationFrame=window.requestAnimationFrame||(function(callback,element){setTimeout(callback,1000/60)});function timeStamp(){if(window.performance.now){return window.performance.now()}else{return Date.now()}}function isVisible(el){var r=el.getBoundingClientRect();return r.top+r.height>=0&&r.left+r.width>=0&&r.bottom-r.height<=(window.innerHeight||document.documentElement.clientHeight)&&r.right-r.width<=(window.innerWidth||document.documentElement.clientWidth)}function Star(x,y,z){this.x=x;this.y=y;this.z=z;this.size=0.5+Math.random()}function WarpSpeed(targetId,config){this.targetId=targetId;if(WarpSpeed.RUNNING_INSTANCES==undefined){WarpSpeed.RUNNING_INSTANCES={}}if(WarpSpeed.RUNNING_INSTANCES[targetId]){WarpSpeed.RUNNING_INSTANCES[targetId].destroy()}config=config||{};if(typeof config=="string"){try{config=JSON.parse(config)}catch(e){config={}}}this.SPEED=config.speed==undefined||config.speed<0?0.7:config.speed;this.TARGET_SPEED=config.targetSpeed==undefined||config.targetSpeed<0?this.SPEED:config.targetSpeed;this.SPEED_ADJ_FACTOR=config.speedAdjFactor==undefined?0.03:config.speedAdjFactor<0?0:config.speedAdjFactor>1?1:config.speedAdjFactor;this.DENSITY=config.density==undefined||config.density<=0?0.7:config.density;this.USE_CIRCLES=config.shape==undefined?true:config.shape=="circle";this.DEPTH_ALPHA=config.depthFade==undefined?true:config.depthFade;this.WARP_EFFECT=config.warpEffect==undefined?true:config.warpEffect;this.WARP_EFFECT_LENGTH=config.warpEffectLength==undefined?5:config.warpEffectLength<0?0:config.warpEffectLength;this.STAR_SCALE=config.starSize==undefined||config.starSize<=0?3:config.starSize;this.BACKGROUND_COLOR=config.backgroundColor==undefined?"hsl(263,45%,7%)":config.backgroundColor;var canvas=document.getElementById(this.targetId);canvas.width=1;canvas.height=1;this.STAR_COLOR=config.starColor==undefined?"#FFFFFF":config.starColor;this.prevW=-1;this.prevH=-1;this.stars=[];for(var i=0;i0.5||yOnDisplay<-0.5||yOnDisplay>0.5)){continue}var size=s.size*this.size/s.z;if(size<0.3){continue;}if(this.DEPTH_ALPHA){var alpha=(1000-s.z)/1000;ctx.globalAlpha=alpha<0?0:alpha>1?1:alpha}if(this.WARP_EFFECT){ctx.beginPath();var x2OnDisplay=s.x/(s.z+this.WARP_EFFECT_LENGTH*this.SPEED),y2OnDisplay=s.y/(s.z+this.WARP_EFFECT_LENGTH*this.SPEED);if(x2OnDisplay<-0.5||x2OnDisplay>0.5||y2OnDisplay<-0.5||y2OnDisplay>0.5){continue}ctx.moveTo(canvas.width*(xOnDisplay+0.5)-size/2,canvas.height*(yOnDisplay+0.5)-size/2);ctx.lineTo(canvas.width*(x2OnDisplay+0.5)-size/2,canvas.height*(y2OnDisplay+0.5)-size/2);ctx.lineWidth=size>this.maxLineWidth?this.maxLineWidth:size;if(this.USE_CIRCLES){ctx.lineCap="round"}else{ctx.lineCap="butt"}ctx.strokeStyle=ctx.fillStyle;ctx.stroke()}else if(this.USE_CIRCLES){ctx.beginPath();ctx.arc(canvas.width*(xOnDisplay+0.5)-size/2,canvas.height*(yOnDisplay+0.5)-size/2,size/2,0,2*Math.PI);ctx.fill()}else{ctx.fillRect(canvas.width*(xOnDisplay+0.5)-size/2,canvas.height*(yOnDisplay+0.5)-size/2,size,size)}}this.prevW=canvas.clientWidth;this.prevH=canvas.clientHeight}if(this.drawRequest!=-1){this.drawRequest=requestAnimationFrame(this.draw.bind(this))}this.LAST_RENDER_T=timeStamp()-TIME},move:function(){var t=timeStamp(),speedMulF=(t-this.lastMoveTS)/(1000/60);this.lastMoveTS=t;if(this.PAUSED){return}var speedAdjF=Math.pow(this.SPEED_ADJ_FACTOR<0?0:this.SPEED_ADJ_FACTOR>1?1:this.SPEED_ADJ_FACTOR,1/speedMulF);this.SPEED=this.TARGET_SPEED*speedAdjF+this.SPEED*(1-speedAdjF);if(this.SPEED<0){this.SPEED=0}var speed=this.SPEED*speedMulF;for(var i=0;i=0&&r.left+r.width>=0&&r.bottom-r.height<=(window.innerHeight||document.documentElement.clientHeight)&&r.right-r.width<=(window.innerWidth||document.documentElement.clientWidth)}function Star(x,y,z){this.x=x;this.y=y;this.z=z;this.size=0.5+Math.random()}function WarpSpeed(targetId,config){this.targetId=targetId;if(WarpSpeed.RUNNING_INSTANCES==undefined){WarpSpeed.RUNNING_INSTANCES={}}if(WarpSpeed.RUNNING_INSTANCES[targetId]){WarpSpeed.RUNNING_INSTANCES[targetId].destroy()}config=config||{};if(typeof config=="string"){try{config=JSON.parse(config)}catch(e){config={}}}this.SPEED=config.speed==undefined||config.speed<0?0.7:config.speed;this.TARGET_SPEED=config.targetSpeed==undefined||config.targetSpeed<0?this.SPEED:config.targetSpeed;this.SPEED_ADJ_FACTOR=config.speedAdjFactor==undefined?0.03:config.speedAdjFactor<0?0:config.speedAdjFactor>1?1:config.speedAdjFactor;this.DENSITY=config.density==undefined||config.density<=0?0.7:config.density;this.USE_CIRCLES=config.shape==undefined?true:config.shape=="circle";this.DEPTH_ALPHA=config.depthFade==undefined?true:config.depthFade;this.WARP_EFFECT=config.warpEffect==undefined?true:config.warpEffect;this.WARP_EFFECT_LENGTH=config.warpEffectLength==undefined?5:config.warpEffectLength<0?0:config.warpEffectLength;this.STAR_SCALE=config.starSize==undefined||config.starSize<=0?3:config.starSize;this.BACKGROUND_COLOR=config.backgroundColor==undefined?"hsl(263,45%,7%)":config.backgroundColor;var canvas=document.getElementById(this.targetId);canvas.width=1;canvas.height=1;this.STAR_COLOR=config.starColor==undefined?"#FFFFFF":config.starColor;this.prevW=-1;this.prevH=-1;this.stars=[];for(var i=0;i0.5||yOnDisplay<-0.5||yOnDisplay>0.5)){continue}var size=s.size*this.size/s.z;if(size<0.3){continue;}if(this.DEPTH_ALPHA){var alpha=(1000-s.z)/1000;ctx.globalAlpha=alpha<0?0:alpha>1?1:alpha}if(this.WARP_EFFECT){ctx.beginPath();var x2OnDisplay=s.x/(s.z+this.WARP_EFFECT_LENGTH*this.SPEED),y2OnDisplay=s.y/(s.z+this.WARP_EFFECT_LENGTH*this.SPEED);if(x2OnDisplay<-0.5||x2OnDisplay>0.5||y2OnDisplay<-0.5||y2OnDisplay>0.5){continue}ctx.moveTo(canvas.width*(xOnDisplay+0.5)-size/2,canvas.height*(yOnDisplay+0.5)-size/2);ctx.lineTo(canvas.width*(x2OnDisplay+0.5)-size/2,canvas.height*(y2OnDisplay+0.5)-size/2);ctx.lineWidth=size>this.maxLineWidth?this.maxLineWidth:size;if(this.USE_CIRCLES){ctx.lineCap="round"}else{ctx.lineCap="butt"}ctx.strokeStyle=ctx.fillStyle;ctx.stroke()}else if(this.USE_CIRCLES){ctx.beginPath();ctx.arc(canvas.width*(xOnDisplay+0.5)-size/2,canvas.height*(yOnDisplay+0.5)-size/2,size/2,0,2*Math.PI);ctx.fill()}else{ctx.fillRect(canvas.width*(xOnDisplay+0.5)-size/2,canvas.height*(yOnDisplay+0.5)-size/2,size,size)}}this.prevW=canvas.clientWidth;this.prevH=canvas.clientHeight}if(this.drawRequest!=-1){this.drawRequest=requestAnimationFrame(this.draw.bind(this))}this.LAST_RENDER_T=timeStamp()-TIME},move:function(){var t=timeStamp(),speedMulF=(t-this.lastMoveTS)/(1000/60);this.lastMoveTS=t;if(this.PAUSED){return}var speedAdjF=Math.pow(this.SPEED_ADJ_FACTOR<0?0:this.SPEED_ADJ_FACTOR>1?1:this.SPEED_ADJ_FACTOR,1/speedMulF);this.SPEED=this.TARGET_SPEED*speedAdjF+this.SPEED*(1-speedAdjF);if(this.SPEED<0){this.SPEED=0}var speed=this.SPEED*speedMulF;for(var i=0;i +
@@ -16,17 +18,31 @@ const currentPath = Astro.url.pathname; diff --git a/src/components/SearchBar.astro b/src/components/SearchBar.astro index 6020493..7362ffe 100644 --- a/src/components/SearchBar.astro +++ b/src/components/SearchBar.astro @@ -78,33 +78,48 @@ diff --git a/src/pages/index.astro b/src/pages/index.astro index 68af5e9..0f007db 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,141 +1,163 @@ --- import Layout from "../layouts/Layout.astro"; +import ObfuscatedEmail from "../components/ObfuscatedEmail.astro"; let allPosts = await Astro.glob("./blog/**/index.md"); allPosts.sort((a, b) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf()); let recentPosts = allPosts.slice(0, 3); let socialMedia = [ - { - url: "https://github.com/nicosalm/", - icon: '', - name: "GitHub", - }, - { - url: "/resume.pdf", - icon: '', - name: "Resume", - }, - { - url: "https://www.linkedin.com/in/nicosalm/", - icon: '', - name: "LinkedIn", - }, - { - url: "mailto:nico@salm.dev", - icon: '', - name: "Email", - } + { + url: "https://github.com/nicosalm/", + icon: '', + name: "GitHub", + }, + { + url: "/resume.pdf", + icon: '', + name: "Resume", + }, + { + url: "https://www.linkedin.com/in/nicosalm/", + icon: '', + name: "LinkedIn", + }, + { + component: ObfuscatedEmail, + icon: '', + name: "Email", + }, ]; --- - +

Hey! I'm Nico.

I'm a software and data engineer

- I have a passion for solving complex problems and creating intuitive solutions. - I enjoy many aspects of computing: from ML and AI for predictive analytics to the intricacies of low-level systems, compilers, and computer science theory. - My goal is to master the skills needed to become an exceptional software engineer and data scientist. + I have a passion for solving complex problems and creating intuitive solutions. I enjoy many aspects of computing: from ML and AI for predictive analytics to the intricacies of low-level systems, compilers, and + computer science theory. My goal is to master the skills needed to become an exceptional software engineer and data scientist.

-
-

About Me

-
-
-

- I grew up in Door County, Wisconsin – known for bustling tourism and beautiful waters. - I study Computer and Data Science at the University of Wisconsin-Madison. - While at UW, I've helped to found the Wisconsin Quantum Computing Club, where I serve as the Vice President. - I am a coordinator of the Undergraduate Projects Lab (UPL), where I develop cool things and help others do the same. - I like to read, write, and learn about the world around me. - I love realizing complex ideas and I am committed to continual innovation. -

+
+

About Me

+
+
+

+ I grew up in Door County, Wisconsin – known for bustling tourism and beautiful waters. I study Computer and Data Science at the University of Wisconsin-Madison. While at UW, I've helped to found the Wisconsin + Quantum Computing Club, where I serve as the Vice President. I am a coordinator of the Undergraduate Projects Lab (UPL), where I develop cool things and help others do the same. I like to read, write, and + learn about the world around me. I love realizing complex ideas and I am committed to continual innovation. +

+
+
+
+ +
+

Recent Articles

+
-
- -
-

Recent Articles

- - See all articles -
- + + + )) + } + + See all articles +
- + + + + .social-link :global(.obfuscated-email) { + font-weight: 500; + } + + .social-link:hover :global(.obfuscated-email) { + color: inherit; + } + diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro index 7350c4f..cab7981 100644 --- a/src/pages/tags/[tag].astro +++ b/src/pages/tags/[tag].astro @@ -1,5 +1,6 @@ --- import Layout from '../../layouts/Layout.astro'; +import '../../styles/global.css'; export async function getStaticPaths() { const allPosts = await Astro.glob('../blog/**/index.md'); @@ -49,46 +50,6 @@ const { posts } = Astro.props; font-size: 2.5rem; margin-bottom: 2rem; } - .article-list { - list-style-type: none; - padding: 0; - margin: 0; - } - .article-item { - margin-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border); - padding-bottom: 1.5rem; - } - .article-item:last-child { - border-bottom: none; - } - .article-link { - text-decoration: none; - color: inherit; - display: block; - transition: transform 0.2s ease, background-color 0.2s ease; - padding: 0.5rem; - border-radius: 4px; - } - .article-link:hover { - transform: translateX(5px); - background-color: rgba(255, 255, 255, 0.05); - } - .article-title { - font-size: 1.5rem; - margin: 0 0 0.5rem 0; - color: var(--color-accent); - transition: color 0.2s ease; - } - .article-description { - font-size: 1rem; - margin: 0 0 0.5rem 0; - color: var(--color-text); - } - .article-meta { - font-size: 0.9rem; - color: var(--color-secondary); - } .see-all-link { display: inline-block; margin-top: 2rem; diff --git a/src/styles/global.css b/src/styles/global.css index 2f0594a..661d410 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,24 +1,26 @@ /* Import a serif font */ -@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"); :root { - --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif; + --font-serif: "Merriweather", Georgia, "Times New Roman", serif; /* light mode colors */ --color-bg-light: #f8f4e9; --color-text-light: #333333; --color-primary-light: #4a4a4a; --color-secondary-light: #6b6b6b; - --color-accent-light: #8b6b4a; + --color-accent-light: #d67424; --color-border-light: #e0e0e0; + --color-header-light: #D0C8C0; /* dark mode colors */ - --color-bg-dark: #2b2b2b; + --color-bg-dark: #100a1a; --color-text-dark: #e0e0e0; --color-primary-dark: #c0c0c0; --color-secondary-dark: #a0a0a0; - --color-accent-dark: #d4a76a; + --color-accent-dark: #f9bd9c; --color-border-dark: #4a4a4a; + --color-header-dark: #040426; /* default to light mode */ --color-bg: var(--color-bg-light); @@ -27,9 +29,10 @@ --color-secondary: var(--color-secondary-light); --color-accent: var(--color-accent-light); --color-border: var(--color-border-light); + --color-header: var(--color-header-light); --max-width: 850px; - --side-margin: max(calc((100% - var(--max-width)) / 2), 1rem); /* Adjusted for better centering */ + --side-margin: max(calc((100% - var(--max-width)) / 2), 1rem); /* Adjusted for better centering */ } @media (prefers-color-scheme: dark) { @@ -40,6 +43,7 @@ --color-secondary: var(--color-secondary-dark); --color-accent: var(--color-accent-dark); --color-border: var(--color-border-dark); + --color-header: var(--color-header-dark); } } @@ -50,6 +54,7 @@ --color-secondary: var(--color-secondary-dark); --color-accent: var(--color-accent-dark); --color-border: var(--color-border-dark); + --color-header: var(--color-header-dark); } body { @@ -63,19 +68,45 @@ body { } /* typography */ -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 2em; margin-bottom: 0.5em; line-height: 1.2; color: var(--color-primary); } -h1 { font-size: 2.5rem; } -h2 { font-size: 2rem; } -h3 { font-size: 1.75rem; } -h4 { font-size: 1.5rem; } -h5 { font-size: 1.25rem; } -h6 { font-size: 1rem; } +h1 { + font-size: 2.5rem; +} +h2 { + font-size: 2rem; +} +h3 { + font-size: 1.75rem; +} +h4 { + font-size: 1.5rem; +} +h5 { + font-size: 1.25rem; +} +h6 { + font-size: 1rem; +} + +#warpspeed { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} a { color: var(--color-accent); @@ -93,12 +124,13 @@ a:hover { max-width: var(--max-width); margin-left: var(--side-margin); margin-right: var(--side-margin); - padding: 2rem 0; + padding: 6rem 0; } /* header and footer */ -header, footer { - background-color: var(--color-bg); +header, +footer { + /* background-color: var(--color-bg); */ padding: 1rem 0; text-align: center; border-bottom: 1px solid var(--color-border); @@ -116,7 +148,53 @@ main { } /* utility classes */ -.text-center { text-align: center; } -.mb-1 { margin-bottom: 1rem; } -.mt-1 { margin-top: 1rem; } +.text-center { + text-align: center; +} +.mb-1 { + margin-bottom: 1rem; +} +.mt-1 { + margin-top: 1rem; +} +.article-list { + list-style-type: none; + padding: 0; + margin: 0; +} +.article-item { + margin-bottom: 2rem; + padding-bottom: 2rem; + border-bottom: 1px solid var(--color-border); +} +.article-item:last-child { + border-bottom: none; +} +.article-link { + text-decoration: none; + color: inherit; + display: block; + transition: transform 0.2s ease, background-color 0.2s ease; + padding: 0.5rem; + border-radius: 4px; +} +.article-link:hover { + transform: translateX(5px); + background-color: rgba(255, 255, 255, 0.05); +} +.article-title { + font-size: 1.5rem; + margin: 0 0 0.5rem 0; + color: var(--color-accent); + transition: color 0.2s ease; +} +.article-description { + font-size: 1rem; + margin: 0 0 0.5rem 0; + color: var(--color-text); +} +.article-meta { + font-size: 0.9rem; + color: var(--color-secondary); +}