d97bc589f0
Updates `framer-motion` and `lucide-react` to specific versions. Also refactors CDN imports in `index.html` to use `esm.sh` for React v18, aligning with the updated dependencies and ensuring correct module resolution.
113 lines
3.8 KiB
HTML
113 lines
3.8 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>
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
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://esm.sh/react@18.2.0",
|
|
"react-dom": "https://esm.sh/react-dom@18.2.0",
|
|
"react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
|
|
"react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime",
|
|
"framer-motion": "https://esm.sh/framer-motion@10.16.4?external=react,react-dom",
|
|
"lucide-react": "https://esm.sh/lucide-react@0.292.0?external=react,react-dom",
|
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/",
|
|
"react/": "https://aistudiocdn.com/react@^19.2.1/"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
</body>
|
|
</html> |