Help
RSS
API
Feed
Maltego
Contact
Domain > b28.dev
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2024-09-26
172.67.142.99
(
ClassC
)
2026-02-14
104.21.94.240
(
ClassC
)
Port 443
HTTP/1.1 200 OKDate: Sat, 14 Feb 2026 15:03:34 GMTContent-Type: text/htmlTransfer-Encoding: chunkedConnection: keep-aliveReport-To: {group:cf-nel,max_age:604800,endpoints:{url:https://a.nel.cloudflare.com/report/v4?sDD6xw%2F%2BiHlZmo6Bb0KSovdT%2BT9dYQfNKlwGEjuBGR64w0ybiDCs%2F68Edj88lyiqRSCzvOrS%2Bx4dzopSHkb%2F12Cat01u%2BT%2FI%3D}}vary: Accept-Encodingcf-cache-status: DYNAMICNel: {report_to:cf-nel,success_fraction:0.0,max_age:604800}Server: cloudflareCF-RAY: 9cdd73f56e2b1d57-PDXalt-svc: h3:443; ma86400 !DOCTYPE html>html langen class> head>meta charsetUTF-8>meta nameviewport contentwidthdevice-width, initial-scale1.0>link relicon typeimage/svg+xml href/favicon.svg>meta namegenerator contentAstro v5.15.3>title>Portfolio - b28.dev/title>script> // Prevent FOUC by applying theme immediately (runs before bundling) if (localStorage.theme dark || (!(theme in localStorage) && window.matchMedia((prefers-color-scheme: dark)).matches)) { document.documentElement.classList.add(dark); } else { document.documentElement.classList.remove(dark); } /script>link relstylesheet href/_astro/_slug_.CADcjeA0.css>/head> body classfont-sans antialiased> div classmin-h-screen bg-background text-foreground relative> nav classfixed left-8 top-1/2 -translate-y-1/2 z-10 hidden lg:block> div classflex flex-col gap-4> button data-nav-buttonintro classw-2 h-8 rounded-full transition-all duration-500 bg-muted-foreground/30 hover:bg-muted-foreground/60 aria-labelNavigate to intro>/button>button data-nav-buttonprojects classw-2 h-8 rounded-full transition-all duration-500 bg-muted-foreground/30 hover:bg-muted-foreground/60 aria-labelNavigate to projects>/button>button data-nav-buttonwork classw-2 h-8 rounded-full transition-all duration-500 bg-muted-foreground/30 hover:bg-muted-foreground/60 aria-labelNavigate to work>/button>button data-nav-buttonthoughts classw-2 h-8 rounded-full transition-all duration-500 bg-muted-foreground/30 hover:bg-muted-foreground/60 aria-labelNavigate to thoughts>/button>button data-nav-buttonconnect classw-2 h-8 rounded-full transition-all duration-500 bg-muted-foreground/30 hover:bg-muted-foreground/60 aria-labelNavigate to connect>/button> /div> /nav> script typemodule>document.addEventListener(DOMContentLoaded,function(){const ndocument.querySelectorAll(data-nav-button);function d(t){n.forEach(e>{e.getAttribute(data-nav-button)t?(e.classList.remove(bg-muted-foreground/30,hover:bg-muted-foreground/60),e.classList.add(bg-foreground)):(e.classList.remove(bg-foreground),e.classList.add(bg-muted-foreground/30,hover:bg-muted-foreground/60))})}n.forEach(t>{t.addEventListener(click,()>{const et.getAttribute(data-nav-button),odocument.getElementById(e);o&&o.scrollIntoView({behavior:smooth,block:start})})}),window.addEventListener(activeSectionChange,t>{d(t.detail.sectionId)})});/script> main classcontent-container> header idintro data-sectionintro classmin-h-screen flex items-center opacity-0 relative p-8 lg:p-4> style>astro-island,astro-slot,astro-static-slot{display:contents}/style>script>(()>{var l(n,t)>{let iasync()>{await(await n())()},etypeof t.valueobject?t.value:void 0,s{timeout:enull?void 0:e.timeout};requestIdleCallbackin window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro{})).idlel;window.dispatchEvent(new Event(astro:idle));})();/script>script>(()>{var AObject.defineProperty;var g(i,o,a)>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):ioa;var d(i,o,a)>g(i,typeof o!symbol?o+:o,a);{let i{0:t>m(t),1:t>a(t),2:t>new RegExp(t),3:t>new Date(t),4:t>new Map(a(t)),5:t>new Set(a(t)),6:t>BigInt(t),7:t>new URL(t),8:t>new Uint8Array(t),9:t>new Uint16Array(t),10:t>new Uint32Array(t),11:t>1/0*t},ot>{letl,et;return l in i?il(e):void 0},at>t.map(o),mt>typeof t!object||tnull?t:Object.fromEntries(Object.entries(t).map((l,e)>l,o(e)));class y extends HTMLElement{constructor(){super(...arguments);d(this,Component);d(this,hydrator);d(this,hydrate,async()>{var b;if(!this.hydrator||!this.isConnected)return;let e(bthis.parentElement)null?void 0:b.closest(astro-islandssr);if(e){e.addEventListener(astro:hydrate,this.hydrate,{once:!0});return}let cthis.querySelectorAll(astro-slot),n{},hthis.querySelectorAll(templatedata-astro-template);for(let r of h){let sr.closest(this.tagName);s!null&&s.isSameNode(this)&&(nr.getAttribute(data-astro-template)||defaultr.innerHTML,r.remove())}for(let r of c){let sr.closest(this.tagName);s!null&&s.isSameNode(this)&&(nr.getAttribute(name)||defaultr.innerHTML)}let p;try{pthis.hasAttribute(props)?m(JSON.parse(this.getAttribute(props))):{}}catch(r){let sthis.getAttribute(component-url)||unknown>,vthis.getAttribute(component-export);throw v&&(s+` (export ${v})`),console.error(`hydrate Error parsing props for component ${s}`,this.getAttribute(props),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute(client)}),this.removeAttribute(ssr),this.dispatchEvent(new CustomEvent(astro:hydrate))});d(this,unmount,()>{this.isConnected||this.dispatchEvent(new CustomEvent(astro:unmount))})}disconnectedCallback(){document.removeEventListener(astro:after-swap,this.unmount),document.addEventListener(astro:after-swap,this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute(await-children)||document.readyStateinteractive||document.readyStatecomplete)this.childrenConnectedCallback();else{let e()>{document.removeEventListener(DOMContentLoaded,e),c.disconnect(),this.childrenConnectedCallback()},cnew MutationObserver(()>{var n;((nthis.lastChild)null?void 0:n.nodeType)Node.COMMENT_NODE&&this.lastChild.nodeValueastro:end&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener(DOMContentLoaded,e)}}async childrenConnectedCallback(){let ethis.getAttribute(before-hydration-url);e&&await import(e),this.start()}async start(){let eJSON.parse(this.getAttribute(opts)),cthis.getAttribute(client);if(Astrocvoid 0){window.addEventListener(`astro:${c}`,()>this.start(),{once:!0});return}try{await Astroc(async()>{let nthis.getAttribute(renderer-url),h,{default:p}await Promise.all(import(this.getAttribute(component-url)),n?import(n):()>()>{}),uthis.getAttribute(component-export)||default;if(!u.includes(.))this.Componenthu;else{this.Componenth;for(let f of u.split(.))this.Componentthis.Componentf}return this.hydratorp,this.hydrate},e,this)}catch(n){console.error(`astro-island Error hydrating ${this.getAttribute(component-url)}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,observedAttributes,props),customElements.get(astro-island)||customElements.define(astro-island,y)}})();/script>astro-island uidZ11g2BT prefixr1 component-url/_astro/ShaderBackground.BbsTX2rS.js component-exportdefault renderer-url/_astro/client.BfPWZUkF.js props{} ssr clientidle opts{"name":"ShaderBackground","value":true} await-children>style> .shader-background-container, .shader-background-container canvas { background-color: transparent !important; } /style>div classabsolute pointer-events-none shader-background-container styletop:0;left:0;width:1280px;height:720px;z-index:0;mix-blend-mode:screen;opacity:0;transition:opacity 0.8s ease-in-out;background-color:transparent>div stylewidth:1280px;height:720px>/div>/div>!--astro:end-->/astro-island> div idhero-content classrelative z-10 w-full> div classgrid lg:grid-cols-5 gap-12 sm:gap-16 w-full> div classlg:col-span-3 space-y-6 sm:space-y-8> div classspace-y-3 sm:space-y-2> div classtext-sm text-muted-foreground font-mono tracking-wider>PORTFOLIO / 2025 /div> h1 classtext-5xl sm:text-6xl lg:text-7xl font-light tracking-tight> John br> span classtext-muted-foreground>Chen/span> /h1> /div> div classspace-y-6 max-w-md> p classtext-lg sm:text-xl text-muted-foreground leading-relaxed>Building AI-powered applications with LLMs and agentic systems. Full-stack engineer specializing in rapid prototyping and production ML integrations./p> div classflex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 text-sm text-muted-foreground> div classflex items-center gap-2> div classw-2 h-2 rounded-full bg-green-500 animate-pulse>/div> Available for work /div> div>San Francisco, CA/div> /div> /div> /div> div classlg:col-span-2 flex flex-col justify-end space-y-6 sm:space-y-8 mt-8 lg:mt-0> div classspace-y-4> div classtext-sm text-muted-foreground font-mono>CURRENTLY/div> div classspace-y-2> div classtext-foreground>Independent Software Engineer/div> div classtext-muted-foreground>@ Self-Employed/div> div classtext-xs text-muted-foreground>2020 — Present/div> /div> /div> div classspace-y-4> div classtext-sm text-muted-foreground font-mono>FOCUS/div> div classflex flex-wrap gap-2> span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> Claude /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> ChatGPT /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> LangChain /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> BAML /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> Weaviate /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> Python /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> FastAPI /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> Rust /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> TypeScript /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> React /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> Astro /span>span classtext-xs transition-colors px-3 py-1 border border-border rounded-full hover:border-muted-foreground/50 duration-300 text-xs> Docker /span> /div> /div> /div> /div> /div> /header> section idprojects data-sectionprojects classsection-spacing opacity-0> div classspace-y-12 sm:space-y-16> div classflex flex-col sm:flex-row sm:items-end sm:justify-between gap-4> h2 classtext-3xl sm:text-4xl font-light>Featured Projects/h2> /div> div classgrid grid-cols-1 md:grid-cols-2 gap-8 items-stretch> a href/work/cs-club-ccsf classgroup flex flex-col card-interactive overflow-hidden h-full> div classflex flex-col flex-grow p-6> div classflex items-center justify-between mb-4> span classtext-xs font-medium text-muted-foreground> 2023-present /span> span classinline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 border border-yellow-200>★ Featured/span> /div> div classspace-y-3 flex-grow> div> h3 classtext-xl font-medium mb-1 group-hover:text-primary transition-colors> CS Club - Community Building & Education /h3> p classtext-sm text-muted-foreground> Officer @ City College of San Francisco /p> /div> p classtext-sm text-muted-foreground leading-relaxed> Treasurer and advisor for CS Club. Built https://ccsf-cs.club using Astro, achieving #1 Google ranking for CS clubs in SF. Led student teams attending tech events across the Bay Area. /p> /div> div classflex flex-wrap gap-2 mt-6> span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Astro /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Community Building /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Education /span> span classtag-base bg-muted/50 text-muted-foreground text-xs>+1 more/span> /div> div classflex items-center gap-2 mt-6 text-sm text-muted-foreground group-hover:text-foreground transition-colors> span>View Project/span> svg classw-4 h-4 transition-transform group-hover:translate-x-1 fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM9 5l7 7-7 7>/path> /svg> /div> /div> /a>a href/work/my-little-soda classgroup flex flex-col card-interactive overflow-hidden h-full> div classflex flex-col flex-grow p-6> div classflex items-center justify-between mb-4> span classtext-xs font-medium text-muted-foreground> 2025 /span> span classinline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 border border-yellow-200>★ Featured/span> /div> div classspace-y-3 flex-grow> div> h3 classtext-xl font-medium mb-1 group-hover:text-primary transition-colors> My Little Soda - Autonomous Coding Agent /h3> p classtext-sm text-muted-foreground> Creator & Maintainer @ Open Source /p> /div> p classtext-sm text-muted-foreground leading-relaxed> GitHub Issues-driven autonomous coding tool that uses LLMs to automatically implement features and fix bugs. /p> /div> div classflex flex-wrap gap-2 mt-6> span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Python /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> GitHub API /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Claude /span> span classtag-base bg-muted/50 text-muted-foreground text-xs>+2 more/span> /div> div classflex items-center gap-2 mt-6 text-sm text-muted-foreground group-hover:text-foreground transition-colors> span>View Project/span> svg classw-4 h-4 transition-transform group-hover:translate-x-1 fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM9 5l7 7-7 7>/path> /svg> /div> /div> /a>a href/work/potion-data-engineering classgroup flex flex-col card-interactive overflow-hidden h-full> div classflex flex-col flex-grow p-6> div classflex items-center justify-between mb-4> span classtext-xs font-medium text-muted-foreground> 2022 /span> span classinline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 border border-yellow-200>★ Featured/span> /div> div classspace-y-3 flex-grow> div> h3 classtext-xl font-medium mb-1 group-hover:text-primary transition-colors> Univar Solutions - Data Engineering /h3> p classtext-sm text-muted-foreground> Data Analyst (Contract) @ Potion /p> /div> p classtext-sm text-muted-foreground leading-relaxed> Contract data analyst for Potion, a software consultancy serving Univar Solutions. Built data reconciliation pipeline for chemical formula database and introduced Jupyter notebooks to annotation team. /p> /div> div classflex flex-wrap gap-2 mt-6> span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Python /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Jupyter /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Data Engineering /span> span classtag-base bg-muted/50 text-muted-foreground text-xs>+2 more/span> /div> div classflex items-center gap-2 mt-6 text-sm text-muted-foreground group-hover:text-foreground transition-colors> span>View Project/span> svg classw-4 h-4 transition-transform group-hover:translate-x-1 fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM9 5l7 7-7 7>/path> /svg> /div> /div> /a>a href/work/piper classgroup flex flex-col card-interactive overflow-hidden h-full> div classflex flex-col flex-grow p-6> div classflex items-center justify-between mb-4> span classtext-xs font-medium text-muted-foreground> 2018-2021 /span> span classinline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 border border-yellow-200>★ Featured/span> /div> div classspace-y-3 flex-grow> div> h3 classtext-xl font-medium mb-1 group-hover:text-primary transition-colors> Piper - STEM Learning Platform /h3> p classtext-sm text-muted-foreground> Software Engineer @ Piper, Inc. /p> /div> p classtext-sm text-muted-foreground leading-relaxed> Full-stack engineer on STEM learning platform combining hardware and software. Key contributor to expansion pack release, PiperStory (Minecraft-based game mode), and PiperCode (Blockly/Scratch teaching tool). /p> /div> div classflex flex-wrap gap-2 mt-6> span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Python /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> JavaScript /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> SQL /span> span classtag-base bg-muted/50 text-muted-foreground text-xs>+4 more/span> /div> div classflex items-center gap-2 mt-6 text-sm text-muted-foreground group-hover:text-foreground transition-colors> span>View Project/span> svg classw-4 h-4 transition-transform group-hover:translate-x-1 fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM9 5l7 7-7 7>/path> /svg> /div> /div> /a> /div> div classtext-center mt-12> a href/projects classbtn btn-secondary>View all projects/a> /div> /div> /section> section idwork data-sectionwork classsection-spacing opacity-0> div classspace-y-12 sm:space-y-16> div classflex flex-col sm:flex-row sm:items-end sm:justify-between gap-4> h2 classtext-3xl sm:text-4xl font-light>Selected Work/h2> div classtext-sm text-muted-foreground font-mono>2015 — Present/div> /div> div classspace-y-8 sm:space-y-12> a href/work/cs-club-ccsf classblock>div classgroup grid lg:grid-cols-12 gap-4 sm:gap-8 py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500 cursor-pointer>div classlg:col-span-2>div classtext-xl sm:text-2xl font-light text-muted-foreground group-hover:text-foreground transition-colors duration-500>2023-present/div>/div>div classlg:col-span-6 space-y-3>div>h3 classtext-lg sm:text-xl font-medium>Officer/h3>div classtext-muted-foreground>City College of San Francisco/div>/div>p classtext-muted-foreground leading-relaxed max-w-lg>Treasurer and advisor for CS Club. Built https://ccsf-cs.club using Astro, achieving #1 Google ranking for CS clubs in SF. Led student teams attending tech events across the Bay Area./p>/div>div classlg:col-span-4 flex flex-wrap gap-2 lg:justify-end mt-2 lg:mt-0>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Astro /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Community Building /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Education /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Event Management /span>/div>/div>/a>a href/work/potion-data-engineering classblock>div classgroup grid lg:grid-cols-12 gap-4 sm:gap-8 py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500 cursor-pointer>div classlg:col-span-2>div classtext-xl sm:text-2xl font-light text-muted-foreground group-hover:text-foreground transition-colors duration-500>2022/div>/div>div classlg:col-span-6 space-y-3>div>h3 classtext-lg sm:text-xl font-medium>Data Analyst (Contract)/h3>div classtext-muted-foreground>Potion/div>/div>p classtext-muted-foreground leading-relaxed max-w-lg>Contract data analyst for Potion, a software consultancy serving Univar Solutions. Built data reconciliation pipeline for chemical formula database and introduced Jupyter notebooks to annotation team./p>/div>div classlg:col-span-4 flex flex-wrap gap-2 lg:justify-end mt-2 lg:mt-0>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Python /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Jupyter /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Data Engineering /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> ETL /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Database Systems /span>/div>/div>/a>a href/work/piper classblock>div classgroup grid lg:grid-cols-12 gap-4 sm:gap-8 py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500 cursor-pointer>div classlg:col-span-2>div classtext-xl sm:text-2xl font-light text-muted-foreground group-hover:text-foreground transition-colors duration-500>2018-2021/div>/div>div classlg:col-span-6 space-y-3>div>h3 classtext-lg sm:text-xl font-medium>Software Engineer/h3>div classtext-muted-foreground>Piper, Inc./div>/div>p classtext-muted-foreground leading-relaxed max-w-lg>Full-stack engineer on STEM learning platform combining hardware and software. Key contributor to expansion pack release, PiperStory (Minecraft-based game mode), and PiperCode (Blockly/Scratch teaching tool)./p>/div>div classlg:col-span-4 flex flex-wrap gap-2 lg:justify-end mt-2 lg:mt-0>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Python /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> JavaScript /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> SQL /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Firebase /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Google Apps Engine /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Amplitude /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Game Development /span>/div>/div>/a>a href/work/ideawall-research classblock>div classgroup grid lg:grid-cols-12 gap-4 sm:gap-8 py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500 cursor-pointer>div classlg:col-span-2>div classtext-xl sm:text-2xl font-light text-muted-foreground group-hover:text-foreground transition-colors duration-500>2015-2016/div>/div>div classlg:col-span-6 space-y-3>div>h3 classtext-lg sm:text-xl font-medium>Research Assistant/h3>div classtext-muted-foreground>UC Davis Visualization Lab/div>/div>p classtext-muted-foreground leading-relaxed max-w-lg>Research assistant on ACM CSCW paper about AI-augmented creative collaboration. Contributed to user studies, Mandarin-to-English copyediting, and publication process for IdeaWall system./p>/div>div classlg:col-span-4 flex flex-wrap gap-2 lg:justify-end mt-2 lg:mt-0>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> HCI Research /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Real-time Processing /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> User Studies /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Data Visualization /span>span classtext-xs transition-colors px-2 py-1 text-muted-foreground rounded group-hover:border-muted-foreground/50 duration-500 text-xs> Academic Writing /span>/div>/div>/a> /div> /div> /section> section idthoughts data-sectionthoughts classsection-spacing opacity-0> div classspace-y-12 sm:space-y-16> h2 classtext-3xl sm:text-4xl font-light>Recent Thoughts/h2> div classgrid gap-6 sm:gap-8 lg:grid-cols-2> a href/blog/v0-to-production classgroup block p-6 sm:p-8 border border-border rounded-lg hover:border-muted-foreground/50 transition-all duration-500 hover:shadow-lg> div classspace-y-4> div classflex items-center justify-between text-xs text-muted-foreground font-mono> span>Oct 2025/span> span>5 min/span> /div> h3 classtext-lg sm:text-xl font-medium group-hover:text-muted-foreground transition-colors duration-300> v0 to Production /h3> p classtext-muted-foreground leading-relaxed>One day of prompting for a production-ready portfolio. I knew exactly what to ask for./p> div classflex items-center gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300> span>Read more/span> svg classw-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300 fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM17 8l4 4m0 0l-4 4m4-4H3>/path> /svg> /div> /div> /a>a href/blog/vibe-coding-a-portfolio-my-way classgroup block p-6 sm:p-8 border border-border rounded-lg hover:border-muted-foreground/50 transition-all duration-500 hover:shadow-lg> div classspace-y-4> div classflex items-center justify-between text-xs text-muted-foreground font-mono> span>Oct 2025/span> span>5 min/span> /div> h3 classtext-lg sm:text-xl font-medium group-hover:text-muted-foreground transition-colors duration-300> Vibe Coding a Portfolio My Way /h3> p classtext-muted-foreground leading-relaxed>Ten hours from start to production. A site that's fast to load, fast to update, and fast to extend. Here's how I got there, and what it uses./p> div classflex items-center gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300> span>Read more/span> svg classw-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300 fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM17 8l4 4m0 0l-4 4m4-4H3>/path> /svg> /div> /div> /a> /div> /div> /section> section idconnect data-sectionconnect classpy-20 sm:py-32 opacity-0> div classgrid lg:grid-cols-2 gap-12 sm:gap-16> div classspace-y-6 sm:space-y-8> h2 classtext-3xl sm:text-4xl font-light>Let's Connect/h2> div classspace-y-6> p classtext-lg sm:text-xl text-muted-foreground leading-relaxed> Open for AI/ML roles, contract work, and technical consulting on LLM/agentic applications. /p> div classspace-y-4> a href/cdn-cgi/l/email-protection#bbd1d4d3d595d3d095d8d3ded5fbdcd6dad2d795d8d4d6 classgroup flex items-center gap-3 text-foreground hover:text-muted-foreground transition-colors duration-300> span classtext-base sm:text-lg>span class__cf_email__ data-cfemail7b111413155513105518131e153b1c161a121755181416>email protected/span>/span> svg classw-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300 fillnone strokecurrentColor viewBox0 0 24 24> path strokeLinecapround strokeLinejoinround strokeWidth2 dM17 8l4 4m0 0l-4 4m4-4H3>/path> /svg> /a> /div> /div> /div> div classspace-y-6 sm:space-y-8> div classtext-sm text-muted-foreground font-mono tracking-wider>ELSEWHERE/div> div classgrid grid-cols-1 sm:grid-cols-2 gap-4> a hrefhttps://github.com/johnhkchen classgroup p-4 border border-border rounded-lg hover:border-muted-foreground/50 transition-all duration-300 hover:shadow-sm block target_blank relnoopener noreferrer> div classflex items-center justify-between> div classtext-foreground group-hover:text-muted-foreground transition-colors duration-300> GitHub /div> svg classw-4 h-4 text-muted-foreground group-hover:translate-x-1 transition-transform fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM9 5l7 7-7 7>/path> /svg> /div> /a>a hrefhttps://www.linkedin.com/in/john-chen-364294101/ classgroup p-4 border border-border rounded-lg hover:border-muted-foreground/50 transition-all duration-300 hover:shadow-sm block target_blank relnoopener noreferrer> div classflex items-center justify-between> div classtext-foreground group-hover:text-muted-foreground transition-colors duration-300> LinkedIn /div> svg classw-4 h-4 text-muted-foreground group-hover:translate-x-1 transition-transform fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM9 5l7 7-7 7>/path> /svg> /div> /a>a href/cdn-cgi/l/email-protection#0963666167276162276a616c67496e64686065276a6664 classgroup p-4 border border-border rounded-lg hover:border-muted-foreground/50 transition-all duration-300 hover:shadow-sm block target_blank relnoopener noreferrer> div classflex items-center justify-between> div classtext-foreground group-hover:text-muted-foreground transition-colors duration-300> Email /div> svg classw-4 h-4 text-muted-foreground group-hover:translate-x-1 transition-transform fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM9 5l7 7-7 7>/path> /svg> /div> /a> /div> /div> /div> /section> footer classpy-12 sm:py-16 border-t border-border> div classflex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 sm:gap-8> div classspace-y-2> div classtext-sm text-muted-foreground>© 2025 John Chen/div> div classtext-xs text-muted-foreground>Built with Astro, Hono, Directus & Claude. Design by v0 + Felix M./div> /div> div classflex items-center gap-4> button idtheme-toggle classgroup p-3 rounded-lg border border-border hover:border-muted-foreground/50 transition-all duration-300 aria-labelToggle theme> !-- Show sun icon in dark mode --> svg idsun-icon classw-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors duration-300 hidden dark:block fillcurrentColor viewBox0 0 20 20> path fill-ruleevenodd dM10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z clip-ruleevenodd>/path> /svg> !-- Show moon icon in light mode --> svg idmoon-icon classw-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors duration-300 block dark:hidden fillcurrentColor viewBox0 0 20 20> path dM17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z>/path> /svg> /button> script data-cfasyncfalse src/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js>/script>script typemodule>function t(){document.documentElement.classList.contains(dark)?(document.documentElement.classList.remove(dark),localStorage.themelight):(document.documentElement.classList.add(dark),localStorage.themedark)}document.addEventListener(DOMContentLoaded,()>{document.getElementById(theme-toggle)?.addEventListener(click,t)});document.addEventListener(astro:page-load,()>{document.getElementById(theme-toggle)?.addEventListener(click,t)});/script> /div> /div> /footer> /main> div classfade-border>/div> /div> script typemodule>document.addEventListener(DOMContentLoaded,function(){document.documentElement.style.scrollBehaviorsmooth;const onew IntersectionObserver(t>{t.forEach(e>{e.isIntersecting&&(e.target.classList.add(animate-fade-in-up),e.target.id&&(window.activeSectione.target.id,window.dispatchEvent(new CustomEvent(activeSectionChange,{detail:{sectionId:e.target.id}}))))})},{threshold:.3,rootMargin:0px 0px -20% 0px});document.querySelectorAll(section, data-section).forEach(t>{t&&o.observe(t)}),window.scrollToSectionfunction(t){const edocument.getElementById(t);e&&e.scrollIntoView({behavior:smooth})},window.activeSectionnull});/script> /body> /html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]