Skip to content

Instantly share code, notes, and snippets.

@vinhnx

vinhnx/enhanced_personal_site.html

Last active March 25, 2025 03:55
Show Gist options
  • Save vinhnx/9d76b791876c8263c3f62a9512bdc2c7 to your computer and use it in GitHub Desktop.
Save vinhnx/9d76b791876c8263c3f62a9512bdc2c7 to your computer and use it in GitHub Desktop.
Download ZIP
Enhanced personal site, recreated by DeepSeek V3 0324. Enhanced by Sonnet 3.7 Thinking
Raw
enhanced_personal_site.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vinh Nguyen | iOS Engineer</title>
<!-- SEO & sharing meta tags -->
<meta name="description"
content="iOS Engineer with 10+ years of experience building consumer apps and integrating AI/ML technologies">
<meta name="keywords" content="iOS, Swift, SwiftUI, AI, ML, Mobile Developer">
<meta name="author" content="Vinh Nguyen">
<!-- Open Graph / Social Media -->
<meta property="og:title" content="Vinh Nguyen | iOS Engineer">
<meta property="og:description"
content="Passionate iOS engineer specializing in Swift, SwiftUI, and AI integration">
<meta property="og:type" content="website">
<meta property="og:url" content="https://vinhnx.github.io/">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%233b82f6'/%3E%3Ctext x='50' y='65' font-family='Arial' font-weight='bold' font-size='50' text-anchor='middle' fill='white'%3EVN%3C/text%3E%3C/svg%3E">
<link rel="apple-touch-icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%233b82f6'/%3E%3Ctext x='50' y='65' font-family='Arial' font-weight='bold' font-size='50' text-anchor='middle' fill='white'%3EVN%3C/text%3E%3C/svg%3E">
<!-- Preload critical fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
/* Core colors */
--primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #3b82f6;
--primary-50: #eff6ff;
/* Text colors */
--text: #1e293b;
--text-light: #64748b;
--text-lighter: #94a3b8;
/* Background colors */
--bg: #ffffff;
--surface: #f8fafc;
--surface-hover: #f1f5f9;
--border: #e2e8f0;
/* Accent colors */
--success: #10b981;
--success-light: #d1fae5;
--accent: #8b5cf6;
--accent-light: #ede9fe;
--warning: #f59e0b;
--error: #ef4444;
/* Gradients */
--gradient-start: #6366f1;
--gradient-end: #8b5cf6;
/* UI */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
/* Animation */
--transition-fast: 0.2s;
--transition-normal: 0.3s;
--transition-slow: 0.5s;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
:root {
--primary: #3b82f6;
--primary-dark: #2563eb;
--primary-light: #60a5fa;
--primary-50: #1e3a8a;
--text: #f1f5f9;
--text-light: #94a3b8;
--text-lighter: #64748b;
--bg: #0f172a;
--surface: #1e293b;
--surface-hover: #334155;
--border: #334155;
--success-light: #064e3b;
--accent-light: #2e1065;
/* Adjust shadows for dark mode */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes gradientFlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Reset & Base Styles */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 2rem;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: var(--text);
background-color: var(--bg);
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Accessibility focus styles */
:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Container */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: clamp(1rem, 5vw, 2rem);
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.2;
}
h1 {
font-size: clamp(2rem, 5vw, 2.5rem);
font-weight: 800;
margin: 0.5rem 0;
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: fadeIn 0.8s var(--ease);
}
h2 {
font-size: clamp(1.5rem, 4vw, 1.75rem);
font-weight: 700;
margin: 2rem 0 1rem;
position: relative;
display: inline-block;
}
h2::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
border-radius: 3px;
}
p {
margin-bottom: 1rem;
}
a {
color: var(--primary);
text-decoration: none;
transition: color var(--transition-fast) var(--ease);
font-weight: 500;
}
a:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Header */
header {
text-align: center;
margin-bottom: 3rem;
position: relative;
padding-top: 4rem;
animation: fadeIn 0.6s var(--ease);
}
.avatar-container {
width: 120px;
height: 120px;
margin: 0 auto 1.5rem;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
padding: 4px;
animation: pulse 6s infinite ease-in-out;
}
.avatar {
width: 100%;
height: 100%;
border-radius: var(--radius-full);
background-color: var(--surface);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.avatar-initials {
font-size: 3rem;
font-weight: 700;
color: var(--primary);
}
.tagline {
font-size: 1.25rem;
color: var(--text-light);
margin-bottom: 1.5rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.social-link {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background-color: var(--surface);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--transition-normal) var(--ease),
box-shadow var(--transition-normal) var(--ease),
background-color var(--transition-fast) var(--ease);
box-shadow: var(--shadow-sm);
}
.social-link:hover,
.social-link:focus {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
background-color: var(--surface-hover);
}
.social-link svg {
width: 20px;
height: 20px;
fill: var(--primary);
transition: fill var(--transition-fast) var(--ease);
}
.social-link:hover svg {
fill: var(--primary-dark);
}
/* Sections */
section {
animation: fadeIn 0.8s var(--ease);
animation-fill-mode: both;
}
section:nth-child(2) {
animation-delay: 0.1s;
}
section:nth-child(3) {
animation-delay: 0.2s;
}
section:nth-child(4) {
animation-delay: 0.3s;
}
.section {
background-color: var(--surface);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 5vw, 2rem);
margin-bottom: 2rem;
box-shadow: var(--shadow-md);
transition: transform var(--transition-normal) var(--ease),
box-shadow var(--transition-normal) var(--ease);
border: 1px solid var(--border);
}
.section:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.highlight-card {
border-left: 4px solid var(--primary);
padding-left: 1rem;
margin: 1.5rem 0;
background-color: var(--primary-50);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: 1rem 1rem 1rem 1.5rem;
}
.highlight-card h3 {
margin-top: 0;
color: var(--primary);
}
/* App Cards */
.app-card {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
align-items: flex-start;
transition: transform var(--transition-normal) var(--ease);
}
.app-card:hover {
transform: translateX(5px);
}
.app-icon {
width: 60px;
height: 60px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
animation: float 4s infinite ease-in-out;
box-shadow: var(--shadow-md);
}
.app-icon svg {
width: 30px;
height: 30px;
fill: white;
}
.app-info {
flex: 1;
}
.app-title {
font-weight: 700;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.app-badge {
background-color: var(--primary);
color: white;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
font-weight: 500;
}
.app-badge.featured {
background-color: var(--accent);
}
.app-badge.opensource {
background-color: var(--success);
}
/* Tech Pills */
.tech-pill {
display: inline-block;
background-color: var(--bg);
color: var(--text);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.85rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
border: 1px solid var(--border);
transition: background-color var(--transition-fast) var(--ease),
transform var(--transition-fast) var(--ease);
}
.tech-pill:hover {
background-color: var(--surface-hover);
transform: translateY(-2px);
}
.pills-container {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Grid Layout */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.grid-item {
background-color: var(--surface);
border-radius: var(--radius-md);
padding: 1.5rem;
transition: transform var(--transition-normal) var(--ease),
box-shadow var(--transition-normal) var(--ease);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
height: 100%;
display: flex;
flex-direction: column;
}
.grid-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.grid-item h3 {
margin-top: 0;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--primary);
}
.grid-item svg {
width: 20px;
height: 20px;
fill: var(--primary);
}
.grid-item p {
flex: 1;
}
.grid-item a {
display: inline-block;
margin-top: 0.5rem;
font-weight: 600;
}
/* Floating Shapes */
.floating-shapes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
overflow: hidden;
}
.shape {
position: absolute;
opacity: 0.08;
border-radius: 50%;
filter: blur(30px);
}
.shape-1 {
width: 300px;
height: 300px;
background: var(--gradient-start);
top: 20%;
left: 10%;
animation: float 8s infinite ease-in-out;
}
.shape-2 {
width: 200px;
height: 200px;
background: var(--gradient-end);
top: 60%;
right: 15%;
animation: float 10s infinite ease-in-out reverse;
}
.shape-3 {
width: 150px;
height: 150px;
background: var(--accent);
bottom: 10%;
left: 20%;
animation: float 12s infinite ease-in-out;
}
/* Footer */
footer {
text-align: center;
padding: 2rem;
margin-top: auto;
color: var(--text-light);
font-size: 0.9rem;
border-top: 1px solid var(--border);
background-color: var(--surface);
}
footer p:last-child {
margin-bottom: 0;
}
/* Skip to content link for accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--primary);
color: white;
padding: 8px;
z-index: 100;
transition: top 0.3s;
}
.skip-link:focus {
top: 0;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--surface);
}
::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
/* Responsive styles */
@media (max-width: 768px) {
.container {
padding: 1rem;
}
.app-card {
flex-direction: column;
}
.app-icon {
margin-bottom: 1rem;
}
.social-links {
flex-wrap: wrap;
}
}
/* Print styles */
@media print {
.floating-shapes {
display: none;
}
.section {
box-shadow: none;
page-break-inside: avoid;
}
.app-card {
page-break-inside: avoid;
}
body {
color: black;
background: white;
}
.app-icon {
animation: none;
}
}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<div class="floating-shapes" aria-hidden="true">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
</div>
<div class="container">
<header>
<div class="avatar-container">
<div class="avatar">
<div class="avatar-initials" aria-hidden="true">VN</div>
</div>
</div>
<h1>Vinh Nguyen</h1>
<p class="tagline">Senior iOS Engineer</p>
<div class="social-links">
<a href="https://github.com/vinhnx" class="social-link" aria-label="GitHub Profile">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
<a href="https://www.linkedin.com/in/vinhnx" class="social-link" aria-label="LinkedIn Profile">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
</svg>
</a>
<a href="https://twitter.com/vinhnx" class="social-link" aria-label="Twitter Profile">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
</svg>
</a>
</div>
</header>
<main id="main-content">
<section class="section">
<h2>🌟 Professional Profile</h2>
<p>A passionate iOS engineer and technical researcher with 10+ years of experience building
consumer-focused applications with a focus on performance, usability, and AI integration.</p>
<div class="highlight-card">
<h3>Specializations</h3>
<ul>
<li><strong>Native iOS Development</strong>: Swift/Objective-C expert with deep UIKit/SwiftUI
mastery</li>
<li><strong>AI Integration</strong>: Implementing LLMs, Applied AI and NLP in mobile
environments</li>
<li><strong>Open Source</strong>: Maintainer of 15+ open-source projects with 2M+ collective
downloads</li>
</ul>
<div class="pills-container">
<span class="tech-pill">Swift</span>
<span class="tech-pill">SwiftUI</span>
<span class="tech-pill">LLMs</span>
<span class="tech-pill">Core ML</span>
<span class="tech-pill">UIKit</span>
<span class="tech-pill">Combine</span>
<span class="tech-pill">AI/ML</span>
<span class="tech-pill">Objective-C</span>
</div>
</div>
</section>
<section class="section">
<h2>🚀 Career Highlights</h2>
<h3>🔍 Core Contributions</h3>
<div class="highlight-card">
<p><strong>AI/ML Implementation</strong></p>
<div class="app-card">
<div class="app-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
</svg>
</div>
<div class="app-info">
<div class="app-title">
<a href="https://github.com/vinhnx/VT.ai">VT.ai</a>
<span class="app-badge opensource">Open Source</span>
</div>
<p>Multimodal LLM framework pushing mobile AI boundaries with optimized performance for iOS
devices. Supports on-device inference and vision-based context analysis.</p>
<div class="pills-container">
<span class="tech-pill">Core ML</span>
<span class="tech-pill">Vision</span>
<span class="tech-pill">Natural Language</span>
</div>
</div>
</div>
<div class="app-card">
<div class="app-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zm1-11h-2v3H8v2h3v3h2v-3h3v-2h-3V8z" />
</svg>
</div>
<div class="app-info">
<div class="app-title">
<a href="https://github.com/ollama/ollama">Ollama</a>
<span class="app-badge">Contribution</span>
</div>
<p>Contributed to the LLM tooling ecosystem, enhancing local AI model deployment
capabilities and integration with iOS applications via REST APIs.</p>
<div class="pills-container">
<span class="tech-pill">Go</span>
<span class="tech-pill">LLMs</span>
<span class="tech-pill">API</span>
</div>
</div>
</div>
</div>
<h3>📱 Signature Apps</h3>
<div class="app-card">
<div class="app-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zM5 7V5h14v2H5zm5.56 10.46l5.93-5.93-1.06-1.06-4.87 4.87-2.11-2.11-1.06 1.06z" />
</svg>
</div>
<div class="app-info">
<div class="app-title">
<a href="https://apps.apple.com/us/app/clendar-a-calendar-app/id1548102041">Clendar</a>
<span class="app-badge featured">Featured</span>
</div>
<p>Modern SwiftUI calendar with 500k+ downloads, featuring Siri Shortcuts, WidgetKit, and
cross-platform sync. Featured on the App Store and has a 4.7-star rating.</p>
<div class="pills-container">
<span class="tech-pill">SwiftUI</span>
<span class="tech-pill">WidgetKit</span>
<span class="tech-pill">Siri Shortcuts</span>
<span class="tech-pill">CloudKit</span>
</div>
</div>
</div>
<div class="app-card">
<div class="app-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.5 4l1.16 4.35-.96.26c-.45-.87-.91-1.74-1.44-2.18C16.73 6 16.11 6 15.5 6H13v10.5c0 .5 0 1 .33 1.25.34.25 1 .25 1.67.25v1H9v-1c.67 0 1.33 0 1.67-.25.33-.25.33-.75.33-1.25V6H8.5c-.61 0-1.23 0-1.76.43-.53.44-.99 1.31-1.44 2.18l-.96-.26L5.5 4h13z" />
</svg>
</div>
<div class="app-info">
<div class="app-title">
<a href="http://vinhnx.github.io/writedown-site/">WriteDown</a>
<span class="app-badge">Published</span>
</div>
<p>Markdown editor with real-time cloud sync built with Swift and Core Data, featuring seamless
iCloud integration and document versioning.</p>
<div class="pills-container">
<span class="tech-pill">Swift</span>
<span class="tech-pill">Core Data</span>
<span class="tech-pill">Markdown</span>
<span class="tech-pill">iCloud</span>
</div>
</div>
</div>
<div class="app-card">
<div class="app-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42z" />
</svg>
</div>
<div class="app-info">
<div class="app-title">
<a href="http://vinhnx.github.io/humid-site/">Humid</a>
<span class="app-badge">Published</span>
</div>
<p>Voice-first weather app using Combine framework with elegant animations and real-time weather
updates. Integrates with Apple's Weather Kit for accurate forecasts.</p>
<div class="pills-container">
<span class="tech-pill">Combine</span>
<span class="tech-pill">Voice UI</span>
<span class="tech-pill">Animations</span>
<span class="tech-pill">Weather Kit</span>
</div>
</div>
</div>
</section>
<section class="section">
<h2>🌐 Community Footprint</h2>
<div class="grid">
<div class="grid-item">
<h3>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z" />
</svg>
GitHub
</h3>
<p>50+ repositories with 1.2k+ stars. Active open-source contributor and maintainer of Swift
libraries and tools.</p>
<a href="https://github.com/vinhnx" aria-label="Visit GitHub profile">Explore →</a>
</div>
<div class="grid-item">
<h3>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z" />
</svg>
LinkedIn
</h3>
<p>Professional network showcasing career achievements and technical expertise in iOS and AI
development.</p>
<a href="https://www.linkedin.com/in/vinhnx" aria-label="Connect on LinkedIn">Connect →</a>
</div>
<div class="grid-item">
<h3>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" />
</svg>
Hacker News
</h3>
<p>Regular contributor to tech discussions and AI-related topics. Sharing insights on mobile
development and LLMs.</p>
<a href="https://news.ycombinator.com/user?id=vinhnx" aria-label="View Hacker News profile">View
profile →</a>
</div>
<div class="grid-item">
<h3>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.167 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
</svg>
Hugging Face
</h3>
<p>AI experiments and model sharing platform for machine learning. Publishing iOS-compatible
models and techniques.</p>
<a href="https://huggingface.co/vinhnx90" aria-label="See AI models">See models →</a>
</div>
</div>
</section>
</main>
<footer>
<p>© 2025 Vinh Nguyen | "Learn by doing."</p>
<p>This site is built with modern HTML and CSS | Last updated: March 2025</p>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment