Skip to content

Commit abcff48

Browse files
AlexDeveloperUwUAlexDeveloperUwU
committed
feat(frontend): ✨ New page that contains media platforms
1 parent 9f3e1ab commit abcff48

File tree

5 files changed

+117
-75
lines changed

5 files changed

+117
-75
lines changed

‎utils/json/contentRoutes.json

+5
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@
2929
"view": "links",
3030
"title": "Enlaces",
3131
"folder": "content/links"
32+
},
33+
{
34+
"view": "mediacontent",
35+
"title": "Plataformas de contenido",
36+
"folder": "content/mediacontent"
3237
}
3338
]
3439
}

‎views/admin/calendar.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
<i class="fa-solid fa-calendar-days mr-3 text-gray-300"></i>
8686
Todos los Eventos
8787
</h3>
88-
<div id="eventsGrid" class="grid gap-4">
88+
<div id="eventsGrid" class="grid gap-4 content-selectable">
8989
</div>
9090
</div>
9191
</div>

‎views/content/index.ejs

-73
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,6 @@
2121
<a href="https://bsky.app/profile/alexdevuwu.com" aria-label="BlueSky" class="text-lg text-gray-300 transition duration-300 ease-in-out transform hover:text-white hover:scale-110">
2222
<i class="fab fa-bluesky"></i>
2323
</a>
24-
<a href="https://twitch.tv/alexdevuwu" aria-label="Twitch" class="text-lg text-gray-300 transition duration-300 ease-in-out transform hover:text-white hover:scale-110">
25-
<i class="fab fa-twitch"></i>
26-
</a>
27-
<a href="https://www.youtube.com/channel/UCxcD9py3y1df8CWzT5VsZMw" aria-label="YouTube" class="text-lg text-gray-300 transition duration-300 ease-in-out transform hover:text-white hover:scale-110">
28-
<i class="fab fa-youtube"></i>
29-
</a>
30-
<a href="https://kick.com/alexdevuwu" aria-label="Kick" class="text-lg text-gray-300 transition duration-300 ease-in-out transform hover:text-white hover:scale-110">
31-
<i class="fa-brands fa-kickstarter-k"></i>
32-
</a>
3324
</div>
3425
</div>
3526
</div>
@@ -54,69 +45,6 @@
5445
<div id="projects-container" class="space-y-4">
5546
</div>
5647
</section>
57-
<section class="mx-auto mt-10 max-w-6xl text-left">
58-
<h3 class="mb-4 text-2xl font-bold flex items-center">
59-
<i class="fas fa-share-alt mr-3 text-gray-300"></i>
60-
Plataformas de contenido
61-
</h3>
62-
<div class="space-y-4">
63-
<a href="/?view=twitch" class="block rounded-lg bg-gray-800 p-6 hover:bg-blue-700">
64-
<div class="flex items-center">
65-
<i class="fab fa-twitch mr-3 text-gray-300"></i>
66-
<div>
67-
<p class="font-bold text-gray-100">Twitch</p>
68-
<p class="text-gray-300 font-agrandir">Aquí realizo todos mis directos, desde gaming y just chatting hasta directos más específicos sobre tecnología como montaje de ordenadores.</p>
69-
</div>
70-
</div>
71-
</a>
72-
<a href="/?view=kick" class="block rounded-lg bg-gray-800 p-6 hover:bg-blue-700">
73-
<div class="flex items-center">
74-
<i class="fa-brands fa-kickstarter-k mr-3 text-gray-300"></i>
75-
<div>
76-
<p class="font-bold text-gray-100">Kick</p>
77-
<p class="text-gray-300 font-agrandir">Plataforma donde realizo restreamings de mis directos de Twitch, la utilizo como plataforma secundaria.</p>
78-
</div>
79-
</div>
80-
</a>
81-
<a href="/?view=youtube" class="block rounded-lg bg-gray-800 p-6 hover:bg-blue-700">
82-
<div class="flex items-center">
83-
<i class="fab fa-youtube mr-3 text-gray-300"></i>
84-
<div>
85-
<p class="font-bold text-gray-100">YouTube</p>
86-
<p class="text-gray-300 font-agrandir">Aquí subo contenido más "elaborado", como tutoriales y vídeos sobre programación o sistemas. También podría subir resubidas editadas de mis directos.</p>
87-
</div>
88-
</div>
89-
</a>
90-
</div>
91-
</section>
92-
<section id="calendarSectionId" class="mx-auto mt-10 max-w-6xl text-left">
93-
<h3 class="mb-4 text-2xl font-bold flex items-center">
94-
<i class="fas fa-calendar mr-3 text-gray-300"></i>
95-
Calendario
96-
</h3>
97-
<div class="space-y-4">
98-
<div id="toggleCalendarCard" class="block rounded-lg bg-gray-800 p-6 cursor-pointer transition-colors duration-200">
99-
<div class="flex items-center">
100-
<i class="fa-solid fa-calendar mr-3 text-gray-300"></i>
101-
<div>
102-
<p id="toggleText" class="font-bold text-gray-100">Mostrar Calendario</p>
103-
</div>
104-
</div>
105-
</div>
106-
<div id="eventDetails" class="rounded-lg bg-gray-800 p-6 hover:bg-blue-700 hidden">
107-
<div class="flex items-center">
108-
<i id="platformIcon" class="fab fa-youtube mr-3 text-gray-300"></i>
109-
<div>
110-
<p id="platformName" class="font-bold text-gray-100 font-agrandir">PLATAFORMA</p>
111-
<p id="eventDescription" class="text-gray-300 font-agrandir">DESCRIPCIÓN</p>
112-
</div>
113-
</div>
114-
</div>
115-
<div id="calendarCard" class="rounded-lg bg-gray-800 p-6 hidden">
116-
<div id="calendar" class="mt-4"></div>
117-
</div>
118-
</div>
119-
</section>
12048
<section class="mx-auto mt-10 max-w-6xl text-left">
12149
<h3 class="mb-4 text-2xl font-bold flex items-center">
12250
<i class="fas fa-folder-open mr-3 text-gray-300"></i>
@@ -188,7 +116,6 @@
188116
</div>
189117
</section>
190118
<script src="/js/minified/content/birthday.js"></script>
191-
<script src="/js/minified/content/calendar.js"></script>
192119
<script src="/js/minified/content/form.js" defer></script>
193120
<script src="/js/minified/content/loadProjects.js"></script>
194121
<script src="/js/minified/content/copyContact.js" defer></script>

