-
Notifications
You must be signed in to change notification settings - Fork 41
/
Copy pathindex.html
34 lines (34 loc) · 11.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctypehtml><html lang=en><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><title>Dalin Huang - Senior Full Stack Developer Portfolio</title><meta content="Dalin Huang's portfolio showcasing experience as a Senior Full Stack Developer, projects, and skills in web development and blockchain technology."name=description><meta content="Dalin Huang, Full Stack Developer, Web Development, Blockchain, React, Node.js, JavaScript"name=keywords><link href=https://dalin.dev rel=canonical><style>body,html{font-family:"Roboto Mono",monospace;background-color:#001;color:#0f0;margin:0;padding:0;line-height:1.6;overflow-x:hidden;min-height:100vh}.container{max-width:800px;margin:0 auto;padding:20px;position:relative;z-index:1}h1{text-align:center;color:#0f0;text-shadow:0 0 10px #0f0}.block{background-color:rgba(26,31,44,.8);border:1px solid #2a3040;border-radius:5px;padding:20px;margin-bottom:40px;position:relative;transition:all .3s ease;transform-style:preserve-3d}.block::after{content:"";position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:2px;height:20px;background-color:#0f0;animation:pulseConnector 2s infinite}.block:last-child::after{display:none}@keyframes pulseConnector{0%,100%{opacity:.5}50%{opacity:1}}.block-header{display:flex;justify-content:space-between;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #0f0}.block-height{font-size:1.2em;color:#0f0;font-weight:700}.block-hash{font-size:.8em;color:#888;word-break:break-all}@media (max-width:600px){.block-hash{display:none}}.block-content{background-color:rgba(0,255,0,.05);border-radius:3px;padding:10px}.title{font-weight:700;color:#0f0;margin-bottom:5px}.company{color:#09f}.date{color:#f90}.description{margin-top:10px}@media (max-width:600px){.container{padding:10px}.block{padding:15px}}.glow{animation:glow 1.5s ease-in-out infinite alternate}@keyframes glow{from{text-shadow:0 0 5px #0f0,0 0 10px #0f0}to{text-shadow:0 0 10px #0f0,0 0 20px #0f0}}#space-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.star{position:absolute;background-color:#fff;border-radius:50%;animation:twinkle 1s infinite alternate}@keyframes twinkle{0%{opacity:.3}100%{opacity:1}}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px;padding:0}.tab{background-color:rgba(26,31,44,.8);border:1px solid #2a3040;border-radius:5px;padding:10px 15px;cursor:pointer;transition:all .3s ease;text-align:center;font-size:14px;box-sizing:border-box}.tab.active,.tab:hover{background-color:rgba(0,255,0,.2)}@media (max-width:600px){.tabs{grid-template-columns:1fr;padding:0}.tab{padding:10px 5px}.container{padding:10px 5px}}.content{display:none}.content.active{display:block}.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.project-card{background-color:rgba(26,31,44,.8);border:1px solid #2a3040;border-radius:5px;padding:20px;transition:all .3s ease;box-shadow:0 4px 6px rgba(0,255,0,.1)}.project-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px rgba(0,255,0,.2)}.project-card h3{color:#0f0;margin-bottom:15px;font-size:1.2em;text-align:center;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #0f0;padding-bottom:10px}.project-card .date{color:#f90;font-size:.9em;text-align:center;margin-bottom:10px}.project-card p{margin-bottom:0}.project-card a{color:#0f0;text-decoration:none;transition:all .3s ease}.project-card a:hover{text-shadow:0 0 5px #0f0}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.skill-category{background-color:rgba(26,31,44,.8);border:1px solid #2a3040;border-radius:5px;padding:20px;transition:all .3s ease;box-shadow:0 4px 6px rgba(0,255,0,.1)}.skill-category:hover{transform:translateY(-5px);box-shadow:0 6px 12px rgba(0,255,0,.2)}.skill-category h3{color:#0f0;margin-bottom:15px;font-size:1.2em;text-align:center;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #0f0;padding-bottom:10px}.skill-list{list-style-type:none;padding:0;margin:0}.skill-list li{margin-bottom:8px;padding-left:20px;position:relative}.skill-list li::before{content:"▹";position:absolute;left:0;color:#0f0}</style><div id=space-background></div><div class=container><h1 class=glow>Dalin Huang</h1><div class=tabs><div class="tab active"data-tab=experience>Experience</div><div class=tab data-tab=projects>Projects</div><div class=tab data-tab=skills>Skills</div></div><div class="content active"id=experience><div id=blockchain></div></div><div class=content id=projects><div class=project-grid></div></div><div class=content id=skills><div class=skills-grid></div></div></div>
<script>
const career=[{title:"Senior Full Stack Developer",company:"Real Simple Labs",date:"Dec 2023 – Present",description:"Revolutionized web app performance, achieving 80% bundle size reduction and 5x faster loading times. Integrated advanced payment processing and rebuilt backend using Supabase and Next.js."},{title:"Senior Product Developer",company:"Orium.com",date:"May 2022 – Dec 2023",description:"Developed modular headless commerce starter kit with 90+ Lighthouse scores. Led security, accessibility, and performance enhancements. Created innovative theme system using Figma tokens and Chakra UI."},{title:"Developer",company:"Shopify",date:"May 2019 – Feb 2020",description:"Worked on Shopify Money/Capital team. Contributed to projects resulting in significant revenue increases. Refactored capital offer decision tree, improving efficiency and testability."},{title:"Founder & Developer",company:"HiNature Ltd",date:"Jun 2019 – Present",description:"Co-founded eco-friendly cosmetics company. Developed WeChat scanner app analyzing 35,000 ingredients with 95% accuracy. Built and trained IT admin team in China."},{title:"Full Stack Developer",company:"Combyne Ag",date:"Feb 2017 – May 2019",description:"Built and maintained backend servers, developed admin systems, and integrated Salesforce. Utilized AWS services including EC2, S3, RDS, SQS, ELB, and Lambda."},{title:"Software Application Developer",company:"i-sight.com",date:"Mar 2016 – Feb 2017",description:"Led major projects as full-stack developer using Backbone.js, Node.js, Seneca.js, and PostgreSQL. Utilized various technologies including Elasticsearch, Git, and Redis."},{title:"Web Developer",company:"Events.com",date:"Mar 2015 – Mar 2016",description:"Developed and maintained online event registration services using LAMP stack. Worked with technologies including PHP5, JavaScript, Perl, MySQL, CodeIgniter, AngularJS, and Bootstrap3."},],projects=[{title:"xnohub.com",date:"2024",description:"Real-time visualizer for Nano currency network, showcasing live transactions and major nodes on a 3D globe with interactive effects.",link:"https://xnohub.com"},{title:"LocalXNO.com",date:"2024",description:"Nano marketplace using Next.js, Supabase, PostgreSQL, and various Google APIs for enhanced functionality.",link:"https://localxno.com"},{title:"Composable UI",date:"2022 – 2023",description:"Open-source React and Next.js tool for building custom commerce storefronts. Features a UI library, Figma Kit, and integrations with Algolia and Stripe.",link:"https://composable.com/composable-ui"},{title:"PayPaw",date:"Jul 2019 – 2021",description:"A payment service for Bytom Blockchain. Won first place in a dev challenge project with a USD $30,000 prize."},{title:"Mining Software",date:"2020",description:"Optimized C++ GPU mining software, boosting efficiency by 30% through caching."},{title:"Bytom Dice",date:"Jan 2019 – 2020",description:"Developed a cryptocurrency on-chain betting site for Bytom Blockchain."},],skills={"Front-End":["React","Tailwind","Shadcn/UI","Chakra UI","Typescript","JavaScript","HTML5","CSS3",],"Back-End":["Node.js","Typescript","Python","Ruby","PHP","Perl","Java",],Cloud:["Supabase","GCP","Firebase","Vercel","Netlify","AWS (EC2, RDS, S3, SQS, ELB, Lambda)","TenCent Cloud","Google API",],Data:["Supabase","Firebase","MySQL","PostgreSQL","Redis","Elasticsearch",],Frameworks:["Next.js","Remix","Ruby on Rails","Django","Flask","Vue.js","Express","Backbone.js","CodeIgniter",],"AI Tools":["ChatGPT","Claude","Cursor","Grok"]};function generateHash(){return"0x"+Array.from({length:64},()=>Math.floor(16*Math.random()).toString(16)).join("")}let blockHeight=0;function createBlock(e,t){let a=document.createElement("div");a.className="block";let i=generateHash();return a.innerHTML=`
<div class="block-header">
<span class="block-height">Block #${t}</span>
<span class="block-hash">${i}</span>
</div>
<div class="block-content">
<div class="title">${e.title}</div>
<div class="company">${e.company}</div>
<div class="date">${e.date}</div>
<div class="description">${e.description}</div>
</div>
`,a}function renderBlockchain(){let e=document.getElementById("blockchain");blockHeight=career.length,career.forEach((t,a)=>{let i=createBlock(t,blockHeight-a);e.appendChild(i)})}function renderProjects(){let e=document.querySelector(".project-grid");projects.forEach(t=>{let a=document.createElement("div");a.className="project-card";let i=`<h3>${t.title}</h3>`;t.link&&(i=`<h3><a href="${t.link}" target="_blank" rel="noopener noreferrer">${t.title}</a></h3>`),a.innerHTML=`
${i}
<div class="date">${t.date}</div>
<p>${t.description}</p>
`,e.appendChild(a)})}function renderSkills(){let e=document.querySelector(".skills-grid");for(let[t,a]of Object.entries(skills)){let i=document.createElement("div");i.className="skill-category",i.innerHTML=`
<h3>${t}</h3>
<ul class="skill-list">
${a.map(e=>`<li>${e}</li>`).join("")}
</ul>
`,e.appendChild(i)}}function updateBlockOrientation(e){let t=document.querySelectorAll(".block");t.forEach(t=>{let a=t.getBoundingClientRect(),i=a.left+a.width/2,n=a.top+a.height/2,o=-(e.clientY-n)/100,r=(e.clientX-i)/100;t.style.transform=`perspective(1000px) rotateX(${o}deg) rotateY(${r}deg)`})}function createStars(){let e=document.getElementById("space-background");for(let t=0;t<200;t++){let a=document.createElement("div");a.className="star",a.style.width=`${2*Math.random()}px`,a.style.height=a.style.width,a.style.left=`${100*Math.random()}%`,a.style.top=`${100*Math.random()}%`,a.style.animationDuration=`${3*Math.random()+1}s`,a.style.animationDelay=`${3*Math.random()}s`,e.appendChild(a)}}function switchTab(e){document.querySelectorAll(".tab").forEach(e=>e.classList.remove("active")),document.querySelectorAll(".content").forEach(e=>e.classList.remove("active")),document.querySelector(`.tab[data-tab="${e}"]`).classList.add("active"),document.getElementById(e).classList.add("active")}document.addEventListener("DOMContentLoaded",()=>{renderBlockchain(),renderProjects(),renderSkills(),createStars(),document.addEventListener("mousemove",updateBlockOrientation),document.querySelectorAll(".tab").forEach(e=>{e.addEventListener("click",()=>switchTab(e.dataset.tab))})});
</script><script type=application/ld+json>{
"@context": "http://schema.org",
"@type": "Person",
"name": "Dalin Huang",
"jobTitle": "Senior Full Stack Developer",
"url": "https://dalin.dev",
"sameAs": [
"https://www.linkedin.com/in/dalinhuang/",
"https://github.com/dalindev"
]
}</script>