1fe4716728
This commit sets up the foundational structure for the m5rcel portfolio website. It includes: - Basic Vite project configuration with React and TypeScript. - Essential dependencies like React, Framer Motion, and Lucide React. - Initial HTML structure with meta tags and Tailwind CSS setup. - Placeholder data structures for projects and timeline. - A basic loading screen component. - Updated README with local run instructions.
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 & Designer</title>
|
|
<meta name="description" content="Portfolio of m5rcel. Designed in California." />
|
|
<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> |