-
Notifications
You must be signed in to change notification settings - Fork 0
/
beatopia.html
95 lines (79 loc) · 4.07 KB
/
beatopia.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="project.css">
<link rel="stylesheet" href="palette-beatopia.css">
<link rel="icon" href="logo.png" type="image/png">
<title>Portfolio - Nour Rajeh</title>
</head>
<body>
<nav>
<p> Viewing on your phone? Try rotating for a better view</p>
</nav>
<header>
<h2 class="project-center-title">Beatopia: AI-Powered Musical Productivity Tool</h2>
</header>
<main>
<div class="desc-box">
An ambience tuner that allows users to create immersive mixes by blending built-in beats with calming nature sounds. Recommendations in the Discover page are generated using a trained supervised learning ML model in order to match users moods and preferences based on their listening habits. The distraction-free expanded view of the music player includes a timer, with both tools built from scratch.
</div>
<button id="toc-button">☰</button>
<div id="toc" class="toc">
<ul>
<li><a href="#">Back to Top</a></li>
<li><a href="#skills">Earned Skills</a></li>
<li><a href="#sneak">Sneak Peak</a></li>
<li><a href="#figma">Figma Protoype</a></li>
<li><a href="#repo">Github Repo</a></li>
<!-- <li><a href="#canva">Presentation</a></li> -->
<!-- <li><a href="#report">Report PDF</a></li> -->
</ul>
</div>
<p> <b>Other Contributors</b>: <i>Edy bou Moussa</i></p>
<h3 id="skills"> Skills Acquired (So far)</h3>
<ul>
<li> Frontend with <b>React.js</b> framework</li>
<li> <b>Database design</b>, <b>CDM</b>, <b>LDM</b>, implementation using <b>SQLite</b> and <b>normalization</b></li>
<li> <b>Machine learning</b> algorithms like <b>Kth-Nearest Neighbor</b> for music recommendation</li>
<li> <b>Threads</b>, <b>locks</b> and <b>asynchronous programming</b> for concurrent execution using <b>Python</b></li>
<li> <b>Audiofile manipulation</b>, <b>mixing</b> and <b>playback</b> using Python's <b>PyDub</b> and <b>simpleaudio</b> libraries</li>
</ul>
<h3 id="sneak"> Peak at the Project </h3>
<p class="sneak-desc"> Project under construction, stay tuned :)</p>
<!-- <figure>
<figcaption class="caption"> Landing Page : </figcaption>
<img src="leaf-landing.png" alt="leafcards landing page" class="snapshot">
</figure>
-->
<h3 id="figma">Figma Prototype</h3>
<iframe class="prototype" src="https://embed.figma.com/design/TN1nrm54JA3Pk0bsiuI7AI/Beatopia-Landing?node-id=0-1&embed-host=share" allowfullscreen></iframe>
<h3 id="repo"> Github Repo </h3>
<a href="https://github.com/itsnourr/Beatopia" class="bookmark" target="_blank">
<div class="bookmark-container">
<img src="beatop-logo.png" alt="Bookmark Icon">
<span>Check out the source code for this project in this repo: <b>github.com/itsnourr/Beatopia</b></span>
</div>
</a>
<!-- <h3 id="canva"> Canva Presentation </h3>
<div class="canva">
<iframe loading="lazy" class="canva-iframe"
src="https://www.canva.com/design/DAGDU1S66Zs/uwxOU26TPezi6CKBk4YMLg/view?embed"
allowfullscreen="allowfullscreen" allow="fullscreen">
</iframe>
</div>
<h3 id="report"> Report PDF </h3>
<a href="Dual Sensor Alarm - Full Report.pdf" class="bookmark" target="_blank">
<div class="bookmark-container">
<img src="pdf-logo.png" alt="Bookmark Icon">
<span>Check out the tehnical report for this project <b>here</b></span>
</div>
</a> -->
</main>
<footer id="contact">
<p>Contact me at: [email protected]</p>
</footer>
<script src="slider-script.js"></script>
</body>
</html>