danielmorrisey.com
madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madeydanny.uk
html
css
javascript
1 :root{
2 --bg: #0a0a0f;
3 --card: #1a1a24;
4 --card-secondary: #13131d;
5 --text-primary: #e8e8f0;
6 --text-muted: #9494a8;
7 --accent: #6366f1;
8 --accent-hover: #818cf8;
9 --glass: rgba(99, 102, 241, 0.05);
10 --border: rgba(99, 102, 241, 0.15);
11 --radius: 16px;
12 --maxw: 420px;
13 }
14
15 html,body{height:100%;margin:0}
16 body{
17 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
18 display:flex;
19 align-items:center;
20 justify-content:center;
21 padding:24px;
22 background: radial-gradient(ellipse at top, #1a1a2e 0%, var(--bg) 50%);
23 color: var(--text-primary);
24 line-height: 1.6;
25 }
26
27 .card{
28 width:100%;
29 max-width:var(--maxw);
30 background: var(--card);
31 border: 1px solid var(--border);
32 border-radius:var(--radius);
33 padding:32px 28px;
34 box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 1px rgba(99, 102, 241, 0.3);
35 text-align:center;
36 transition: transform 0.2s ease, box-shadow 0.2s ease;
37 }
38 .card:hover{
39 transform:translateY(-2px);
40 box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 2px rgba(99, 102, 241, 0.5);
41 }
42
43 .profile{
44 display:flex;
45 gap:16px;
46 align-items:center;
47 justify-content:center;
48 flex-direction:column;
49 margin-bottom: 24px;
50 }
51 .avatar{
52 width:96px;
53 height:96px;
54 border-radius:50%;
55 object-fit:cover;
56 border:3px solid var(--accent);
57 background: var(--card-secondary);
58 box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
59 }
60 .name{
61 margin:4px 0 0;
62 font-size:1.35rem;
63 font-weight:700;
64 letter-spacing: -0.02em;
65 }
66 .tagline{
67 margin:6px 0 0;
68 color:var(--text-muted);
69 font-size:0.95rem;
70 line-height: 1.5;
71 }
72
73 .links{
74 margin-top:20px;
75 display:grid;
76 grid-template-columns:repeat(2,1fr);
77 gap:12px;
78 }
79 .link{
80 display:flex;
81 gap:12px;
82 align-items:center;
83 padding:14px 12px;
84 border-radius:12px;
85 text-decoration:none;
86 background: var(--glass);
87 border: 1px solid var(--border);
88 color: var(--text-primary);
89 transition: all 0.2s ease;
90 }
91 .link img{
92 width:32px;
93 height:32px;
94 border-radius:8px;
95 flex:0 0 32px;
96 }
97 .link .label{
98 font-weight:600;
99 font-size:0.95rem;
100 text-align: left;
101 }
102 .link:hover{
103 transform:translateY(-2px);
104 background: rgba(255, 255, 255, 0.08);
105 border-color: var(--accent);
106 }
107
108 /* Brand hover colors */
109 .link.bsky:hover{color:#1083fd;border-color:#1083fd;box-shadow:0 4px 16px rgba(16,131,253,0.3)}
110 .link.deer:hover{color:#749f7a;border-color:#749f7a;box-shadow:0 4px 16px rgba(116,159,122,0.3)}
111 .link.catsky:hover{color:#cca6f7;border-color:#cca6f7;box-shadow:0 4px 16px rgba(204,166,247,0.3)}
112 .link.blacksky:hover{color:#ffffff;border-color:#ffffff;box-shadow:0 4px 16px rgba(255,255,255,0.3)}
113 .link.anisota:hover{color:#c28431;border-color:#c28431;box-shadow:0 4px 16px rgba(194,132,49,0.3)}
114 .link.tangled:hover{color:#ffffff;border-color:#ffffff;box-shadow:0 4px 16px rgba(255,255,255,0.3)}
115 .link.nooki:hover{color:#FDC417;border-color:#FDC417;box-shadow:0 4px 16px rgba(253,196,23,0.3)}
116 .link.splace:hover{color:#f8baca;border-color:#f8baca;box-shadow:0 4px 16px rgba(248,186,202,0.3)}
117 .link.bitch:hover{color:#9b7ba0;border-color:#9b7ba0;box-shadow:0 4px 16px rgba(155,123,160,0.3)}
118 .link.redd:hover{color:#ff4242;border-color:#ff4242;box-shadow:0 4px 16px rgba(255,66,66,0.3)}
119 .link.semble:hover{color: orange; border-color:orange;box-shadow:0 4px 16px rgba(255, 111, 0, 0.3)}
120
121 #more-clients{
122 display: none;
123 }
124 #more-clients.show{
125 display: grid;
126 }
127
128 .show-more-btn{
129 margin-top: 12px;
130 padding: 12px 20px;
131 background: var(--glass);
132 border: 1px solid var(--border);
133 border-radius: 10px;
134 color: var(--accent-hover);
135 font-weight: 600;
136 cursor: pointer;
137 transition: all 0.2s ease;
138 font-size: 0.9rem;
139 }
140 .show-more-btn:hover{
141 background: rgba(99, 102, 241, 0.1);
142 border-color: var(--accent);
143 transform: translateY(-1px);
144 }
145
146 .controls{
147 margin-top:24px;
148 display:flex;
149 flex-direction:column;
150 gap:10px;
151 padding-top: 24px;
152 border-top: 1px solid var(--border);
153 }
154 .control-row{
155 display:flex;
156 gap:10px;
157 align-items:center;
158 }
159 .control-row input{
160 flex:1;
161 padding:12px 14px;
162 border-radius:10px;
163 border:1px solid var(--border);
164 background: var(--card-secondary);
165 color: var(--text-primary);
166 outline:none;
167 font-size: 0.95rem;
168 transition: border-color 0.2s ease;
169 }
170 .control-row input:focus{
171 border-color: var(--accent);
172 }
173 .control-row input::placeholder{
174 color: var(--text-muted);
175 }
176 .control-row button{
177 padding:12px 18px;
178 border-radius:10px;
179 border:0;
180 cursor:pointer;
181 background: var(--accent);
182 color: white;
183 font-weight:600;
184 font-size: 0.95rem;
185 transition: background 0.2s ease, transform 0.2s ease;
186 }
187 .control-row button:hover{
188 background: var(--accent-hover);
189 transform: translateY(-1px);
190 }
191
192 .meta{
193 margin-top:20px;
194 font-size:0.85rem;
195 color:var(--text-muted);
196 }
197 .meta a{
198 color:var(--accent-hover);
199 text-decoration:none;
200 transition: color 0.2s ease;
201 }
202 .meta a:hover{
203 color: var(--accent);
204 text-decoration:underline;
205 }
206
207 @media(max-width:480px){
208 :root{--maxw:100%}
209 .links, #more-clients{grid-template-columns:1fr}
210 body{padding: 16px}
211 .card{padding: 24px 20px}
212 }