-
Notifications
You must be signed in to change notification settings - Fork 0
/
pmd.html
125 lines (110 loc) · 8.94 KB
/
pmd.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="robots" content="max-snippet:-1,max-image-preview:standard,max-video-preview:-1" />
<link rel="stylesheet" href="/style.css" />
<link rel="manifest" href="/manifest.webmanifest" />
<!-- SEO -->
<title>Piano Music Database - Derek Perry - derek-perry.com</title>
<meta name="description" content="Derek Perry - Interactive Design : Game, Graphic, and Web - derek-perry.com" />
<meta property="og:image" content="https://derek-perry.com/media/banner.jpg" />
<meta property="og:image:width" content="2560" />
<meta property="og:image:height" content="1440" />
<meta property="og:image:alt" content="Banner for derek-perry.com" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Piano Music Database - Derek Perry - derek-perry.com" />
<meta property="og:description" content="Derek Perry - Interactive Design : Game, Graphic, and Web - derek-perry.com" />
<meta property="og:site_name" content="Derek Perry - derek-perry.com" />
<meta property="og:url" content="https://derek-perry.com/pmd" />
<link rel="canonical" href="https://derek-perry.com/pmd" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@_derekperry" />
<meta name="twitter:title" content="Piano Music Database - Derek Perry - derek-perry.com" />
<meta name="twitter:description" content="Derek Perry - Interactive Design : Game, Graphic, and Web - derek-perry.com" />
<meta name="twitter:image" content="https://derek-perry.com/media/banner.jpg" />
<meta name="twitter:image:width" content="2560" />
<meta name="twitter:image:height" content="1440" />
<meta name="twitter:image:alt" content="Banner for derek-perry.com" />
<!-- Favicon -->
<meta name="theme-color" content="#689915" />
<link rel="icon" type="image/png" sizes="32x32" href="https://derek-perry.com/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://derek-perry.com/favicon/favicon-16x16.png" />
<link rel="mask-icon" href="https://derek-perry.com/favicon/safari-pinned-tab.svg" color="#689915" />
<link rel="shortcut icon" href="https://derek-perry.com/favicon/favicon.ico" />
<link rel="icon" href="https://derek-perry.com/favicon/icon-32x32.png" sizes="32x32" />
<link rel="icon" href="https://derek-perry.com/favicon/icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="180x180" href="https://derek-perry.com/favicon/apple-touch-icon.png" />
<link rel="apple-touch-icon" href="https://derek-perry.com/favicon/icon-180x180.png" />
<meta name="msapplication-TileImage" content="https://derek-perry.com/favicon/icon-270x270.png" />
<meta name="msapplication-TileColor" content="#689915" />
<meta name="msapplication-config" content="https://derek-perry.com/favicon/browserconfig.xml" />
<!-- Analytics (Plausible) -->
<script defer data-domain="derek-perry.com" src="https://plausible.io/js/plausible.js"></script>
</head>
<body id="pmd" role="main">
<header id="header" role="banner">
<a href="https://derek-perry.com" title="Derek Perry" id="headerlogo">
<picture>
<source srcset="/media/logo.webp" height="50px" width="50px" type="image/webp">
<source srcset="/media/logo.png" height="50px" width="50px" type="image/png"><img height="50px" width="50px" src="/media/logo.png" alt="Derek Perry's Logo">
</picture>
<h1>Derek Perry</h1>
</a>
<h2 id="headerdescription">
<a href="https://derek-perry.com" title="Interactive Design Works by Derek Perry">Interactive Design</a>: <span id="descroles"><a href="https://derek-perry.com#games" title="Games by Derek Perry">Game</a>, <a href="https://derek-perry.com#graphics" title="Graphics by Derek Perry">Graphic</a>, & <a href="https://derek-perry.com#websites" title="Websites by Derek Perry">Web</a></span>
</h2>
</header>
<main role="main">
<article id="work">
<section id="summary">
<h2>Piano Music Database</h2>
<p><em>May 3, 2020 - Present</em></p>
<ul>
<li>Website Design</li>
<li>Website Development</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Video Editing</li>
</ul>
</section>
<section id="software">
<h2>Software Used:</h2>
<p>Adobe Illustrator, Adobe Photoshop, HTML, CSS (<a href="https://tailwindcss.com" title="Visit Tailwind CSS at TailwindCSS.com" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>), JavaScript (<a href="https://nextjs.org" title="Visit Next.js at NextJS.org" target="_blank" rel="noopener noreferrer">Next.js</a>)</p>
</section>
<section id="overview">
<h2>Work Overview:</h2>
<p>Piano Music Database (PMD) is a free online tool that helps you easily & quickly find music for your piano students. Search for pieces that incorporate specific pedagogical concepts; filter your results by mood, theme, style, and more!</p>
<p>Initial versions of the website were made using <a href="https://WordPress.org" title="Visit WordPress at WordPress.org" target="_blank" rel="noopener noreferrer">WordPress</a> to test the feasibility of a piano music database website on mobile and desktop. Currently the website is a "<a href="https://nextjs.org" title="Visit Next.js at NextJS.org" target="_blank" rel="noopener noreferrer">Next.js</a> with <a href="https://tailwindcss.com" title="Visit Tailwind CSS at TailwindCSS.com" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>" PWA/website which is deployed from a <a href="https://github.com" title="Visit GitHub at github.com" target="_blank" rel="noopener noreferrer">GitHub</a> repository using <a href="https://netlify.com" title="Visit Netlify at netlify.com" target="_blank" rel="noopener noreferrer">Netlify</a>. The search engine is powered by <a href="https://typesense.org" title="Visit Typesense at Typesense.org" target="_blank" rel="noopener noreferrer">Typesense</a> and the work data is gathered from a <a href="https://strapi.io" title="Visit Strapi at Strapi.io" target="_blank" rel="noopener noreferrer">Strapi</a> API.</p>
<p>The current branding (logo, font, color, social media post/email newsletter images, banners, etc) is designed using Adobe Illustrator and Adobe Photoshop.</p>
<hr>
<img src="/media/pmd0_home.jpg" alt="Piano Music Database - Home Page">
<hr>
<img src="/media/pmd1_work.jpg" alt="Piano Music Database - Work Listing">
<hr>
<img src="/media/pmd2_search.jpg" alt="Piano Music Database - Search with Filters">
<hr>
<div class="marginvert"><a class="button" href="https://pianomusicdatabase.com" target="_blank" rel="noopener noreferrer" title="Visit Piano Music Database at PianoMusicDatabase.com">Go to PianoMusicDatabase.com</a></div>
</section>
</article>
</main>
<footer id="footer" role="contentinfo">
<section id="footerlinks">
<p>GitHub: <a href="https://github.com/derek-perry" target="_blank" rel="noopener noreferrer" title="derek-perry on GitHub">derek-perry</a></p>
<p>LinkedIn: <a href="https://linkedin.com/in/derek-perry" target="_blank" rel="noopener noreferrer" title="derek-perry on LinkedIn">derek-perry</a></p>
<p>YouTube: <a href="https://youtube.com/@derek-perry" target="_blank" rel="noopener noreferrer" title="@derek-perry on YouTube">@derek-perry</a></p>
<p>Twitch: <a href="https://twitch.tv/derekperry" target="_blank" rel="noopener noreferrer" title="derekperry on Twitch">derekperry</a></p>
<p>Twitter: <a href="https://twitter.com/_derekperry" target="_blank" rel="noopener noreferrer" title="_derekperry on Twitter">_derekperry</a></p>
<p>ArtStation: <a href="https://artstation.com/derekperry" target="_blank" rel="noopener noreferrer" title="derekperry on ArtStation">derekperry</a></p>
<p>Mastodon: <a href="https://mastodon.gamedev.place/@dp" target="_blank" rel="me" title="@dp on Mastodon.gamedev.place">@[email protected]</a></p>
<br>
<p>Email: <a href="mailto:[email protected]" target="_blank" title="Email Derek Perry (Work: [email protected])" rel="noopener">[email protected]</a></p>
</section>
<section id="footerlegal">
<p>© 2024 <a href="https://derek-perry.com" title="Derek Perry">Derek Perry</a> | <a href="/privacy" title="Privacy Policy">Privacy Policy</a></p>
</section>
</footer>
</body>
</html>