-
Notifications
You must be signed in to change notification settings - Fork 0
/
home-lcars.html
139 lines (129 loc) · 6.06 KB
/
home-lcars.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sam Sarette | Home (Sci-fi)</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=0.5, user-scalable=yes" />
<meta name="theme-color" content="black">
<meta property="og:title" content="Sam Portfolio (Sci-fi Variant)">
<meta property="og:description" content="Sci-fi Interface variant for Sam's showcase website.">
<meta property="og:image" content="https://lunarcloud.github.io/img/pages/home-lcars.webp" />
<link rel="manifest" href="./ssarette-portfolio.webmanifest">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="css/home-lcars.css">
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script src="//unpkg.com/@ungap/custom-elements/es.js"></script> <!-- Safari polyfill -->
</head>
<body>
<container id="main" class="page-fade">
<header>
<h1>Sam Sarette's Portfolio</h1>
</header>
<nav>
<ul>
<li>
<a is="fadeout-anchor" hover="audio" href="home-ala-homestar.html">
Flash-Like
</a>
</li>
<li>
<a is="fadeout-anchor" hover="audio" href="home-lcars.html">
Sci-fi
</a>
</li>
<li>
<a is="fadeout-anchor" hover="audio" href="home-console.html">
Big Picture
</a>
</li>
<li>
<a is="fadeout-anchor" hover="audio" href="index.html">
Standard
</a>
</li>
</ul>
</nav>
<footer>
</footer>
<main>
<ul>
<li>
<a is="fadeout-anchor" hover="audio" href="project-list-view.html">
Projects
</a>
</li>
<li>
<a is="fadeout-anchor" hover="audio" href="3d-showcase.html">
3-D Showcase
</a>
</li>
</ul>
<p>
<!-- linthtml-disable attr-name-style -->
<model-viewer id="mv-demo" src="gltf/shipwreck.glb"
alt="starship 3d model" loading="lazy"
auto-rotate auto-rotate-delay="0" interaction-prompt="none"
camera-controls orientation="15deg 90deg 45deg"
powerPreference="low-power" style="margin: 0 auto; min-width: 1px; height: 80mm"></model-viewer>
<!-- linthtml-enable attr-name-style -->
</p>
<p>
This website is a portfolio, an exploration of the work of Sam Sarette.
It will likely always be a work-in-progress, because Sam will never be done creating and changing.
Don't be intimidated by the amount of content here, this should be a fun corner of the web to explore.
</p>
<p>
The four buttons at the top-right corner are the different variations of this home screen.
The four buttons above the starship model (designed by Sam for a game jam project) will take you further into
the portfolio.
Each location within the portfolio will take you on a different kind of journey.
Hopefully, by the end, you will understand Sam and his capabilities, personality, dreams, and hopes.
</p>
<p>
If you get lost, you can always reach out to Sam on social media, email, etc.
You'll likely already have his contact information if you've gotten to this point.
</p>
</main>
<button id="mute-btn" title="Toggle Audio Mute">
<span class="off">🔊</span>
<span class="on">🔇</span>
</button>
<decoration class="page-fade">
<ul>
<li class="upper-left"><a>Portfolio</a></li>
<li class="upper-left curve-bottom-right">
<a>02-452345</a>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
<li class="curve-top-right">
<a>03-563456</a>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
<li><a>04-763457</a></li>
<li><a>05-176263</a></li>
<li><a>06-643268</a></li>
<li><a>07-012903</a></li>
<li><a>08-148234</a></li>
</ul>
</decoration>
</container>
<audio id="bg-audio" src="audio/bass-pitch-brownian-noise.mp3" preload loop></audio>
<audio id="beep-ok-audio" src="audio/423167__plasterbrain__minimalist-sci-fi-ui-ok.mp3" preload></audio>
<audio id="beep-cancel-audio" src="audio/423167__plasterbrain__minimalist-sci-fi-ui-cancel.mp3" preload></audio>
</body>
<script type="module" src="controllers/home-lcars.js"></script>
</html>