‎views/content/mediacontent.ejs

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
2+
<section class="mx-auto mt-10 max-w-6xl text-left">
3+
<div class="items-left flex flex-col">
4+
<div class="items-left flex text-left">
5+
<div class="relative">
6+
<img id="profileImage" src="/img/logoSmall.webp" alt="AlexDevUwU" class="h-24 w-24 rounded-full border-4 border-blue-400" />
7+
</div>
8+
<div class="ml-4">
9+
<h2 class="text-3xl font-semibold">Alex Verde</h2>
10+
<p class="text-base text-blue-400">@alexdevuwu</p>
11+
<div id="icons" class="mt-2 flex space-x-4">
12+
<a href="https://x.com/AlexDevUwU" aria-label="Twitter" class="text-lg text-gray-300 transition duration-300 ease-in-out transform hover:text-white hover:scale-110">
13+
<i class="fab fa-twitter"></i>
14+
</a>
15+
<a href="https://bsky.app/profile/alexdevuwu.com" aria-label="BlueSky" class="text-lg text-gray-300 transition duration-300 ease-in-out transform hover:text-white hover:scale-110">
16+
<i class="fab fa-bluesky"></i>
17+
</a>
18+
<a href="https://twitch.tv/alexdevuwu" aria-label="Twitch" class="text-lg text-gray-300 transition duration-300 ease-in-out transform hover:text-white hover:scale-110">
19+
<i class="fab fa-twitch"></i>
20+
</a>
21+
<a href="https://www.youtube.com/channel/UCxcD9py3y1df8CWzT5VsZMw" aria-label="YouTube" class="text-lg text-gray-300 transition duration-300 ease-in-out transform hover:text-white hover:scale-110">
22+
<i class="fab fa-youtube"></i>
23+
</a>
24+
<a href="https://kick.com/alexdevuwu" aria-label="Kick" class="text-lg text-gray-300 transition duration-300 ease-in-out transform hover:text-white hover:scale-110">
25+
<i class="fa-brands fa-kickstarter-k"></i>
26+
</a>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
<p class="mx-auto mt-10 max-w-6xl text-left font-agrandir">¡Te doy la bienvenida a mi sección de plataformas de contenido! <br> La verdad es que no suelo hacer mucha cosa por aquí, ya que mi tiempo libre lo dedico a programar e investigar más cosas, pero lo cierto es que nunca se sabe cuando me dará la venada!</p>
32+
</section>
33+
<section class="mx-auto mt-10 max-w-6xl text-left">
34+
<h3 class="mb-4 text-2xl font-bold flex items-center">
35+
<i class="fas fa-share-alt mr-3 text-gray-300"></i>
36+
Plataformas de contenido
37+
</h3>
38+
<div class="space-y-4">
39+
<a href="/?view=twitch" class="block rounded-lg bg-gray-800 p-6 hover:bg-blue-700">
40+
<div class="flex items-center">
41+
<i class="fab fa-twitch mr-3 text-gray-300"></i>
42+
<div>
43+
<p class="font-bold text-gray-100">Twitch</p>
44+
<p class="text-gray-300 font-agrandir">Aquí realizo todos mis directos, desde gaming y just chatting hasta directos más específicos sobre tecnología como montaje de ordenadores.</p>
45+
</div>
46+
</div>
47+
</a>
48+
<a href="/?view=youtube" class="block rounded-lg bg-gray-800 p-6 hover:bg-blue-700">
49+
<div class="flex items-center">
50+
<i class="fab fa-youtube mr-3 text-gray-300"></i>
51+
<div>
52+
<p class="font-bold text-gray-100">YouTube</p>
53+
<p class="text-gray-300 font-agrandir">Aquí subo contenido más "elaborado", como tutoriales y vídeos sobre programación o sistemas. También podría subir resubidas editadas de mis directos.</p>
54+
</div>
55+
</div>
56+
</a>
57+
<a href="/?view=kick" class="block rounded-lg bg-gray-800 p-6 hover:bg-blue-700">
58+
<div class="flex items-center">
59+
<i class="fa-brands fa-kickstarter-k mr-3 text-gray-300"></i>
60+
<div>
61+
<p class="font-bold text-gray-100">Kick</p>
62+
<p class="text-gray-300 font-agrandir">Plataforma donde realizo restreamings de mis directos de Twitch, la utilizo como plataforma secundaria.</p>
63+
</div>
64+
</div>
65+
</a>
66+
</div>
67+
</section>
68+
<section id="calendarSectionId" class="mx-auto mt-10 max-w-6xl text-left">
69+
<h3 class="mb-4 text-2xl font-bold flex items-center">
70+
<i class="fas fa-calendar mr-3 text-gray-300"></i>
71+
Calendario
72+
</h3>
73+
<div class="space-y-4">
74+
<div id="toggleCalendarCard" class="block rounded-lg bg-gray-800 p-6 cursor-pointer transition-colors duration-200">
75+
<div class="flex items-center">
76+
<i class="fa-solid fa-calendar mr-3 text-gray-300"></i>
77+
<div>
78+
<p id="toggleText" class="font-bold text-gray-100">Mostrar Calendario</p>
79+
</div>
80+
</div>
81+
</div>
82+
<div id="eventDetails" class="rounded-lg bg-gray-800 p-6 hover:bg-blue-700 hidden">
83+
<div class="flex items-center">
84+
<i id="platformIcon" class="fab fa-youtube mr-3 text-gray-300"></i>
85+
<div>
86+
<p id="platformName" class="font-bold text-gray-100 font-agrandir">PLATAFORMA</p>
87+
<p id="eventDescription" class="text-gray-300 font-agrandir">DESCRIPCIÓN</p>
88+
</div>
89+
</div>
90+
</div>
91+
<div id="calendarCard" class="rounded-lg bg-gray-800 p-6 hidden">
92+
<div id="calendar" class="mt-4"></div>
93+
</div>
94+
</div>
95+
</section>
96+
<script src="/js/minified/content/calendar.js"></script>
97+
<script src="/js/minified/content/form.js" defer></script>
98+
<script src="/js/minified/content/loadProjects.js"></script>
99+
<script src="/js/minified/content/copyContact.js" defer></script>
100+
<%- include(`../scripts.ejs`) %>
101+
</main>

‎views/extras/index.ejs

+10-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@
1515
</div>
1616
</div>
1717
</a>
18+
<a href="/?view=mediacontent" class="block rounded-lg bg-gray-800 p-6 hover:bg-blue-700">
19+
<div class="flex items-center">
20+
<i class="fas fa-share-alt mr-3 text-gray-300"></i>
21+
<div>
22+
<p class="font-bold text-gray-100">Plataformas de contenido</p>
23+
<p class="text-gray-300 font-agrandir">Aquí puedes encontrar mis plataformas de contenido. Por lo general suelen estar inactivas, ¿pero quién sabe? Lo mismo algún día me da por crear algún contenido!</p>
24+
</div>
25+
</div>
26+
</a>
1827
<a href="/?view=links" class="block rounded-lg bg-gray-800 p-6 hover:bg-blue-700">
1928
<div class="flex items-center">
2029
<i class="fas fa-link mr-3 text-gray-300"></i>
@@ -25,7 +34,7 @@
2534
</div>
2635
</a>
2736
</div>
28-
37+
2938
</section>
3039
<%- include(`../scripts.ejs`) %>
3140
</main>

0 commit comments

Comments
 (0)