Skip to content

Commit f29d497

Browse files
tutosrivetutosrive
committed
Update site, add the new Project Coming Soon 😁
1 parent dd85fb5 commit f29d497

File tree

3 files changed

+94
-8
lines changed

3 files changed

+94
-8
lines changed

‎index.html‎

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,60 @@
6666
</script>
6767
</head>
6868
<body class="bg-white dark:bg-gray-900 dark:text-gray-100 text-gray-800 transition-colors duration-300 min-h-screen flex flex-col dark">
69+
<!-- New Project! -->
70+
<div class="flex-1 flex flex-col items-center w-full">
71+
<h2 class="text-center font-bold mb-10 text-2xl">Stay tuned for updates</h2>
72+
<div id="new-project" class="lg:w-[90vh] w-[90vw] rounded-xl shadow-xl shadow-black px-10">
73+
<div class="pswp-gallery" id="my-gallery">
74+
<div class="flex justify-center mb-4">
75+
<a href="https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/pymd/logo-pymd-2.png" data-pswp-width="1200" data-pswp-height="1200" target="_blank">
76+
<img
77+
class="max-w-[300px] h-auto object-contain drop-shadow-2xl drop-shadow-black"
78+
src="https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/pymd/logo-pymd-2.png"
79+
alt="Logo featuring a green snake curled into a circular shape, wearing a red necktie, set against a dark background."
80+
/>
81+
</a>
82+
</div>
83+
<div id="new-project-description">
84+
<p>
85+
Feed your files to a snake in a tie &#x1F601;: A <a href="https://doc.qt.io/qtforpython/">PySide6</a> GUI wrapped around <a href="https://github.com/microsoft/markitdown">Markitdown</a>: choose in
86+
<a href="https://www.adobe.com/acrobat/resources/document-files/docx.html">DOCX</a>, <a href="https://www.dhiwise.com/post/understanding-html-file-types-a-comprehensive-guide">HTML</a>, <a href="https://www.dropbox.com/resources/what-is-a-zip-file">ZIP</a>,
87+
<a href="https://www.adobe.com/uk/acrobat/resources/document-files/ebook-files/epub.html">EPUB</a> and more, and out pops clean, future-proof <a href="https://www.adobe.com/uk/acrobat/resources/document-files/text-files/md.html">.md</a> — no terminal required &#x1F680;.
88+
</p>
89+
</div>
90+
<div class="carrusel-img h-full grid grid-rows-1 auto-cols-max grid-flow-col gap-4 overflow-x-auto overflow-y-hidden snap-x snap-mandatory w-full py-4">
91+
<a href="https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/pymd/previews-beta/1.png" data-pswp-width="927" data-pswp-height="662" target="_blank">
92+
<img
93+
title="Preview 1"
94+
class="w-[200px] h-auto object-contain"
95+
src="https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/pymd/previews-beta/1.png"
96+
alt="Screenshot of the 'Select Language' modal: a dark, centred dialog listing 'English - GB' with a UK flag and 'Español - CO' with a Colombian flag, overlaid on a faint circular snake-and-tie logo background."
97+
/>
98+
</a>
99+
<a href="https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/pymd/previews-beta/2.png" data-pswp-width="934" data-pswp-height="665" target="_blank">
100+
<img
101+
title="Preview 2"
102+
class="w-[200px] h-auto object-contain"
103+
src="https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/pymd/previews-beta/2.png"
104+
alt="Screenshot of the main interface: left panel showing Markdown script ('# PYBET - Video Presentation Narration Script…'), right panel blurred preview, and a circular 'Convert' button at the bottom, all on a dark background with the snake-and-tie logo subtly visible behind."
105+
/>
106+
</a>
107+
108+
<a href="https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/pymd/previews-beta/3.png" data-pswp-width="926" data-pswp-height="661" target="_blank">
109+
<img
110+
title="Preview 3"
111+
class="w-[200px] h-auto object-contain"
112+
src="https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/pymd/previews-beta/3.png"
113+
alt="Screenshot of the welcome screen: a centred circular logo of a green snake wearing a red tie; above it the heading 'Welcome to [Name]'; below it a list of keyboard shortcuts ('Ctrl + O', 'Ctrl + L', 'Ctrl + T', 'Ctrl + W'), all in white text on a dark backdrop."
114+
/>
115+
</a>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
121+
<hr class="border-gray-800 border-2 my-2 w-full" />
122+
69123
<!-- Header -->
70124
<header class="w-full flex justify-between items-center p-6 flex-shrink-0">
71125
<div class="w-full text-center">
@@ -129,9 +183,14 @@ <h1 class="text-3xl font-bold inline">
129183
</svg>
130184
</a>
131185
</div>
186+
187+
<hr class="border-gray-800 border-2 my-2 w-full" />
188+
132189
<!-- Repos -->
133-
<section id="carrusel-repos" class="h-full grid grid-rows-1 auto-cols-max grid-flow-col gap-4 overflow-x-auto overflow-y-hidden snap-x snap-mandatory w-full py-4">
190+
<section class="w-full">
191+
<header><h2 class="text-center text-3xl mb-10">Projects Repositories</h2></header>
134192
<!-- Repos will be injected here -->
193+
<div id="repositories-container" class="carrusel-img h-full grid grid-rows-1 auto-cols-max grid-flow-col gap-4 overflow-x-auto overflow-y-hidden snap-x snap-mandatory w-full py-4"></div>
135194
</section>
136195

