<!DOCTYPE html>
<html lang="en">
<head>
<title>Goragod Wiriya — Software Engineer Portfolio</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index,follow">
<meta name="generator" content="GrapesJS Studio">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./style.css">
</head>
<body class="gw-body cls-ojppnp">
<header class="header-bar">
<nav class="primary-navigation"><a href="#hero" class="brand-link">
<div class="brand-mark"><span class="brand-initials">GW</span></div><span class="brand-name">Goragod Wiriya</span>
</a>
<ul class="nav-links-list">
<li><a href="#about" class="gw-link nav-link-about">About</a></li>
<li><a href="#projects" class="gw-link nav-link-projects">Projects</a></li>
<li><a href="#demo" class="gw-link nav-link-demo">Demo</a></li>
<li><a href="#contact" class="gw-link nav-link-contact">Contact</a></li>
</ul>
<div class="header-cta-wrapper"><a href="#projects" class="gw-button header-cta-button">View My Work</a></div>
</nav>
</header>
<main>
<section id="hero" class="hero-section">
<div class="hero-background-wrapper"><img loading="lazy" alt="Minimalist developer workstation background" src="https://app.grapesjs.com/api/assets/random-image?query=%22modern%20minimalist%20developer%20workstation%20dark%20aesthetic%22&w=1600&h=900" class="hero-background-image-desktop" /><img loading="lazy" alt="Minimalist developer workstation background (mobile)" src="https://app.grapesjs.com/api/assets/random-image?query=%22modern%20minimalist%20developer%20workstation%20dark%20aesthetic%22&w=800&h=1200" class="hero-background-image-mobile" />
<div class="hero-gradient-overlay"></div>
</div>
<div class="hero-container">
<div class="hero-content-wrapper">
<div class="hero-text-column">
<h1 class="gw-h1 hero-title">
Building reliable, fast, and elegant web experiences
</h1>
<p class="hero-subtitle">
I’m Goragod Wiriya, a software engineer focused on crafting performant frontends and scalable backends. I turn complex problems into simple, delightful products.
</p>
<div class="hero-actions"><a href="#projects" class="gw-button hero-primary-cta">
Explore Projects
</a><a href="#contact" class="hero-secondary-cta">
Get In Touch
</a></div>
<ul class="hero-highlights-list">
<li class="hero-highlight-item"><img loading="lazy" alt="Performance icon" src="https://api.iconify.design/lucide-gauge.svg" class="hero-highlight-icon-performance" /><span>Performance-first</span></li>
<li class="hero-highlight-item"><img loading="lazy" alt="Security icon" src="https://api.iconify.design/lucide-shield.svg" class="hero-highlight-icon-secure" /><span>Secure by default</span></li>
<li class="hero-highlight-item"><img loading="lazy" alt="Accessibility icon" src="https://api.iconify.design/lucide-accessibility.svg" class="hero-highlight-icon-accessible" /><span>Accessible UX</span></li>
</ul>
</div>
<div class="hero-visual-column">
<figure class="gw-border hero-figure"><img loading="lazy" alt="Dashboard UI preview on a laptop screen" src="https://app.grapesjs.com/api/assets/random-image?query=%22modern%20dashboard%20ui%20on%20laptop%20clean%20dark%20theme%22&w=900&h=600" class="hero-showcase-image" />
<figcaption class="hero-figcaption">
Recent project: analytics dashboard with real-time streaming.
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section id="about" class="about-section">
<div class="about-container">
<div class="about-header">
<h2 class="gw-h2 section-heading-about">About Me</h2><a href="./resume_goragod.pdf" class="gw-link about-resume-link"><span>Download Resume</span><img loading="lazy" alt="External link" src="https://api.iconify.design/lucide-external-link.svg" class="external-link-icon" /></a>
</div>
<div class="about-content-grid">
<div class="about-photo-wrapper">
<figure class="gw-border about-portrait-figure"><img loading="lazy" alt="Goragod Wiriya, Software Engineer, professional portrait" src="https://app.grapesjs.com/api/assets/random-image?query=%22professional%20portrait%20software%20engineer%22&w=600&h=760" class="about-portrait-image" />
<figcaption class="about-portrait-caption">
Goragod Wiriya — Software Engineer
</figcaption>
</figure>
</div>
<div class="about-text-wrapper">
<p class="about-intro-paragraph">
I specialize in building robust, user-centric applications using modern web technologies. With a background in product-focused teams, I bridge design and engineering to ship features that are fast, accessible, and maintainable.
</p>
<dl class="about-skills-definition-list">
<div>
<dt class="skill-group-title">Frontend</dt>
<dd class="skill-group-items"><span class="skill-chip">TypeScript</span><span class="skill-chip">React</span><span class="skill-chip">Tailwind CSS</span><span class="skill-chip">Accessibility</span></dd>
</div>
<div>
<dt class="skill-group-title">Backend</dt>
<dd class="skill-group-items"><span class="skill-chip">Node.js</span><span class="skill-chip">PostgreSQL</span><span class="skill-chip">Prisma</span><span class="skill-chip">REST & GraphQL</span></dd>
</div>
<div>
<dt class="skill-group-title">DevOps</dt>
<dd class="skill-group-items"><span class="skill-chip">Docker</span><span class="skill-chip">CI/CD</span><span class="skill-chip">Cloud</span><span class="skill-chip">Monitoring</span></dd>
</div>
<div>
<dt class="skill-group-title">Tools</dt>
<dd class="skill-group-items"><span class="skill-chip">Git</span><span class="skill-chip">Jest</span><span class="skill-chip">Playwright</span><span class="skill-chip">Figma</span></dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<section id="projects" class="projects-section">
<div class="projects-container">
<div class="projects-header">
<h2 class="gw-h2 section-heading-projects">Selected Projects</h2>
<div class="projects-filter-hint">Tech highlights</div>
</div>
<ul class="projects-grid">
<li class="project-card">
<article class="gw-border project-article">
<figure><img loading="lazy" alt="Realtime analytics dashboard screenshot" src="https://app.grapesjs.com/api/assets/random-image?query=%22realtime%20analytics%20dashboard%20dark%20ui%22&w=900&h=520" class="project-image" />
<figcaption class="project-media-caption">
Realtime Analytics Dashboard
</figcaption>
</figure>
<div class="project-content">
<h3 class="project-title">Realtime Analytics</h3>
<p class="project-description">
High-throughput dashboard streaming metrics with server-sent events and in-memory caching for sub-second updates.
</p>
<ul class="project-tech-list">
<li class="project-tech-item">TypeScript</li>
<li class="project-tech-item">Node.js</li>
<li class="project-tech-item">PostgreSQL</li>
</ul>
<div class="project-links"><a href="https://example.com/demo/analytics" target="_blank" rel="noopener" class="gw-link project-demo-link"><img loading="lazy" alt="Open demo" src="https://api.iconify.design/lucide-play-circle.svg" class="project-external-icon" /><span>Live Demo</span></a><a href="https://github.com/goragodwiriya/analytics" target="_blank" rel="noopener" class="gw-link project-repo-link"><img loading="lazy" alt="GitHub repository" src="https://api.iconify.design/lucide-github.svg" class="project-repo-icon" /><span>Code</span></a></div>
</div>
</article>
</li>
<li class="project-card">
<article class="gw-border project-article">
<figure><img loading="lazy" alt="E-commerce product page UI screenshot" src="https://app.grapesjs.com/api/assets/random-image?query=%22clean%20ecommerce%20product%20page%20ui%22&w=900&h=520" class="project-image" />
<figcaption class="project-media-caption">
Headless Commerce UI
</figcaption>
</figure>
<div class="project-content">
<h3 class="project-title">Headless Commerce</h3>
<p class="project-description">
Modular storefront powered by a headless backend, optimized for Core Web Vitals with granular caching.
</p>
<ul class="project-tech-list">
<li class="project-tech-item">React</li>
<li class="project-tech-item">Tailwind</li>
<li class="project-tech-item">GraphQL</li>
</ul>
<div class="project-links"><a href="https://example.com/demo/commerce" target="_blank" rel="noopener" class="gw-link project-demo-link"><img loading="lazy" alt="Open demo" src="https://api.iconify.design/lucide-play-circle.svg" class="project-external-icon" /><span>Live Demo</span></a><a href="https://github.com/goragodwiriya/commerce" target="_blank" rel="noopener" class="gw-link project-repo-link"><img loading="lazy" alt="GitHub repository" src="https://api.iconify.design/lucide-github.svg" class="project-repo-icon" /><span>Code</span></a></div>
</div>
</article>
</li>
<li class="project-card">
<article class="gw-border project-article">
<figure><img loading="lazy" alt="Mobile app interface visualization" src="https://app.grapesjs.com/api/assets/random-image?query=%22mobile%20app%20interface%20clean%20ui%22&w=900&h=520" class="project-image" />
<figcaption class="project-media-caption">
Cross-platform Mobile App
</figcaption>
</figure>
<div class="project-content">
<h3 class="project-title">Personal Finance App</h3>
<p class="project-description">
A budgeting app with offline-first sync, encryption-at-rest, and insightful visualizations.
</p>
<ul class="project-tech-list">
<li class="project-tech-item">React Native</li>
<li class="project-tech-item">SQLite</li>
<li class="project-tech-item">Expo</li>
</ul>
<div class="project-links"><a href="https://example.com/demo/finance" target="_blank" rel="noopener" class="gw-link project-demo-link"><img loading="lazy" alt="Open demo" src="https://api.iconify.design/lucide-play-circle.svg" class="project-external-icon" /><span>Live Demo</span></a><a href="https://github.com/goragodwiriya/finance-app" target="_blank" rel="noopener" class="gw-link project-repo-link"><img loading="lazy" alt="GitHub repository" src="https://api.iconify.design/lucide-github.svg" class="project-repo-icon" /><span>Code</span></a></div>
</div>
</article>
</li>
<li class="project-card">
<article class="gw-border project-article">
<figure><img loading="lazy" alt="SaaS settings page with modern clean UI" src="https://app.grapesjs.com/api/assets/random-image?query=%22saas%20app%20settings%20page%20clean%20ui%20dark%22&w=900&h=520" class="project-image" />
<figcaption class="project-media-caption">
Team Management SaaS
</figcaption>
</figure>
<div class="project-content">
<h3 class="project-title">TeamHub</h3>
<p class="project-description">
Multi-tenant SaaS for teams with role-based access, audit logs, and SSO integration.
</p>
<ul class="project-tech-list">
<li class="project-tech-item">Next.js</li>
<li class="project-tech-item">Prisma</li>
<li class="project-tech-item">PostgreSQL</li>
</ul>
<div class="project-links"><a href="https://example.com/demo/teamhub" target="_blank" rel="noopener" class="gw-link project-demo-link"><img loading="lazy" alt="Open demo" src="https://api.iconify.design/lucide-play-circle.svg" class="project-external-icon" /><span>Live Demo</span></a><a href="https://github.com/goragodwiriya/teamhub" target="_blank" rel="noopener" class="gw-link project-repo-link"><img loading="lazy" alt="GitHub repository" src="https://api.iconify.design/lucide-github.svg" class="project-repo-icon" /><span>Code</span></a></div>
</div>
</article>
</li>
</ul>
</div>
</section>
<section id="demo" class="demo-section">
<div class="demo-container">
<div class="demo-header">
<h2 class="gw-h2 section-heading-demo">Featured Demo</h2>
<div class="demo-context-text">Short walkthrough</div>
</div>
<div class="demo-grid">
<div class="demo-player-wrapper">
<div class="gw-border demo-player-frame"><iframe allowfullscreen="" src="https://www.youtube.com/embed/TlB_eWDSMt4?" title="Project demo video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" class="demo-iframe"></iframe></div>
</div>
<aside class="demo-details-aside">
<div class="gw-border demo-details-card">
<h3 class="demo-title">Realtime Analytics Walkthrough</h3>
<p class="demo-description">
This video covers the architecture, performance strategies, and deployment pipeline behind the realtime analytics project. It demonstrates streaming updates, optimistic UI, and a11y considerations.
</p>
<ul class="demo-highlights-list">
<li class="demo-highlight-item"><img loading="lazy" alt="Architecture icon" src="https://api.iconify.design/lucide-circuit-board.svg" class="demo-highlight-icon-1" /><span>Event-driven architecture</span></li>
<li class="demo-highlight-item"><img loading="lazy" alt="Speed icon" src="https://api.iconify.design/lucide-rocket.svg" class="demo-highlight-icon-2" /><span>Sub-second updates</span></li>
<li class="demo-highlight-item"><img loading="lazy" alt="Deploy icon" src="https://api.iconify.design/lucide-cloud-upload.svg" class="demo-highlight-icon-3" /><span>Automated CI/CD</span></li>
</ul>
<div class="demo-actions"><a href="https://example.com/demo/analytics" target="_blank" rel="noopener" class="gw-button demo-primary-link">Open Live Demo</a><a href="https://github.com/goragodwiriya/analytics" target="_blank" rel="noopener" class="demo-secondary-link">View Code</a></div>
</div>
</aside>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="contact-container">
<div class="contact-header">
<h2 class="gw-h2 section-heading-contact">Contact</h2>
<div class="contact-blurb">I usually respond within 24 hours</div>
</div>
<div class="contact-grid">
<div class="contact-form-wrapper">
<form method="get" class="gw-border contact-form">
<div class="form-field-name"><label for="name" class="field-label">Name</label><input type="text" id="name" name="name" required placeholder="Your full name" class="field-input" /></div>
<div class="form-field-email"><label for="email" class="field-label">Email</label><input type="email" id="email" name="email" required placeholder="you@example.com" class="field-input" /></div>
<div class="form-field-message"><label for="message" class="field-label">Message</label><textarea id="message" name="message" rows="6" required placeholder="How can I help?" class="field-textarea"></textarea></div>
<div class="form-actions">
<div class="contact-socials"><a href="mailto:admin@goragod.com" class="gw-link social-link-email"><img loading="lazy" alt="Email icon" src="https://api.iconify.design/lucide-mail.svg" class="social-icon-email" /><span>admin@goragod.com</span></a><a href="https://github.com/goragodwiriya" target="_blank" rel="noopener" class="gw-link social-link-github"><img loading="lazy" alt="GitHub icon" src="https://api.iconify.design/lucide-github.svg" class="social-icon-github" /><span>GitHub</span></a><a href="https://www.linkedin.com/in/goragodwiriya" target="_blank" rel="noopener" class="gw-link social-link-linkedin"><img loading="lazy" alt="LinkedIn icon" src="https://api.iconify.design/lucide-linkedin.svg" class="social-icon-linkedin" /><span>LinkedIn</span></a></div><button type="submit" class="gw-button form-submit-button">
Send Message
</button>
</div>
</form>
</div>
<div class="contact-aside">
<div class="gw-border contact-aside-card">
<h3 class="contact-aside-title">Let’s build something great</h3>
<p class="contact-aside-text">
Available for freelance, full-time roles, and collaboration. I enjoy partnering with product teams to design, build, and iterate quickly.
</p>
<ul class="contact-highlights-list">
<li class="contact-highlight-item"><img loading="lazy" alt="Check icon" src="https://api.iconify.design/lucide-check-circle-2.svg" class="contact-highlight-icon-1" /><span>Timezone-friendly collaboration</span></li>
<li class="contact-highlight-item"><img loading="lazy" alt="Check icon" src="https://api.iconify.design/lucide-check-circle-2.svg" class="contact-highlight-icon-2" /><span>Clear communication and documentation</span></li>
<li class="contact-highlight-item"><img loading="lazy" alt="Check icon" src="https://api.iconify.design/lucide-check-circle-2.svg" class="contact-highlight-icon-3" /><span>Strong focus on DX and maintainability</span></li>
</ul>
<div class="gw-border contact-aside-visual"><img loading="lazy" alt="Founder at desk using laptop in co-working space" src="https://app.grapesjs.com/api/assets/random-image?query=%22founder%20at%20desk%20using%20laptop%20in%20co-working%20space%22&w=800&h=400" class="contact-aside-image" /></div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-top">
<div class="footer-brand">
<div class="footer-brand-mark"><span class="footer-brand-initials">GW</span></div><span class="footer-brand-name">Goragod Wiriya</span>
</div>
<ul class="footer-nav">
<li><a href="#hero" class="gw-link footer-nav-link">Home</a></li>
<li><a href="#about" class="gw-link footer-nav-link">About</a></li>
<li><a href="#projects" class="gw-link footer-nav-link">Projects</a></li>
<li><a href="#demo" class="gw-link footer-nav-link">Demo</a></li>
<li><a href="#contact" class="gw-link footer-nav-link">Contact</a></li>
</ul>
</div>
<div class="footer-bottom"><small class="footer-copyright">
© <span>2025</span> Goragod Wiriya. All rights reserved.
</small>
<div class="footer-socials"><a href="mailto:admin@goragod.com" class="gw-link footer-social-link"><img loading="lazy" alt="Email" src="https://api.iconify.design/lucide-mail.svg" class="footer-social-icon" /></a><a href="https://github.com/goragodwiriya" target="_blank" rel="noopener" class="gw-link footer-social-link"><img loading="lazy" alt="GitHub" src="https://api.iconify.design/lucide-github.svg" class="footer-social-icon" /></a><a href="https://www.linkedin.com/in/goragodwiriya" target="_blank" rel="noopener" class="gw-link footer-social-link"><img loading="lazy" alt="LinkedIn" src="https://api.iconify.design/lucide-linkedin.svg" class="footer-social-icon" /></a></div>
</div>
</div>
</footer>
</body>
</html>