1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta name="author" content="Cristian Gabriel" /> 8 <meta name="theme-color" content="#FAF7F2" media="(prefers-color-scheme: light)" /> 9 <meta name="theme-color" content="#3A2E23" media="(prefers-color-scheme: dark)" /> 10 <title>Cristian Gabriel · Portfolio</title> 11 <meta name="description" content="Cristian Gabriel â full-stack developer based in Bucharest. Personal portfolio of projects, experiments, and side-quests." /> 12 <link rel="canonical" href="https://cristiangabriel.dev/" /> 13 14 <!-- RSS feed (rec 6.7): regenerated from site-content.js changelog by the build. --> 15 <link rel="alternate" type="application/rss+xml" title="Cristian Gabriel · Changelog" href="/feed.xml" /> 16 17 <meta property="og:type" content="website" /> 18 <meta property="og:site_name" content="Cristian Gabriel" /> 19 <meta property="og:locale" content="en_US" /> 20 <meta property="og:title" content="Cristian Gabriel · Portfolio" /> 21 <meta property="og:description" content="Full-stack developer based in Bucharest. Projects, experiments, and side-quests." /> 22 <meta property="og:url" content="https://cristiangabriel.dev/" /> 23 <meta property="og:image" content="https://cristiangabriel.dev/resources/images/og-card.png" /> 24 <meta property="og:image:secure_url" content="https://cristiangabriel.dev/resources/images/og-card.png" /> 25 <meta property="og:image:type" content="image/png" /> 26 <meta property="og:image:width" content="1200" /> 27 <meta property="og:image:height" content="630" /> 28 <meta property="og:image:alt" content="Cristian Gabriel â Full-stack developer based in Bucharest" /> 29 30 <meta name="twitter:card" content="summary_large_image" /> 31 <meta name="twitter:title" content="Cristian Gabriel · Portfolio" /> 32 <meta name="twitter:description" content="Full-stack developer based in Bucharest." /> 33 <meta name="twitter:image" content="https://cristiangabriel.dev/resources/images/og-card.png" /> 34 <meta name="twitter:image:alt" content="Cristian Gabriel â Full-stack developer based in Bucharest" /> 35 36 <!-- Structured data: tells search engines this site is a Person (rec 3.4). --> 37
37<script type="application/ld+json"> 38 { 39 "@context": "https://schema.org", 40 "@type": "Person", 41 "name": "Cristian Gabriel", 42 "url": "https://cristiangabriel.dev/", 43 "image": "https://cristiangabriel.dev/resources/images/og-card.png", 44 "jobTitle": "Full-stack developer", 45 "email": "mailto:[email protected]", 46 "address": { 47 "@type": "PostalAddress", 48 "addressLocality": "Bucharest", 49 "addressCountry": "RO" 50 }, 51 "sameAs": [ 52 "https://github.com/cristiangabriel88", 53 "https://www.linkedin.com/in/cristian-gabriel-constantinescu-781a6b237", 54 "https://stackoverflow.com/users/18754276/cristiangabriel" 55 ] 56 } 57 </script>
57 58 59 <!-- Self-hosted fonts (latin + latin-ext) â no Google CDN connection, matching 60 the self-hosted React above. Preload the two faces used above the fold. --> 61 <link rel="preload" href="vendor/fonts/fraunces-normal-300-600-latin.woff2" as="font" type="font/woff2" crossorigin /> 62 <link rel="preload" href="vendor/fonts/inter-normal-300-latin.woff2" as="font" type="font/woff2" crossorigin /> 63 <link rel="stylesheet" href="vendor/fonts/fonts.css?v=49b3382d" /> 64 65 <link rel="icon" type="image/svg+xml" href="favicon.svg" /> 66 <link rel="stylesheet" href="styles.css?v=aa052383" /> 67 <link rel="stylesheet" href="theme-dark.css?v=41bc5dcd" /> 68 69 <!-- Preload the current-page botanical hero; prefetch the other two pages' heroes 70 so the per-page swap is warm (rec 3.3). Project thumbnails are below the fold 71 on the hidden Projects tab and lazy-load on demand instead of prefetching. --> 72 <link rel="preload" as="image" href="resources/images/home.webp" fetchpriority="high" /> 73 <link rel="prefetch" as="image" href="resources/images/about.webp" /> 74 <link rel="prefetch" as="image" href="resources/images/contact2.webp" /> 75 76 <!-- React self-hosted (rec 3.2): byte-identical to [email protected] UMD, no CDN dependency. --> 77
77<script src="vendor/react.production.min.js?v=d949f1c3"></script>
77 78
78<script src="vendor/react-dom.production.min.js?v=35f4f974"></script>
78 79</head> 80 81<body> 82 <div id="root"></div> 83 84 <!-- Crawlable / no-JS fallback. The portfolio is rendered client-side by 85 app.js; this gives search engines and JS-less bots real content, and 86 keeps the page useful if the scripts fail to load. --> 87 <noscript> 88 <main style="max-width: 720px; margin: 0 auto; padding: 48px 24px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1A1A1A; background: #FAF7F2; line-height: 1.6;"> 89 <h1 style="font-family: 'Fraunces', Georgia, serif; font-size: 2rem; color: #2D5016; margin-bottom: 8px;">Cristian Gabriel</h1> 90 <p style="color: #4A4A4A; margin-bottom: 24px;"> 91 Full-stack developer based in Bucharest, building server-side 92 applications and personal side-quests outside of client work. 93 </p> 94 <h2 style="font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; color: #2D5016; margin-bottom: 12px;">Selected projects</h2> 95 <ul style="padding-left: 18px;"> 96 <li><a href='/tapedeck/tapedeck' style='color: #2D5016;'>tapedeck.local</a> â a local-first web audio extractor (MP3, M4A, Opus, WAV, FLAC), all on your machine.</li> 97 <li><a href='/quickpaste/quickpaste' style='color: #2D5016;'>QuickPaste</a> â a Chrome extension that saves text clips from any website into a tidy collection.</li> 98 <li><a href="https://impostorgame.top/" style="color: #2D5016;">Impostor</a> â a mobile-first social game about spotting the hidden impostor.</li> 99 <li><a href="https://github.com/cristiangabriel88/loopretto#readme" style="color: #2D5016;">Loopretto</a> â a transcription tool for musicians: loop, slow down, find your notes.</li> 100 <li><a href="https://cristiangabriel88.github.io/furniture-boutique/" style="color: #2D5016;">Furniture Boutique</a> â a landing page for a fictional woodshop, in static HTML.</li> 101 </ul> 102 <p style="margin-top: 24px;"> 103 Find me on 104 <a href="https://github.com/cristiangabriel88" style="color: #2D5016;">GitHub</a>, 105 <a href="https://www.linkedin.com/in/cristian-gabriel-constantinescu-781a6b237" style="color: #2D5016;">LinkedIn</a>, and 106 <a href="https://stackoverflow.com/users/18754276/cristiangabriel" style="color: #2D5016;">Stack Overflow</a>. 107 </p> 108 <p style="margin-top: 16px; color: #8A847A; font-size: 0.9rem;">This page is interactive â enable JavaScript for the full experience.</p> 109 </main> 110 </noscript> 111 112
112<script src="site-content.js?v=ad4f1246"></script>
112 113
113<script src="sound.js?v=be5e306a"></script>
113 114
114<script src="pixel-art.js?v=ab25daa2"></script>
114 115
115<script src="chrome.js?v=f66801fc"></script>
115 116
116<script src="pages.js?v=f19a60f0"></script>
116 117
117<script src="easter-eggs.js?v=f9b641b7"></script>
117 118
118<script src="tweaks-panel.compiled.js?v=a56f1d04"></script>
118 119
119<script src="app.js?v=e5e74b45"></script>
119 120 121 <!-- Privacy-friendly analytics (rec 6.8): GoatCounter, no cookies, no consent 122 banner needed. Dashboard: https://cristiangabriel.goatcounter.com/ --> 123
123<script data-goatcounter="https://cristiangabriel.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
vendor: 1 bytes, line 123
123
124<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"2acc8e9d290340e98d5f62d464ebdbdf","r":1,"spa":2}' crossorigin="anonymous"></script>
124 125</body> 126 127</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.