madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madebydanny.uk
html
css
javascript
new design
+456
-230
+231
css/index.css
+231
css/index.css
···
1
+
/* CSS Variables for a more maintainable color scheme */
2
+
:root {
3
+
--bg-color: #1e1e1e; /* Dark gray for a modern terminal look */
4
+
--text-color: #f0f0f0; /* Off-white for text */
5
+
--link-color: #3cb878; /* A new green color for links */
6
+
--prompt-color: #3cb878; /* Kept for reference but not used for prompts */
7
+
}
8
+
9
+
/* General body styling for a terminal look */
10
+
body {
11
+
font-family: 'Fira Code', monospace;
12
+
background-color: var(--bg-color);
13
+
color: var(--text-color);
14
+
-webkit-font-smoothing: antialiased;
15
+
-moz-osx-font-smoothing: grayscale;
16
+
line-height: 1.625;
17
+
}
18
+
19
+
/* Main Container */
20
+
.main-container {
21
+
min-height: 100vh;
22
+
display: flex;
23
+
align-items: center;
24
+
justify-content: center;
25
+
padding: 1rem;
26
+
}
27
+
28
+
/* Terminal-like container */
29
+
.terminal-container {
30
+
background-color: #2c2c2c; /* Slightly lighter gray for the window */
31
+
border-radius: 8px; /* Subtle rounded corners */
32
+
border: 1px solid #444;
33
+
padding: 1.5rem; /* Reduced padding */
34
+
width: 100%;
35
+
max-width: 45rem; /* Reduced max-width */
36
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
37
+
}
38
+
@media (min-width: 768px) {
39
+
.terminal-container {
40
+
padding: 2rem; /* Reduced padding for larger screens */
41
+
}
42
+
}
43
+
44
+
/* Profile Section */
45
+
.profile-header {
46
+
display: flex;
47
+
flex-direction: column;
48
+
align-items: center;
49
+
text-align: center;
50
+
margin-bottom: 1.5rem; /* Reduced margin */
51
+
}
52
+
@media (min-width: 768px) {
53
+
.profile-header {
54
+
flex-direction: row;
55
+
align-items: flex-start;
56
+
text-align: left;
57
+
}
58
+
}
59
+
60
+
.profile-visuals {
61
+
display: flex;
62
+
flex-direction: column;
63
+
align-items: center;
64
+
margin-bottom: 1rem; /* Reduced margin */
65
+
}
66
+
@media (min-width: 768px) {
67
+
.profile-visuals {
68
+
align-items: flex-start;
69
+
margin-bottom: 0;
70
+
margin-right: 1.5rem; /* Reduced margin */
71
+
}
72
+
}
73
+
74
+
.profile-img {
75
+
width: 6rem; /* Reduced image size */
76
+
height: 6rem; /* Reduced image size */
77
+
border-radius: 9999px;
78
+
object-fit: cover;
79
+
box-shadow: none;
80
+
border: 2px solid var(--text-color);
81
+
margin-bottom: 1rem; /* Reduced margin */
82
+
}
83
+
84
+
.profile-name {
85
+
font-size: 2rem; /* Reduced font size */
86
+
font-weight: 600;
87
+
color: var(--text-color);
88
+
margin-bottom: 0.5rem;
89
+
}
90
+
91
+
/* Bio styling, allowing it to wrap correctly */
92
+
.profile-bio {
93
+
font-size: 1.125rem; /* Reduced font size */
94
+
color: var(--link-color);
95
+
font-weight: 400;
96
+
}
97
+
98
+
.cursor {
99
+
display: inline-block;
100
+
background-color: var(--link-color);
101
+
width: 1em;
102
+
height: 1.5em; /* Adjusted height to match line-height */
103
+
vertical-align: middle;
104
+
margin-left: 0.2em;
105
+
animation: blink 1s step-end infinite;
106
+
}
107
+
108
+
@keyframes blink {
109
+
from, to { background-color: transparent; }
110
+
50% { background-color: var(--link-color); }
111
+
}
112
+
113
+
/* Style for the terminal prompt text */
114
+
.terminal-prompt {
115
+
color: var(--prompt-color);
116
+
}
117
+
118
+
.social-button-container {
119
+
margin-top: 1rem;
120
+
display: flex;
121
+
justify-content: left;
122
+
}
123
+
@media (min-width: 768px) {
124
+
.social-button-container {
125
+
justify-content: flex-start;
126
+
}
127
+
}
128
+
129
+
.follow-button {
130
+
background-color: transparent;
131
+
color: var(--link-color);
132
+
border: 1px solid var(--link-color);
133
+
padding: 0.5rem 1.5rem;
134
+
border-radius: 4px;
135
+
font-weight: 600;
136
+
transition: background-color 0.3s ease, color 0.3s ease;
137
+
box-shadow: none;
138
+
text-decoration: none;
139
+
}
140
+
.follow-button:hover {
141
+
background-color: var(--link-color);
142
+
color: var(--bg-color);
143
+
}
144
+
145
+
/* Horizontal rule */
146
+
hr {
147
+
border-color: #444;
148
+
margin-top: 1.5rem; /* Reduced margin */
149
+
margin-bottom: 1.5rem; /* Reduced margin */
150
+
}
151
+
152
+
/* Section headers */
153
+
h2 {
154
+
font-size: 1.25rem; /* Reduced font size */
155
+
font-weight: 600;
156
+
color: var(--text-color);
157
+
margin-bottom: 0.75rem; /* Reduced margin */
158
+
}
159
+
160
+
/* About section paragraphs */
161
+
.about-paragraph {
162
+
font-size: 1rem; /* Reduced font size */
163
+
color: var(--text-color);
164
+
margin-bottom: 0.75rem; /* Reduced margin */
165
+
}
166
+
167
+
.about-link {
168
+
color: var(--link-color);
169
+
font-weight: 600;
170
+
text-decoration: underline;
171
+
}
172
+
.about-link:hover {
173
+
color: var(--link-color);
174
+
background-color: rgba(60, 184, 120, 0.1); /* Adjusted hover color */
175
+
}
176
+
177
+
.code-snippet {
178
+
background-color: transparent;
179
+
color: var(--link-color);
180
+
padding: 0;
181
+
border-radius: 0;
182
+
}
183
+
184
+
/* Links Section */
185
+
.links-container {
186
+
display: flex;
187
+
flex-wrap: wrap;
188
+
gap: 0.75rem; /* Reduced gap */
189
+
}
190
+
191
+
.link-item {
192
+
display: flex;
193
+
align-items: center;
194
+
background-color: transparent;
195
+
padding: 0.4rem 0.8rem; /* Reduced padding */
196
+
border-radius: 4px;
197
+
border: 1px solid var(--link-color);
198
+
color: var(--link-color);
199
+
transition: background-color 0.3s ease, color 0.3s ease;
200
+
text-decoration: none;
201
+
cursor: pointer;
202
+
}
203
+
.link-item:hover {
204
+
background-color: var(--link-color);
205
+
color: var(--bg-color);
206
+
}
207
+
208
+
.link-icon {
209
+
margin-right: 0.4rem; /* Reduced margin */
210
+
font-size: 1rem; /* Reduced font size */
211
+
color: var(--link-color);
212
+
}
213
+
214
+
/* Footer */
215
+
.footer {
216
+
margin-top: 2rem; /* Reduced margin */
217
+
padding-top: 0.75rem; /* Reduced padding */
218
+
text-align: center;
219
+
color: var(--text-color);
220
+
border-top: 1px solid #444;
221
+
}
222
+
223
+
.footer-link {
224
+
color: var(--link-color);
225
+
transition: color 0.3s ease;
226
+
font-weight: 600;
227
+
}
228
+
.footer-link:hover {
229
+
background-color: var(--link-color);
230
+
color: var(--bg-color);
231
+
}
+94
-80
index.html
+94
-80
index.html
···
2
2
<html lang="en">
3
3
<head>
4
4
<meta charset="UTF-8">
5
-
<meta name="viewport" content="width", initial-scale="1.0">
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
<title>Daniel Morrisey</title>
7
7
<meta name="description" content="Writer @ MBD News & HTML, CSS, Javascript & Python developer">
8
8
9
-
<!-- Google Fonts for a clean font -->
9
+
<!-- Google Fonts for a monospaced terminal font -->
10
10
<link rel="preconnect" href="https://fonts.googleapis.com">
11
11
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
12
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
13
13
14
14
<meta name="keywords" content="Daniel Morrisey, Danny Morrisey, MBD, Made by Danny, Made by Danny UK"/>
15
15
<meta name="author" content="Daniel Morrisey"/>
···
26
26
<!-- Status Banner -->
27
27
<script src="https://uptime.betterstack.com/widgets/announcement.js" data-id="223534" async="async" type="text/javascript"></script>
28
28
29
-
<!-- Tailwind CSS CDN -->
30
-
<script src="https://cdn.tailwindcss.com"></script>
31
-
32
29
<!-- RSS Feed-->
33
30
<script src="/rssloader/mbdnews.js"></script>
34
31
<script src="/rssloader/textbites.js"></script>
35
32
<link rel="stylesheet" href="/rssloader/style.css"/>
36
33
37
-
38
34
<!-- Font Awesome CDN -->
39
35
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" xintegrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
40
36
37
+
<link rel="stylesheet" href="/css/index.css">
38
+
41
39
<!-- Footer-->
42
40
<script src="/script/footer.js"></script>
43
-
44
-
<style>
45
-
body {
46
-
font-family: 'Inter', sans-serif;
47
-
}
48
-
</style>
49
41
</head>
50
-
<body class="bg-gray-100 text-gray-800 antialiased leading-relaxed">
42
+
<body>
51
43
52
-
<!-- Main Container -->
53
-
<div class="min-h-screen flex items-center justify-center p-4">
44
+
<!-- Using <main> for semantic structure and accessibility -->
45
+
<main class="main-container">
54
46
55
-
<!-- Card-like container for the content -->
56
-
<div class="bg-white rounded-3xl shadow-xl p-8 md:p-12 w-full max-w-4xl">
47
+
<!-- Terminal-like container for the content -->
48
+
<div class="terminal-container">
57
49
58
50
<!-- Profile Section -->
59
-
<header class="flex flex-col md:flex-row items-center md:items-start text-center md:text-left mb-8">
60
-
<img src="https://public-danielmorrisey-com.danielmorrisey.com/media/icon.jpg" alt="Daniel Morrisey's Profile" class="w-32 h-32 rounded-full object-cover shadow-lg mb-6 md:mb-0 md:mr-8">
51
+
<header class="profile-header">
52
+
<div class="profile-visuals">
53
+
<img src="https://public-danielmorrisey-com.danielmorrisey.com/media/icon.jpg" alt="Daniel Morrisey's Profile" class="profile-img">
54
+
</div>
61
55
<div>
62
-
<h1 class="text-4xl font-bold text-gray-900 mb-2">Daniel Morrisey</h1>
63
-
<p class="text-xl text-gray-600 font-medium">Writer @ MBD News & <i class="fa-brands fa-html5"></i> <i class="fa-brands fa-css3"></i> <i class="fa-brands fa-js"></i> <i class="fa-brands fa-python"></i> developer</p>
64
-
<div class="mt-4 flex justify-center md:justify-start">
65
-
<!-- Bluesky Link -->
66
-
<a href="https://bsky.app/profile/danielmorrisey.com" class="bg-black text-white py-2 px-6 rounded-full font-semibold hover:bg-indigo-700 transition duration-300 shadow-md">
67
-
<i class="fa-brands fa-medium"></i> Follow on Medium
68
-
</a>
69
-
</div>
56
+
<h1 class="profile-name">Daniel Morrisey</h1>
57
+
<!-- The bio is the only element with the typing effect -->
58
+
<p class="profile-bio"><span id="bio-text"></span><span class="cursor"></span></p>
70
59
</div>
71
60
</header>
72
-
<!-- Centered Iframe -->
73
-
<iframe src="https://status.madebydanny.uk/badge?theme=light" width="200" height="30" frameborder="0" scrolling="no" style="color-scheme: normal"></iframe>
74
-
75
-
<hr class="border-gray-200 my-8">
61
+
<div class="social-button-container">
62
+
<a href="https://bsky.app/profile/danielmorrisey.com" class="follow-button" target="_blank" rel="noopener noreferrer">
63
+
<i class="fa-brands fa-medium"></i> Follow on Medium
64
+
</a>
65
+
</div>
66
+
<hr>
76
67
77
68
<!-- About Section -->
78
-
<section class="mb-8">
79
-
<h2 class="text-2xl font-bold text-gray-900 mb-4">About</h2>
80
-
<p class="text-lg text-gray-700 mb-4">
81
-
Welcome to
82
-
<code class="bg-gray-100 text-gray-900 px-2 py-1 rounded-lg">danielmorrisey.com</code>, I use this site as a place to share & store my
83
-
<a href="/projects/index.html" class="text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">projects</a> & <a href="/textbites/index.html" class="text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">text bites</a>.
69
+
<section class="about-section">
70
+
<h2>About</h2>
71
+
<p class="about-paragraph">
72
+
Welcome to <code class="code-snippet">danielmorrisey.com</code>, I use this site as a place to share & store my
73
+
<a href="/projects/index.html" class="about-link">projects</a> & <a href="/textbites/index.html" class="about-link">text bites</a>.
84
74
</p>
85
-
<p class="text-lg text-gray-700">
86
-
I also use <code class="bg-gray-100 text-gray-900 px-2 py-1 rounded-lg">danielmorrisey.com</code> to host some backend services and as a content delivery network (CDN) for my other sites & projects.
75
+
<p class="about-paragraph">
76
+
I also use <code class="code-snippet">danielmorrisey.com</code> to host some backend services and as a content delivery network (CDN) for my other sites & projects.
87
77
<br><br>
88
-
I also own the domain <code class="bg-gray-100 text-gray-900 px-2 py-1 rounded-lg">madebydanny.uk</code> I use it for more "professional" projects & sites like <a href="https://news.madebydanny.uk" class="text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">MBD News</a>.
78
+
I also own the domain <code class="code-snippet">madebydanny.uk</code> I use it for more "professional" projects & sites like <a href="https://news.madebydanny.uk" target="_blank" rel="noopener noreferrer" class="about-link">MBD News</a>.
89
79
</p>
90
-
<p class="text-lg text-gray-700">
80
+
<p class="about-paragraph">
91
81
<br><br>
92
-
For more "professional" posts/textbites view my <a href="https://medium.com/@danielmorrisey" class="text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Medium Profile</a>.
82
+
For more "professional" posts/textbites view my <a href="https://medium.com/@danielmorrisey" target="_blank" rel="noopener noreferrer" class="about-link">Medium Profile</a>.
93
83
<br><br>
94
-
I also own the domain <code class="bg-gray-100 text-gray-900 px-2 py-1 rounded-lg">madebydanny.uk</code> I use it for more "professional" projects & sites like <a href="https://news.madebydanny.uk" class="text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">MBD News</a>.
84
+
I also own the domain <code class="code-snippet">madebydanny.uk</code> I use it for more "professional" projects & sites like <a href="https://news.madebydanny.uk" target="_blank" rel="noopener noreferrer" class="about-link">MBD News</a>.
95
85
</p>
96
86
</section>
97
87
98
-
<hr class="border-gray-200 my-8">
88
+
<hr>
99
89
100
90
<!-- Links Section -->
101
91
<section>
102
-
<h2 class="text-2xl font-bold text-gray-900 mb-4">Where to find me & my work</h2>
103
-
<div class="flex flex-wrap gap-4">
92
+
<h2>Where to find me & my work</h2>
93
+
<div class="links-container">
104
94
<!-- Projects -->
105
-
<a href="/projects/index.html" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
106
-
<i class="fa-solid fa-folder-open text-lg"></i>
95
+
<a href="/projects/index.html" class="link-item">
96
+
<i class="fa-solid fa-folder-open link-icon"></i>
107
97
<span>My Projects</span>
108
98
</a>
109
99
<!-- Text Bites -->
110
-
<a href="/textbites/index.html" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
111
-
<i class="fa-solid fa-book text-lg"></i>
100
+
<a href="/textbites/index.html" class="link-item">
101
+
<i class="fa-solid fa-book link-icon"></i>
112
102
<span>Text Bites</span>
113
103
</a>
114
104
<!-- Uptime -->
115
-
<a href="https://status.madebydanny.uk" target="blank_" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
116
-
<i class="fa-solid fa-server"></i></i>
105
+
<a href="https://status.madebydanny.uk" target="_blank" rel="noopener noreferrer" class="link-item">
106
+
<i class="fa-solid fa-server link-icon"></i></i>
117
107
<span>Status</span>
118
108
</a>
119
109
<!-- Medium -->
120
-
<a href="https://medium.com/@danielmorrisey" target="blank_" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
121
-
<i class="fa-brands fa-medium"></i>
110
+
<a href="https://medium.com/@danielmorrisey" target="_blank" rel="noopener noreferrer" class="link-item">
111
+
<i class="fa-brands fa-medium link-icon"></i>
122
112
<span>Medium</span>
123
113
</a>
124
114
<!-- Bluesky -->
125
-
<a href="https://bsky.app/profile/danielmorrisey.com" target="blank_" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
126
-
<i class="fa-brands fa-bluesky"></i>
115
+
<a href="https://bsky.app/profile/danielmorrisey.com" target="_blank" rel="noopener noreferrer" class="link-item">
116
+
<i class="fa-brands fa-bluesky link-icon"></i>
127
117
<span>Bluesky</span>
128
118
</a>
129
119
<!-- Threads -->
130
-
<a href="https://threads.com/madebydanny.uk" target="blank_" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
131
-
<i class="fa-brands fa-threads"></i>
120
+
<a href="https://threads.com/madebydanny.uk" target="_blank" rel="noopener noreferrer" class="link-item">
121
+
<i class="fa-brands fa-threads link-icon"></i>
132
122
<span>Threads</span>
133
123
</a>
134
124
<!-- Mastodon -->
135
-
<a href="https://mastodon.social/@danielmorrisey" target="blank_" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
136
-
<i class="fa-brands fa-mastodon"></i>
125
+
<a href="https://mastodon.social/@danielmorrisey" target="_blank" rel="noopener noreferrer" class="link-item">
126
+
<i class="fa-brands fa-mastodon link-icon"></i>
137
127
<span>Mastodon</span>
138
128
</a>
139
129
<!-- Linkedin -->
140
-
<a href="https://linkedin.com/in/danielemorrisey" target="blank_" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
141
-
<i class="fa-brands fa-linkedin"></i>
130
+
<a href="https://linkedin.com/in/danielemorrisey" target="_blank" rel="noopener noreferrer" class="link-item">
131
+
<i class="fa-brands fa-linkedin link-icon"></i>
142
132
<span>Linkedin</span>
143
133
</a>
144
134
<!-- GitHub -->
145
-
<a href="https://github.com/therealfuntimeswithdanny" target="blank_" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
146
-
<i class="fa-brands fa-github"></i>
135
+
<a href="https://github.com/therealfuntimeswithdanny" target="_blank" rel="noopener noreferrer" class="link-item">
136
+
<i class="fa-brands fa-github link-icon"></i>
147
137
<span>GitHub</span>
148
138
</a>
149
139
<!-- MBD News -->
150
-
<a href="https://news.madebydanny.uk/" target="blank_" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
151
-
<i class="fa-solid fa-newspaper text-lg"></i>
140
+
<a href="https://news.madebydanny.uk/" target="_blank" rel="noopener noreferrer" class="link-item">
141
+
<i class="fa-solid fa-newspaper link-icon"></i>
152
142
<span>MBD News</span>
153
143
</a>
154
144
<!-- Image Scope -->
155
-
<a href="https://imagescope.madebydanny.uk/" target="blank_" class="flex items-center space-x-2 bg-gray-100 px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-200 transition duration-300">
156
-
<i class="fa-solid fa-microscope"></i>
145
+
<a href="https://imagescope.madebydanny.uk/" target="_blank" rel="noopener noreferrer" class="link-item">
146
+
<i class="fa-solid fa-microscope link-icon"></i>
157
147
<span>Image Scope</span>
158
148
</a>
159
149
</div>
160
150
</section>
161
151
162
-
<hr class="border-gray-200 my-8">
152
+
<hr>
163
153
164
154
<!-- RSS Feed(s)-->
165
155
<section>
166
-
<h2 class="text-2xl font-bold text-gray-900 mb-4">Trending from MBD News <i class="fa-solid fa-arrow-trend-up"></i></h2>
156
+
<h2>Trending from MBD News <i class="fa-solid fa-arrow-trend-up"></i></h2>
167
157
<div class="articles" id="articles"></div>
168
158
</section>
169
159
170
-
<hr class="border-gray-200 my-8">
160
+
<hr>
171
161
172
162
<!-- RSS Feed(s)-->
173
163
<section>
174
-
<h2 class="text-2xl font-bold text-gray-900 mb-4">Medium Feed <i class="fa-brands fa-medium"></i></h2>
164
+
<h2>Medium Feed <i class="fa-brands fa-medium"></i></h2>
175
165
<div class="articles" id="textbites"></div>
176
166
</section>
177
167
178
-
<footer class="mt-12 pt-4 text-center text-gray-500 border-t border-gray-200">
168
+
<footer class="footer">
179
169
<!-- Centered Iframe -->
180
-
<div class="flex justify-center mt-8">
181
-
<iframe src="https://status.madebydanny.uk/badge?theme=light" width="200" height="30" frameborder="0" scrolling="no"></iframe>
170
+
<div style="display: flex; justify-content: center; margin-top: 2rem;">
171
+
<!-- Added a title for accessibility -->
172
+
<iframe src="https://status.madebydanny.uk/badge?theme=dark" width="200" height="30" frameborder="0" scrolling="no" title="Website status badge"></iframe>
182
173
</div>
183
174
<p>
184
175
© 2024-<span id="currentYear"></span>
185
-
<a href="https://madebydanny.uk" target="blank_" class="hover:text-indigo-600 transition duration-300 font-medium">Made by Danny UK</a>
176
+
<a href="https://madebydanny.uk" target="_blank" rel="noopener noreferrer" class="footer-link">Made by Danny UK</a>
186
177
</p>
187
-
<p class="text-sm mt-1">
178
+
<p style="font-size: 0.875rem; margin-top: 0.25rem;">
188
179
by Daniel Morrisey
189
180
</p>
190
181
<p>
191
-
MBD is made possible thanks to <a href="https://cloudflare.com" target="blank_">Cloudflare</a> & <a href="https://cloudinary.com" traget="blank_">Cloudinary</a>
182
+
MBD is made possible thanks to <a href="https://cloudflare.com" target="_blank" rel="noopener noreferrer" class="footer-link">Cloudflare</a> & <a href="https://cloudinary.com" target="_blank" rel="noopener noreferrer" class="footer-link">Cloudinary</a>
192
183
</p>
193
184
</footer>
194
185
195
186
</div>
196
-
</div>
187
+
</main>
197
188
198
189
<script>
199
190
// Set the current year for the copyright notice
200
191
document.getElementById('currentYear').textContent = new Date().getFullYear();
192
+
193
+
// Typing Effect for Bio
194
+
const bioText = "Writer @ MBD News & HTML, CSS, Javascript & Python developer";
195
+
const bioElement = document.getElementById('bio-text');
196
+
const cursor = document.querySelector('.cursor');
197
+
let i = 0;
198
+
let typingSpeed = 50;
199
+
200
+
function typeWriter() {
201
+
if (i < bioText.length) {
202
+
bioElement.textContent += bioText.charAt(i);
203
+
i++;
204
+
setTimeout(typeWriter, typingSpeed);
205
+
} else {
206
+
cursor.style.animation = 'none';
207
+
}
208
+
}
209
+
210
+
// Start the typing effect when the page loads
211
+
window.onload = function() {
212
+
typeWriter();
213
+
};
214
+
201
215
</script>
202
216
</body>
203
217
</html>
+50
-61
projects/index.html
+50
-61
projects/index.html
···
1
1
<!DOCTYPE html>
2
-
<html lang="en">
2
+
<html lang="en" style="font-family: 'Fira Code', monospace; background-color: #1e1e1e; color: #f0f0f0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.625;">
3
3
<head>
4
4
<meta charset="UTF-8">
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
<title>Projects - Daniel Morrisey</title>
7
7
<meta name="description" content="From HTML to Python view all of Daniel Morriey's projects"/>
8
8
9
-
<!-- Google Fonts for a clean font -->
9
+
<!-- Using Fira Code for a cohesive terminal theme -->
10
10
<link rel="preconnect" href="https://fonts.googleapis.com">
11
11
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
12
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
13
13
14
14
<meta name="keywords" content="Daniel Morrisey, Danny Morrisey, MBD, Made by Danny, Made by Danny UK"/>
15
15
<meta name="author" content="Daniel Morrisey"/>
···
26
26
<!-- Status Banner -->
27
27
<script src="https://uptime.betterstack.com/widgets/announcement.js" data-id="223534" async="async" type="text/javascript"></script>
28
28
29
-
<!-- Tailwind CSS CDN -->
30
-
<script src="https://cdn.tailwindcss.com"></script>
31
-
32
29
<!-- Font Awesome CDN -->
33
30
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" xintegrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
34
31
35
-
<!-- Footer-->
36
-
<script src="/script/footer.js"></script>
37
-
<style>
38
-
body {
39
-
font-family: 'Inter', sans-serif;
40
-
}
41
-
</style>
42
32
<!-- Footer Custom Element Script -->
43
33
<script src="/script/footer.js"></script>
44
34
</head>
45
-
<body class="bg-gray-100 text-gray-800 antialiased leading-relaxed">
35
+
<body style="font-family: 'Fira Code', monospace; background-color: #1e1e1e; color: #f0f0f0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.625;">
46
36
47
37
<!-- Main Container -->
48
-
<div class="min-h-screen flex items-center justify-center p-4">
38
+
<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;">
49
39
50
40
<!-- Card-like container for the content -->
51
-
<div class="bg-white rounded-3xl shadow-xl p-8 md:p-12 w-full max-w-4xl">
41
+
<div style="background-color: #2c2c2c; border-radius: 8px; border: 1px solid #444; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); padding: 2rem; width: 100%; max-width: 45rem;">
52
42
53
43
<!-- Header Section -->
54
-
<header class="flex flex-col items-center mb-8 text-center">
55
-
<a href="/index.html" class="flex flex-col items-center">
56
-
<img src="https://public-danielmorrisey-com.danielmorrisey.com/media/icon.jpg" alt="Profile Picture" class="w-24 h-24 mb-4 rounded-full shadow-lg"/>
57
-
<h1 class="text-3xl font-bold text-gray-900">Projects</h1>
58
-
<p class="text-lg text-gray-600 font-medium mt-1">From HTML to Python</p>
44
+
<header style="display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; text-align: center;">
45
+
<a href="/index.html" style="display: flex; flex-direction: column; align-items: center; text-decoration: none;">
46
+
<img src="https://public-danielmorrisey-com.danielmorrisey.com/media/icon.jpg" alt="Profile Picture" style="width: 6rem; height: 6rem; margin-bottom: 1rem; border-radius: 9999px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"/>
47
+
<h1 style="font-size: 2rem; font-weight: 600; color: #f0f0f0;">Projects</h1>
48
+
<p style="font-size: 1.125rem; color: #f0f0f0; font-weight: 400; margin-top: 0.25rem;">From HTML to Python</p>
59
49
</a>
60
50
</header>
61
51
62
-
<hr class="border-gray-200 my-8">
52
+
<hr style="border-color: #444; margin-top: 1.5rem; margin-bottom: 1.5rem;">
63
53
64
54
<!-- Search Bar -->
65
-
<div class="mb-6">
66
-
<input type="text" id="projectSearch" placeholder="Search projects..." class="w-full px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">
55
+
<div style="margin-bottom: 1.5rem;">
56
+
<input type="text" id="projectSearch" placeholder="Search projects..." style="width: 100%; padding: 0.5rem 1rem; background-color: #1e1e1e; border: 1px solid #444; border-radius: 9999px; outline: none; transition: border-color 0.3s; color: #f0f0f0;"/>
67
57
</div>
68
58
69
59
<!-- Projects List Container -->
70
-
<div id="projectsList" class="space-y-6">
71
-
<div class="project-card bg-gray-50 p-6 rounded-2xl shadow-md">
72
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 project-title-text">Image Scope</h4>
73
-
<div class="mb-4">
74
-
<code class="rounded-lg border bg-gray-100 px-2 py-1 text-sm block md:inline-block">
75
-
<a href="https://github.com/therealfuntimeswithdanny/imagescope" class="text-indigo-600 hover:text-indigo-800 transition-colors">
60
+
<div id="projectsList" style="space-y: 1.5rem;">
61
+
<div class="project-card" style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444; margin-bottom: 1.5rem;">
62
+
<h4 class="project-title-text" style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">Image Scope</h4>
63
+
<div style="margin-bottom: 1rem;">
64
+
<code style="display: inline-block; background-color: #1e1e1e; border: 1px solid #444; border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.875rem; color: #3cb878;">
65
+
<a href="https://github.com/therealfuntimeswithdanny/imagescope" style="color: #3cb878; text-decoration: none;">
76
66
<i class="fa-brands fa-github"></i>/therealfuntimeswithdanny/imagescope
77
67
</a>
78
68
</code>
79
69
</div>
80
-
<p class="project-description mt-2 text-gray-700 leading-relaxed">
70
+
<p class="project-description" style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
81
71
View random objects under a microscope. In a Tik Tok stye format.
82
72
</p>
83
-
<div class="mt-4 flex flex-wrap gap-4">
84
-
<a href="https://imagescope.madebydanny.uk" class="inline-flex items-center justify-center bg-gray-200 text-gray-800 py-2 px-4 rounded-full font-semibold hover:bg-gray-300 transition duration-300">
73
+
<div style="margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem;">
74
+
<a href="https://imagescope.madebydanny.uk" style="display: inline-flex; align-items: center; justify-content: center; background-color: #3cb878; color: #1e1e1e; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">
85
75
<i class="fa-solid fa-globe"></i>
86
76
</a>
87
77
</div>
88
78
</div>
89
79
<!-- Project Card 1: Space Shooter -->
90
-
<div class="project-card bg-gray-50 p-6 rounded-2xl shadow-md">
91
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 project-title-text">Space Shooter (v1.3)</h4>
92
-
<div class="mb-4">
93
-
<code class="rounded-lg border bg-gray-100 px-2 py-1 text-sm block md:inline-block md:mb-0 mb-2">
94
-
<a href="https://github.com/therealfuntimeswithdanny/space-shooter" class="text-indigo-600 hover:text-indigo-800 transition-colors">
80
+
<div class="project-card" style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444; margin-bottom: 1.5rem;">
81
+
<h4 class="project-title-text" style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">Space Shooter (v1.3)</h4>
82
+
<div style="margin-bottom: 1rem;">
83
+
<code style="display: inline-block; background-color: #1e1e1e; border: 1px solid #444; border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.875rem; color: #3cb878; margin-bottom: 0.5rem;">
84
+
<a href="https://github.com/therealfuntimeswithdanny/space-shooter" style="color: #3cb878; text-decoration: none;">
95
85
<i class="fa-brands fa-apple"></i>/therealfuntimeswithdanny/space-shooter
96
86
</a>
97
87
</code>
98
-
<code class="rounded-lg border bg-gray-100 px-2 py-1 text-sm block md:inline-block">
99
-
<a href="https://github.com/therealfuntimeswithdanny/spaceshooter-windows" class="text-indigo-600 hover:text-indigo-800 transition-colors">
100
-
<i class="fa-brands fa-windows"></i>/therealfuntimeswithdanny/spaceshooter-windows
88
+
<code style="display: inline-block; background-color: #1e1e1e; border: 1px solid #444; border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.875rem; color: #3cb878;">
89
+
<a href="https://github.com/therealfuntimeswithdanny/spaceshooter-windows" style="color: #3cb878; text-decoration: none;">
90
+
<i class="fa-brands fa-windows"></i>/spaceshooter-windows
101
91
</a>
102
92
</code>
103
93
</div>
104
-
<p class="project-description mt-2 text-gray-700 leading-relaxed">
94
+
<p class="project-description" style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
105
95
Space Shooter is a simple Space Invaders clone written in Python using Pygame. The game can run on MacOS & Windows.
106
96
</p>
107
-
<div class="mt-4 flex flex-wrap gap-4">
108
-
<a href="/projects/space-shooter/index.html" class="inline-flex items-center justify-center bg-indigo-600 text-white py-2 px-4 rounded-full font-semibold hover:bg-indigo-700 transition duration-300 shadow-md">
97
+
<div style="margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem;">
98
+
<a href="/projects/space-shooter/index.html" style="display: inline-flex; align-items: center; justify-content: center; background-color: #3cb878; color: #1e1e1e; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">
109
99
Download & Install
110
100
</a>
111
-
<a href="/projects/space-shooter/macos.html" class="inline-flex items-center justify-center bg-gray-200 text-gray-800 py-2 px-4 rounded-full font-semibold hover:bg-gray-300 transition duration-300">
101
+
<a href="/projects/space-shooter/macos.html" style="display: inline-flex; align-items: center; justify-content: center; background-color: #1e1e1e; color: #f0f0f0; padding: 0.5rem 1rem; border: 1px solid #444; border-radius: 9999px; font-weight: 600; text-decoration: none;">
112
102
<i class="fa-brands fa-apple"></i>
113
103
</a>
114
-
<a href="/projects/space-shooter/windows.html" class="inline-flex items-center justify-center bg-gray-200 text-gray-800 py-2 px-4 rounded-full font-semibold hover:bg-gray-300 transition duration-300">
104
+
<a href="/projects/space-shooter/windows.html" style="display: inline-flex; align-items: center; justify-content: center; background-color: #1e1e1e; color: #f0f0f0; padding: 0.5rem 1rem; border: 1px solid #444; border-radius: 9999px; font-weight: 600; text-decoration: none;">
115
105
<i class="fa-brands fa-windows"></i>
116
106
</a>
117
107
</div>
118
108
</div>
119
109
120
110
<!-- Project Card 2: Ball Shooter -->
121
-
<div class="project-card bg-gray-50 p-6 rounded-2xl shadow-md">
122
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 project-title-text">Ball Shooter (v0.0.1)</h4>
123
-
<div class="mb-4">
124
-
<code class="rounded-lg border bg-gray-100 px-2 py-1 text-sm block md:inline-block">
125
-
<a href="https://github.com/therealfuntimeswithdanny/ball-shooter" class="text-indigo-600 hover:text-indigo-800 transition-colors">
111
+
<div class="project-card" style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444; margin-bottom: 1.5rem;">
112
+
<h4 class="project-title-text" style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">Ball Shooter (v0.0.1)</h4>
113
+
<div style="margin-bottom: 1rem;">
114
+
<code style="display: inline-block; background-color: #1e1e1e; border: 1px solid #444; border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.875rem; color: #3cb878;">
115
+
<a href="https://github.com/therealfuntimeswithdanny/ball-shooter" style="color: #3cb878; text-decoration: none;">
126
116
<i class="fa-brands fa-github"></i>/therealfuntimeswithdanny/ball-shooter
127
117
</a>
128
118
</code>
129
119
</div>
130
-
<p class="project-description mt-2 text-gray-700 leading-relaxed">
120
+
<p class="project-description" style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
131
121
Ball Shooter is a simple game, where your goal is to destroy all blocks using a paddle and ball. The game is in development.
132
122
</p>
133
123
</div>
134
124
</div>
135
125
136
126
<!-- Footer -->
137
-
<footer class="mt-12 pt-4 text-center text-gray-500 border-t border-gray-200">
138
-
<div class="flex justify-center space-x-6 mb-4 text-lg">
139
-
<a href="javascript:history.back()" class="text-gray-600 hover:text-indigo-600 transition duration-300"><i class="fa-solid fa-arrow-left"></i> Back</a>
140
-
<a href="/index.html" class="text-gray-600 hover:text-indigo-600 transition duration-300"><i class="fa-solid fa-house"></i> Home</a>
127
+
<footer style="margin-top: 3rem; padding-top: 1rem; text-align: center; color: #f0f0f0; border-top: 1px solid #444;">
128
+
<div style="display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; font-size: 1.125rem;">
129
+
<a href="javascript:history.back()" style="color: #f0f0f0; text-decoration: none;"><i class="fa-solid fa-arrow-left"></i> Back</a>
130
+
<a href="/index.html" style="color: #f0f0f0; text-decoration: none;"><i class="fa-solid fa-house"></i> Home</a>
141
131
</div>
142
132
<!-- Centered Iframe -->
143
-
<div class="flex justify-center mt-8">
144
-
<iframe src="https://status.madebydanny.uk/badge?theme=light" width="200" height="30" frameborder="0" scrolling="no" style="color-scheme: normal"></iframe>
133
+
<div style="display: flex; justify-content: center; margin-top: 2rem;">
134
+
<iframe src="https://status.madebydanny.uk/badge?theme=dark" width="200" height="30" frameborder="0" scrolling="no" style="color-scheme: normal"></iframe>
145
135
</div>
146
136
<p>
147
137
© 2024-<span id="currentYear"></span>
148
-
<a href="https://madebydanny.uk" class="hover:text-indigo-600 transition duration-300 font-medium">Made by Danny UK</a>
138
+
<a href="https://madebydanny.uk" style="color: #3cb878; font-weight: 600; text-decoration: none;">Made by Danny UK</a>
149
139
</p>
150
-
<p class="text-sm mt-1">
140
+
<p style="font-size: 0.875rem; margin-top: 0.25rem;">
151
141
by Daniel Morrisey
152
142
</p>
153
143
</footer>
···
186
176
});
187
177
</script>
188
178
</div>
189
-
<app-info></app-info>
190
179
</body>
191
180
</html>
+4
-4
rssloader/style.css
+4
-4
rssloader/style.css
···
12
12
width: 32%;
13
13
border-radius: 8px;
14
14
overflow: hidden;
15
-
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
15
+
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.375);
16
16
display: flex;
17
17
flex-direction: column;
18
-
background: #fff;
18
+
background: black;
19
19
}
20
20
.card img {
21
21
width: 100%;
22
22
height: 100px;
23
23
object-fit: cover;
24
-
background: #ddd;
24
+
background: black;
25
25
}
26
26
.card-content {
27
27
padding: 15px;
···
32
32
}
33
33
.card-content p {
34
34
margin: 0;
35
-
color: #555;
35
+
color: white;
36
36
font-size: 14px;
37
37
}
38
38
.card-content a {
+77
-85
textbites/index.html
+77
-85
textbites/index.html
···
1
1
<!DOCTYPE html>
2
-
<html lang="en">
2
+
<html lang="en" style="font-family: 'Fira Code', monospace; background-color: #1e1e1e; color: #f0f0f0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.625;">
3
3
<head>
4
4
<meta charset="UTF-8">
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
···
16
16
17
17
<link rel="me" href="https://mastodon.social/@danielmorrisey"/>
18
18
<link rel="icon" type="image/x-icon" href="https://public-danielmorrisey-com.danielmorrisey.com/media/icon.jpg">
19
-
<!-- Google Fonts for a clean font -->
19
+
20
+
<!-- Using Fira Code for a cohesive terminal theme -->
20
21
<link rel="preconnect" href="https://fonts.googleapis.com">
21
22
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
23
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
23
24
24
25
<!-- Status Banner -->
25
26
<script src="https://uptime.betterstack.com/widgets/announcement.js" data-id="223534" async="async" type="text/javascript"></script>
···
32
33
33
34
<!-- Footer-->
34
35
<script src="/script/footer.js"></script>
35
-
36
-
<style>
37
-
body {
38
-
font-family: 'Inter', sans-serif;
39
-
}
40
-
</style>
41
-
<!-- Footer Custom Element Script -->
42
-
<script src="/script/footer.js"></script>
43
36
</head>
44
-
<body class="bg-gray-100 text-gray-800 antialiased leading-relaxed">
37
+
<body style="font-family: 'Fira Code', monospace; background-color: #1e1e1e; color: #f0f0f0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.625;">
45
38
46
39
<!-- Main Container -->
47
-
<div class="min-h-screen flex items-center justify-center p-4">
40
+
<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;">
48
41
49
42
<!-- Card-like container for the content -->
50
-
<div class="bg-white rounded-3xl shadow-xl p-8 md:p-12 w-full max-w-4xl">
43
+
<div style="background-color: #2c2c2c; border-radius: 8px; border: 1px solid #444; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); padding: 2rem; width: 100%; max-width: 45rem;">
51
44
52
45
<!-- Header Section -->
53
-
<header class="flex flex-col items-center mb-8 text-center">
54
-
<a href="/index.html" class="flex flex-col items-center">
55
-
<img src="https://public-danielmorrisey-com.danielmorrisey.com/media/icon.jpg" alt="Profile Picture" class="w-24 h-24 mb-4 rounded-full shadow-lg"/>
56
-
<h1 class="text-3xl font-bold text-gray-900">Text Bites</h1>
57
-
<p class="text-lg text-gray-600 font-medium mt-1">Updates from Daniel Morrisey</p>
46
+
<header style="display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 2rem;">
47
+
<a href="/index.html" style="display: flex; flex-direction: column; align-items: center;">
48
+
<img src="https://public-danielmorrisey-com.danielmorrisey.com/media/icon.jpg" alt="Profile Picture" style="width: 6rem; height: 6rem; margin-bottom: 1rem; border-radius: 9999px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"/>
49
+
<h1 style="font-size: 2rem; font-weight: 600; color: #f0f0f0; margin-bottom: 0.5rem;">Text Bites</h1>
50
+
<p style="font-size: 1.125rem; color: #f0f0f0; font-weight: 400; margin-top: 0.25rem;">Updates from Daniel Morrisey</p>
58
51
</a>
59
52
</header>
60
53
61
-
<hr class="border-gray-200 my-8">
54
+
<hr style="border-color: #444; margin-top: 1.5rem; margin-bottom: 1.5rem;">
62
55
63
56
<!-- Search Bar -->
64
-
<div class="mb-6">
65
-
<input type="text" id="textbiteSearch" placeholder="Search Text Bites..." class="w-full px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">
57
+
<div style="margin-bottom: 1.5rem;">
58
+
<input type="text" id="textbiteSearch" placeholder="Search Text Bites..." style="width: 100%; padding: 0.5rem 1rem; background-color: #1e1e1e; border: 1px solid #444; border-radius: 9999px; outline: none; transition: border-color 0.3s; color: #f0f0f0;"/>
66
59
</div>
67
60
68
-
<div class="w-auto h-1/3 bg-orange-200 rounded px-4 py-2">
69
-
<p class="flex items-center gap-2">
70
-
<a href="/textbites/feed.xml" target="blank_">RSS Feed <i class="fa-solid fa-rss"></i></a>
61
+
<div style="background-color: transparent; border: 1px solid #3cb878; color: #3cb878; padding: 0.5rem 1rem; border-radius: 8px;">
62
+
<p style="display: flex; align-items: center; gap: 0.5rem;">
63
+
<a href="/textbites/feed.xml" target="blank_" style="color: #3cb878; text-decoration: none;">RSS Feed <i class="fa-solid fa-rss"></i></a>
71
64
</p>
72
65
</div>
73
66
74
67
<br>
75
68
<!-- Text Bites List Container -->
76
-
<div id="projectsList" class="space-y-6">
77
-
<div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md">
78
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 textbite-title">I ditched Word for Markdown</h4>
79
-
<div class="text-sm text-gray-500 mb-4">
80
-
<span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Tue Aug 19</span>
69
+
<div id="projectsList" style="space-y: 1.5rem;">
70
+
<div style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444;">
71
+
<h4 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">I ditched Word for Markdown</h4>
72
+
<div style="font-size: 0.875rem; color: #999; margin-bottom: 1rem;">
73
+
<span style="margin-right: 0.75rem;"><i class="fa-solid fa-calendar-alt"></i> Tue Aug 19</span>
81
74
<span><i class="fa-solid fa-clock"></i> 1 Min Read</span>
82
75
</div>
83
-
<p class="mt-2 text-gray-700 leading-relaxed textbite-description">
76
+
<p style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
84
77
All thanks to this one Tool
85
78
</p>
86
-
<a href="noyoutubenowmedium.html" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Read More...</a>
79
+
<a href="noyoutubenowmedium.html" style="display: inline-block; margin-top: 1rem; color: #3cb878; text-decoration: none; font-weight: 600;">Read More...</a>
87
80
</div>
88
-
<div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md">
89
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 textbite-title">I replaced the YouTube app on my phone with Medium</h4>
90
-
<div class="text-sm text-gray-500 mb-4">
91
-
<span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Tue Aug 19</span>
81
+
<div style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444;">
82
+
<h4 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">I replaced the YouTube app on my phone with Medium</h4>
83
+
<div style="font-size: 0.875rem; color: #999; margin-bottom: 1rem;">
84
+
<span style="margin-right: 0.75rem;"><i class="fa-solid fa-calendar-alt"></i> Tue Aug 19</span>
92
85
<span><i class="fa-solid fa-clock"></i> 2 Min Read</span>
93
86
</div>
94
-
<p class="mt-2 text-gray-700 leading-relaxed textbite-description">
87
+
<p style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
95
88
I stopped doom scrolling and started Doom Reading
96
89
</p>
97
-
<a href="noyoutubenowmedium.html" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Read More...</a>
90
+
<a href="noyoutubenowmedium.html" style="display: inline-block; margin-top: 1rem; color: #3cb878; text-decoration: none; font-weight: 600;">Read More...</a>
98
91
</div>
99
92
<!-- mbdstatus.html -->
100
-
<div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md">
101
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 textbite-title">MBD Status now uses Better Stack</h4>
102
-
<div class="text-sm text-gray-500 mb-4">
103
-
<span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Mon Aug 18</span>
93
+
<div style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444;">
94
+
<h4 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">MBD Status now uses Better Stack</h4>
95
+
<div style="font-size: 0.875rem; color: #999; margin-bottom: 1rem;">
96
+
<span style="margin-right: 0.75rem;"><i class="fa-solid fa-calendar-alt"></i> Mon Aug 18</span>
104
97
<span><i class="fa-solid fa-clock"></i> 45 Sec Read</span>
105
98
</div>
106
-
<p class="mt-2 text-gray-700 leading-relaxed textbite-description">
99
+
<p style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
107
100
Faster alerts, higher uptime, and better everything
108
101
</p>
109
-
<a href="mbdstatus.html" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Read More...</a>
102
+
<a href="mbdstatus.html" style="display: inline-block; margin-top: 1rem; color: #3cb878; text-decoration: none; font-weight: 600;">Read More...</a>
110
103
</div>
111
104
<!-- macminiupdateaug15.html -->
112
-
<div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md">
113
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 textbite-title">Mac mini update, 2 weeks later</h4>
114
-
<div class="text-sm text-gray-500 mb-4">
115
-
<span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Fri Aug 15</span>
105
+
<div style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444;">
106
+
<h4 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">Mac mini update, 2 weeks later</h4>
107
+
<div style="font-size: 0.875rem; color: #999; margin-bottom: 1rem;">
108
+
<span style="margin-right: 0.75rem;"><i class="fa-solid fa-calendar-alt"></i> Fri Aug 15</span>
116
109
<span><i class="fa-solid fa-clock"></i> 1 Min Read</span>
117
110
</div>
118
-
<p class="mt-2 text-gray-700 leading-relaxed textbite-description">
111
+
<p style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
119
112
I still can’t believe it’s 5’ x 5’ and yet so powerful
120
113
</p>
121
-
<a href="macminiupdateaug15.html" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Read More...</a>
114
+
<a href="macminiupdateaug15.html" style="display: inline-block; margin-top: 1rem; color: #3cb878; text-decoration: none; font-weight: 600;">Read More...</a>
122
115
</div>
123
116
<!-- igotamacmini.html -->
124
-
<div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md">
125
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 textbite-title">I got a Mac Mini</h4>
126
-
<div class="text-sm text-gray-500 mb-4">
127
-
<span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Tue Aug 5</span>
117
+
<div style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444;">
118
+
<h4 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">I got a Mac Mini</h4>
119
+
<div style="font-size: 0.875rem; color: #999; margin-bottom: 1rem;">
120
+
<span style="margin-right: 0.75rem;"><i class="fa-solid fa-calendar-alt"></i> Tue Aug 5</span>
128
121
<span><i class="fa-solid fa-clock"></i> 1 Min Read</span>
129
122
</div>
130
-
<p class="mt-2 text-gray-700 leading-relaxed textbite-description">
123
+
<p style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
131
124
It might be mini, but it sure is fast!
132
125
</p>
133
-
<a href="igotamacmini.html" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Read More...</a>
126
+
<a href="igotamacmini.html" style="display: inline-block; margin-top: 1rem; color: #3cb878; text-decoration: none; font-weight: 600;">Read More...</a>
134
127
</div>
135
128
<!-- card -->
136
-
<div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md">
137
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 textbite-title">I need a Bluesky version of mastodon’s deck layout</h4>
138
-
<div class="text-sm text-gray-500 mb-4">
139
-
<span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Sun Aug 3</span>
129
+
<div style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444;">
130
+
<h4 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">I need a Bluesky version of mastodon’s deck layout</h4>
131
+
<div style="font-size: 0.875rem; color: #999; margin-bottom: 1rem;">
132
+
<span style="margin-right: 0.75rem;"><i class="fa-solid fa-calendar-alt"></i> Sun Aug 3</span>
140
133
<span><i class="fa-solid fa-clock"></i> 50 Sec Read</span>
141
134
</div>
142
-
<p class="mt-2 text-gray-700 leading-relaxed textbite-description">
135
+
<p style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
143
136
Just like Mastodon, Threads also has a “deck” layout for desktop users. And my 3 main social media platforms I use are Bluesky, Mastodon, and Threads. Having a Bluesky Deck layout for desktop would be nice to have.
144
137
</p>
145
-
<a href="blueskydeck.html" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Read More...</a>
138
+
<a href="blueskydeck.html" style="display: inline-block; margin-top: 1rem; color: #3cb878; text-decoration: none; font-weight: 600;">Read More...</a>
146
139
</div>
147
140
<!-- card -->
148
-
<div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md">
149
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 textbite-title">The Power of Hashtags</h4>
150
-
<div class="text-sm text-gray-500 mb-4">
151
-
<span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Sun Aug 3</span>
141
+
<div style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444;">
142
+
<h4 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">The Power of Hashtags</h4>
143
+
<div style="font-size: 0.875rem; color: #999; margin-bottom: 1rem;">
144
+
<span style="margin-right: 0.75rem;"><i class="fa-solid fa-calendar-alt"></i> Sun Aug 3</span>
152
145
<span><i class="fa-solid fa-clock"></i> 1 Min Read</span>
153
146
</div>
154
-
<p class="mt-2 text-gray-700 leading-relaxed textbite-description">
147
+
<p style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
155
148
All it takes is one # to reach an audience of 100+
156
149
</p>
157
-
<a href="thepowerofhashtags.html" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Read More...</a>
150
+
<a href="thepowerofhashtags.html" style="display: inline-block; margin-top: 1rem; color: #3cb878; text-decoration: none; font-weight: 600;">Read More...</a>
158
151
</div>
159
152
<!-- card -->
160
-
<div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md">
161
-
<h4 class="text-xl font-semibold mb-2 text-gray-900 textbite-title">MBD is working on MBDIO</h4>
162
-
<div class="text-sm text-gray-500 mb-4">
163
-
<span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Sat Aug 2</span>
153
+
<div style="background-color: #2c2c2c; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid #444;">
154
+
<h4 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #f0f0f0;">MBD is working on MBDIO</h4>
155
+
<div style="font-size: 0.875rem; color: #999; margin-bottom: 1rem;">
156
+
<span style="margin-right: 0.75rem;"><i class="fa-solid fa-calendar-alt"></i> Sat Aug 2</span>
164
157
<span><i class="fa-solid fa-clock"></i> 30 Sec Read</span>
165
158
</div>
166
-
<p class="mt-2 text-gray-700 leading-relaxed textbite-description">
159
+
<p style="margin-top: 0.5rem; color: #f0f0f0; line-height: 1.625;">
167
160
MBD is working on a new tool called MBDIO, it's a simple, easy & fast link shortener that will allow you to shorten links and share them.
168
161
</p>
169
162
<!-- This one doesn't have a link yet, so I've removed the anchor tag to prevent a broken link -->
···
171
164
</div>
172
165
173
166
<!-- Footer -->
174
-
<footer class="mt-12 pt-4 text-center text-gray-500 border-t border-gray-200">
175
-
<div class="flex justify-center space-x-6 mb-4 text-lg">
176
-
<a href="javascript:history.back()" class="text-gray-600 hover:text-indigo-600 transition duration-300"><i class="fa-solid fa-arrow-left"></i> Back</a>
177
-
<a href="/index.html" class="text-gray-600 hover:text-indigo-600 transition duration-300"><i class="fa-solid fa-house"></i> Home</a>
167
+
<footer style="margin-top: 3rem; padding-top: 1rem; text-align: center; color: #f0f0f0; border-top: 1px solid #444;">
168
+
<div style="display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; font-size: 1.125rem;">
169
+
<a href="javascript:history.back()" style="color: #f0f0f0; text-decoration: none;"><i class="fa-solid fa-arrow-left"></i> Back</a>
170
+
<a href="/index.html" style="color: #f0f0f0; text-decoration: none;"><i class="fa-solid fa-house"></i> Home</a>
178
171
</div>
179
172
<!-- Centered Iframe -->
180
-
<div class="flex justify-center mt-8">
181
-
<iframe src="https://status.madebydanny.uk/badge?theme=light" width="200" height="30" frameborder="0" scrolling="no" style="color-scheme: normal"></iframe>
173
+
<div style="display: flex; justify-content: center; margin-top: 2rem;">
174
+
<iframe src="https://status.madebydanny.uk/badge?theme=dark" width="200" height="30" frameborder="0" scrolling="no" style="color-scheme: normal"></iframe>
182
175
</div>
183
176
<p>
184
177
© 2024-<span id="currentYear"></span>
185
-
<a href="https://madebydanny.uk" class="hover:text-indigo-600 transition duration-300 font-medium">Made by Danny UK</a>
178
+
<a href="https://madebydanny.uk" style="color: #3cb878; font-weight: 600; text-decoration: none;">Made by Danny UK</a>
186
179
</p>
187
-
<p class="text-sm mt-1">
180
+
<p style="font-size: 0.875rem; margin-top: 0.25rem;">
188
181
by Daniel Morrisey
189
182
</p>
190
183
</footer>
···
198
191
199
192
// Get the search input and all project cards
200
193
const searchInput = document.getElementById('textbiteSearch');
201
-
const textbiteCards = document.querySelectorAll('.textbite-card');
194
+
const textbiteCards = document.querySelectorAll('#projectsList > div');
202
195
203
196
// Add a 'keyup' event listener to the search input
204
197
searchInput.addEventListener('keyup', (e) => {
···
208
201
// Loop through each textbite card to check for a match
209
202
textbiteCards.forEach(card => {
210
203
// Get the title and description text from the current card
211
-
const title = card.querySelector('.textbite-title').textContent.toLowerCase();
212
-
const description = card.querySelector('.textbite-description').textContent.toLowerCase();
204
+
const title = card.querySelector('h4').textContent.toLowerCase();
205
+
const description = card.querySelector('p').textContent.toLowerCase();
213
206
214
207
// Check if the search value is found in either the title or description
215
208
if (title.includes(searchValue) || description.includes(searchValue)) {
···
223
216
});
224
217
</script>
225
218
</div>
226
-
<app-info></app-info>
227
219
</body>
228
220
</html>