xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/morganwill.com.
morganwill.com
formattings
author
Morgan
date
(Nov 10, 2024, 3:50 AM +0100)
commit
49aa354c
49aa354ce92148511d6babe14589b80c20c62363
parent
6574f8c7
6574f8c766c926dbdb58d6eecdf4f111072777a6
+91
-68
+91
-68
src/routes/+page.svelte
+91
-68
src/routes/+page.svelte
···
1
1
<script>
2
-
import { onMount } from 'svelte';
3
-
import { fade } from 'svelte/transition';
2
+
import { onMount } from "svelte";
3
+
import { fade } from "svelte/transition";
4
4
5
-
import Projects from '$components/Projects.svelte';
5
+
import Projects from "$components/Projects.svelte";
6
6
7
-
import PhPanorama from 'virtual:icons/ph/panorama'
8
-
import IconoirInstagram from '~icons/iconoir/instagram'
9
-
import JamLinkedinCircle from '~icons/jam/linkedin-circle'
10
-
import IconoirGithubCircle from '~icons/iconoir/github-circle'
11
-
import IconoirTelegramCircle from '~icons/iconoir/telegram-circle'
12
-
import RiBlueskyLine from '~icons/ri/bluesky-line'
13
-
import Qr from '$components/Qr.svelte';
7
+
import PhPanorama from "virtual:icons/ph/panorama";
8
+
import IconoirInstagram from "~icons/iconoir/instagram";
9
+
import JamLinkedinCircle from "~icons/jam/linkedin-circle";
10
+
import IconoirGithubCircle from "~icons/iconoir/github-circle";
11
+
import IconoirTelegramCircle from "~icons/iconoir/telegram-circle";
12
+
import RiBlueskyLine from "~icons/ri/bluesky-line";
13
+
import Qr from "$components/Qr.svelte";
14
14
15
-
let hostname = $state('')
16
-
let links = $state([])
15
+
let hostname = $state("");
16
+
let links = $state([]);
17
17
18
18
let all_links = [
19
19
{
20
-
title: 'photos',
21
-
url: 'https://500px.com/p/morganw?view=licensing',
22
-
blurb: '500px photo portfolio',
20
+
title: "photos",
21
+
url: "https://500px.com/p/morganw?view=licensing",
22
+
blurb: "500px photo portfolio",
23
23
icon: PhPanorama,
24
24
},
25
25
{
26
-
title: 'instagram',
27
-
url: 'https://instagram.com/zenfo.co',
28
-
blurb: 'Instagram profile',
26
+
title: "instagram",
27
+
url: "https://instagram.com/zenfo.co",
28
+
blurb: "Instagram profile",
29
29
icon: IconoirInstagram,
30
30
},
31
31
{
32
-
title: 'LinkedIn',
33
-
url: 'https://linkedin.com/in/mrgnw',
34
-
blurb: 'LinkedIn profile',
32
+
title: "LinkedIn",
33
+
url: "https://linkedin.com/in/mrgnw",
34
+
blurb: "LinkedIn profile",
35
35
icon: JamLinkedinCircle,
36
-
iconRaw: '~icons/jam/linkedin-circle?raw&width=1em&height=1em'
36
+
iconRaw: "~icons/jam/linkedin-circle?raw&width=1em&height=1em",
37
37
},
38
38
{
39
-
title: 'github',
40
-
url: 'https://github.com/mrgnw',
41
-
blurb: 'GitHub profile',
39
+
title: "github",
40
+
url: "https://github.com/mrgnw",
41
+
blurb: "GitHub profile",
42
42
icon: IconoirGithubCircle,
43
43
},
44
44
{
45
-
title: 'bluesky',
46
-
url: 'https://bsky.app/profile/xcc.es',
47
-
blurb: 'Bluesky profile',
45
+
title: "bluesky",
46
+
url: "https://bsky.app/profile/xcc.es",
47
+
blurb: "Bluesky profile",
48
48
icon: RiBlueskyLine,
49
49
},
50
50
{
51
-
title: 'message',
52
-
url: 'https://t.me/mrgnw',
53
-
blurb: 'Message on Telegram',
51
+
title: "message",
52
+
url: "https://t.me/mrgnw",
53
+
blurb: "Message on Telegram",
54
54
icon: IconoirTelegramCircle,
55
55
},
56
-
]
56
+
];
57
57
58
58
onMount(() => {
59
59
hostname = window.location.hostname;
60
60
if (hostname === "morganwill.com") {
61
-
links = get_links(['LinkedIn', 'github', 'bluesky', 'message'])
62
-
}
63
-
else if (hostname === "zenfo.co") {
64
-
links = get_links(['photos', 'instagram', 'bluesky', 'message'])
65
-
}
66
-
else {
61
+
links = get_links(["LinkedIn", "github", "bluesky", "message"]);
62
+
} else if (hostname === "zenfo.co") {
63
+
links = get_links(["photos", "instagram", "bluesky", "message"]);
64
+
} else {
67
65
links = all_links;
68
66
}
69
67
});
···
71
69
let selected = $state("Morgan");
72
70
let qrMode = $state(false);
73
71
74
-
let selectedUrl = $derived(links.find(l => l.title === selected)?.url);
72
+
let selectedUrl = $derived(links.find((l) => l.title === selected)?.url);
75
73
76
74
/**
77
75
* @param {string[]} titles
78
76
*/
79
77
function get_links(titles) {
80
78
return titles.reduce((acc, title) => {
81
-
const link = all_links.find(link => link.title === title);
79
+
const link = all_links.find((link) => link.title === title);
82
80
if (link) acc.push(link);
83
81
return acc;
84
82
}, []);
85
83
}
86
-
87
84
</script>
88
85
89
86
<svelte:head>
90
87
<title>Morgan</title>
91
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
92
-
<meta name="description" content="Contact Morgan or view his other work on 500px, Instagram, LinkedIn, or Github" />
89
+
<meta
90
+
name="description"
91
+
content="Contact Morgan or view his other work on 500px, Instagram, LinkedIn, or Github"
92
+
/>
93
93
</svelte:head>
94
94
95
95
<div class="container">
96
-
97
-
<h1 class="title" ondblclick={()=> qrMode = !qrMode}>
98
-
{#if qrMode && selected !== 'Morgan'}
99
-
<Qr url={selectedUrl} size={128} key={selected} />
96
+
<h1 class="title" ondblclick={() => (qrMode = !qrMode)}>
97
+
{#if qrMode && selected !== "Morgan"}
98
+
<Qr url={selectedUrl} size={128} key={selected} />
100
99
{:else}
101
-
{selected}
100
+
{selected}
102
101
{/if}
103
102
</h1>
104
103
105
104
<div class="links">
106
105
{#each links as { url, icon, blurb, title }, index}
107
-
<a href={qrMode ? undefined : url} target="_blank" aria-label={blurb} class:active={title===selected}
108
-
class:flash-on={qrMode} class:flash-off={!qrMode} onmouseover={()=> { selected = title; }}
109
-
onfocus={() => { selected = title; }}
110
-
onmouseout={() => { if (!qrMode) selected = 'Morgan'; }}
111
-
onblur={() => { if (!qrMode) selected = 'Morgan'; }}
112
-
transition:fade={{ duration: 800, delay: 150 * index }}
106
+
<a
107
+
href={qrMode ? undefined : url}
108
+
target="_blank"
109
+
aria-label={blurb}
110
+
class:active={title === selected}
111
+
class:flash-on={qrMode}
112
+
class:flash-off={!qrMode}
113
+
onmouseover={() => {
114
+
selected = title;
115
+
}}
116
+
onfocus={() => {
117
+
selected = title;
118
+
}}
119
+
onmouseout={() => {
120
+
if (!qrMode) selected = "Morgan";
121
+
}}
122
+
onblur={() => {
123
+
if (!qrMode) selected = "Morgan";
124
+
}}
125
+
transition:fade={{ duration: 800, delay: 150 * index }}
113
126
>
114
-
{#if icon}
115
-
{@const Icon = icon}
116
-
<Icon style="color: {title === selected ? 'var(--highlight)' : 'var(--default)'}" width="4.5em" height="4.5em" />
117
-
{/if}
118
-
</a>
127
+
{#if icon}
128
+
{@const Icon = icon}
129
+
<Icon
130
+
style="color: {title === selected
131
+
? 'var(--highlight)'
132
+
: 'var(--default)'}"
133
+
width="4.5em"
134
+
height="4.5em"
135
+
/>
136
+
{/if}
137
+
</a>
119
138
{/each}
120
139
</div>
121
140
122
141
{#if qrMode && selectedUrl}
123
-
<div class="url-display" transition:fade={{ duration: 300 }}>
124
-
<a href={selectedUrl} target="_blank" class="text-sm text-muted-foreground hover:underline">
125
-
{selectedUrl}
126
-
</a>
127
-
</div>
142
+
<div class="url-display" transition:fade={{ duration: 300 }}>
143
+
<a
144
+
href={selectedUrl}
145
+
target="_blank"
146
+
class="text-sm text-muted-foreground hover:underline"
147
+
>
148
+
{selectedUrl}
149
+
</a>
150
+
</div>
128
151
{/if}
129
152
</div>
130
153
131
-
{#if hostname == 'morganwill.com'}
132
-
<div transition:fade={{ duration: 500 }}>
133
-
<Projects />
134
-
</div>
154
+
{#if hostname == "morganwill.com"}
155
+
<div transition:fade={{ duration: 500 }}>
156
+
<Projects />
157
+
</div>
135
158
{/if}
136
159
137
160
<style>
···
309
332
top: 1rem;
310
333
}
311
334
}
312
-
</style>
335
+
</style>