33674ba102
Adjust the page title and meta description to accurately reflect the current focus and design inspiration of the portfolio. The description now emphasizes the retro, 2009 Apple design, and the title is simplified to "Developer."
97 lines
3.0 KiB
HTML
97 lines
3.0 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." />
|
|
<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://aistudiocdn.com/react@^19.2.1",
|
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/",
|
|
"react/": "https://aistudiocdn.com/react@^19.2.1/",
|
|
"framer-motion": "https://aistudiocdn.com/framer-motion@^12.23.25",
|
|
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.556.0"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
</body>
|
|
</html> |