137196
<!-- Description page -->
@@ -155,7 +214,7 @@ <h2 class="block font-bold mb-5">Followers</h2>
155214

156215
<!-- Footer -->
157216
<footer class="w-full mt-0 text-center flex-shrink-0 fixed bottom-0 left-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 py-2 z-10">
158-
<p class="text-sm">© 2025 Dev2Forge. All rights reserved.</p>
217+
<p class="text-sm">©2025 Dev2Forge.</p>
159218
</footer>
160219

161220
<!-- Ko-Fi Script - Floating Button -->

‎src/assets/css/index.css‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import './tables.css';
2+
@import url('https://unpkg.com/photoswipe@5.2.2/dist/photoswipe.css');
23
hr {
34
margin: 20px 0 !important;
45
}
@@ -31,10 +32,10 @@ code {
3132
width: 80vh;
3233
}
3334

34-
#carrusel-repos::-webkit-scrollbar {
35+
.carrusel-img::-webkit-scrollbar {
3536
display: none;
3637
}
37-
#carrusel-repos {
38+
.carrusel-img {
3839
scrollbar-width: none;
3940
-ms-overflow-style: none;
4041
}
@@ -70,3 +71,12 @@ code {
7071
.btn-repo-link:hover img {
7172
filter: brightness(0) invert(1);
7273
}
74+
75+
.preview-project-img {
76+
border-radius: 20px;
77+
box-shadow: 0 0 15px #2000ad;
78+
}
79+
80+
#new-project-description a {
81+
color: rgb(165, 155, 255);
82+
}

‎src/assets/js/main.js‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe/dist/photoswipe-lightbox.esm.js';
2+
13
document.addEventListener('DOMContentLoaded', () => {
24
loadDescription();
35
loadRepos();
@@ -14,15 +16,15 @@ async function loadDescription() {
1416
const description = document.querySelector('#description');
1517
// description.innerHTML = res.bio || 'No description available';
1618
description.innerHTML = html_readme || '';
17-
__formatHTML(description);
19+
await __formatHTML(description);
1820
}
1921

2022
/**
2123
* Load repositories from GitHub API and display them in a grid.
2224
* Each repository is displayed in a card format with its name, description, and a link to the repo.
2325
*/
2426
async function loadRepos() {
25-
const container = document.querySelector('#carrusel-repos');
27+
const container = document.querySelector('#repositories-container');
2628
const configsWeb = await loadConfigs();
2729
try {
2830
const res = await fetch('https://api.github.com/users/Dev2Forge/repos');
@@ -78,22 +80,27 @@ async function loadConfigs() {
7880
return data;
7981
}
8082

81-
function __formatHTML(container) {
83+
async function __formatHTML(container) {
8284
// Set scrollable tables within the container
8385
__setScrollableTables(container);
8486

8587
// Add event listener to handle click events on links
8688
const titleMD = document.querySelector('#dev2forge');
89+
const kofi = document.querySelector('#ko-fi-gitub');
8790
const thumbnail = document.querySelector('#thumbnail-dev2forge');
88-
// document.querySelector('#title-page').innerHTML = titleMD.innerHTML;
91+
// document.querySelector('[id*="kofi-widget-overlay"]').remove();
92+
8993
titleMD.remove();
94+
kofi.remove();
9095
container.querySelectorAll('img').forEach(async (img) => {
9196
const config = await loadConfigs();
9297
if (img.src === config.thumbnail1) {
9398
thumbnail.src = img.src;
9499
img.remove();
95100
}
96101
});
102+
103+
imagePreview();
97104
}
98105

99106
/**
@@ -109,3 +116,13 @@ function __setScrollableTables(container) {
109116
wrapper.appendChild(table);
110117
});
111118
}
119+
120+
function imagePreview() {
121+
const lightbox = new PhotoSwipeLightbox({
122+
gallery: '#my-gallery',
123+
children: 'div>a',
124+
pswpModule: () => import('https://unpkg.com/photoswipe'),
125+
});
126+
127+
lightbox.init();
128+
}

0 commit comments

Comments
 (0)