cc3b55b010
Adds comprehensive security headers via Vercel configuration to protect against common web vulnerabilities. Improves text rendering consistency across browsers with `text-size-adjust` and font smoothing properties.
118 lines
3.9 KiB
HTML
118 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<title>m5rcel - Developer</title>
|
|
<meta name="description" content="Personal portfolio of m5rcel. Built for performance." />
|
|
<!-- Apple Favicon -->
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22></text></svg>">
|
|
|
|
<script>
|
|
// Suppress Tailwind CDN production warning for a cleaner console
|
|
(function() {
|
|
const originalWarn = console.warn;
|
|
console.warn = function(...args) {
|
|
if (args[0] && typeof args[0] === 'string' && args[0].includes('cdn.tailwindcss.com')) return;
|
|
originalWarn.apply(console, args);
|
|
};
|
|
})();
|
|
</script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: [
|
|
'"Lucida Grande"',
|
|
'"Lucida Sans Unicode"',
|
|
'"Helvetica Neue"',
|
|
'Helvetica',
|
|
'Arial',
|
|
'sans-serif',
|
|
],
|
|
display: [
|
|
'"Myriad Pro"',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'sans-serif',
|
|
]
|
|
},
|
|
colors: {
|
|
retro: {
|
|
navTop: '#4e4e4e',
|
|
navBot: '#383838',
|
|
blueTop: '#71b1f8',
|
|
blueBot: '#0083e6',
|
|
bg: '#f2f2f2',
|
|
text: '#333333',
|
|
textLight: '#666666',
|
|
border: '#d6d6d6',
|
|
},
|
|
},
|
|
boxShadow: {
|
|
'retro': '0 1px 4px rgba(0,0,0,0.3)',
|
|
'retro-inset': 'inset 0 1px 3px rgba(0,0,0,0.2)',
|
|
'gloss': 'inset 0 1px 0 rgba(255,255,255,0.4)',
|
|
},
|
|
backgroundImage: {
|
|
'glossy-nav': 'linear-gradient(to bottom, #5e5e5e 0%, #404040 50%, #353535 51%, #383838 100%)',
|
|
'glossy-blue': 'linear-gradient(to bottom, #7cbdfe 0%, #2f8bfd 50%, #0672e7 51%, #167efb 100%)',
|
|
'glossy-silver': 'linear-gradient(to bottom, #f2f2f2 0%, #e6e6e6 50%, #d9d9d9 51%, #e6e6e6 100%)',
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
html {
|
|
text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
background-color: #f2f2f2;
|
|
color: #333;
|
|
}
|
|
|
|
/* The iconic wet floor reflection */
|
|
.reflection {
|
|
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.4)));
|
|
}
|
|
|
|
/* 2009 Search Bar Inset Shadow */
|
|
.search-inset {
|
|
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2);
|
|
}
|
|
|
|
/* Text Emboss */
|
|
.text-emboss {
|
|
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.text-shadow-nav {
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,0.6);
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"react": "https://aistudiocdn.com/react@^19.2.1",
|
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/",
|
|
"react/": "https://aistudiocdn.com/react@^19.2.1/",
|
|
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.556.0",
|
|
"framer-motion": "https://aistudiocdn.com/framer-motion@^12.23.25",
|
|
"vite": "https://aistudiocdn.com/vite@^7.2.7",
|
|
"@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.2"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/index.tsx"></script>
|
|
</body>
|
|
</html> |