add landing page and routes

german-esquivel · german-esquivel · commit aba43081855a · 2024-08-13T19:30:19.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/app.js b/app.js
@@ -0,0 +1,39 @@
+const express = require('express');
+const path = require('path');
+const fs = require('fs');
+const app = express();
+
+// Define the path to the projects directory
+const projectsDir = path.join(__dirname, 'projects');
+
+// Serve the list of project directories as a JSON array
+app.get('/projects', (req, res) => {
+    fs.readdir(projectsDir, (err, files) => {
+        if (err) {
+            res.status(500).send('Unable to scan projects directory.');
+            return;
+        }
+        const projects = files.filter(file => fs.statSync(path.join(projectsDir, file)).isDirectory());
+        res.json(projects);
+    });
+});
+
+// Loop through each project folder and create a route for it
+fs.readdirSync(projectsDir).forEach(folder => {
+    const projectPath = path.join(projectsDir, folder);
+    if (fs.statSync(projectPath).isDirectory()) {
+        app.use(`/${folder}`, express.static(projectPath));
+    }
+});
+
+// Serve the landing page at the root
+app.get('/', (req, res) => {
+    res.sendFile(path.join(__dirname, 'index.html'));
+});
+
+// Start the server
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+    console.log(`Server is running on http://localhost:${PORT}`);
+});
+
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Projects</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin: 50px;
+            background-color: #f4f4f4;
+        }
+        h1 {
+            font-size: 3em;
+            margin-bottom: 20px;
+            color: #333;
+        }
+        ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        li {
+            margin: 10px 0;
+        }
+        a {
+            text-decoration: none;
+            font-size: 1.5em;
+            color: #3498db;
+            transition: color 0.3s ease;
+        }
+        a:hover {
+            color: #2c3e50;
+        }
+    </style>
+</head>
+<body>
+    <h1>Welcome to My Projects</h1>
+    <ul id="projects-list">
+        <!-- Links will be inserted here by the script below -->
+    </ul>
+
+    <script>
+        // Project folders will be added dynamically by the server (Express.js)
+        fetch('/projects')
+            .then(response => response.json())
+            .then(projects => {
+                const list = document.getElementById('projects-list');
+                projects.forEach(project => {
+                    const listItem = document.createElement('li');
+                    const link = document.createElement('a');
+                    link.href = `/${project}`;
+                    link.textContent = project.replace('_', ' ').toUpperCase();
+                    listItem.appendChild(link);
+                    list.appendChild(listItem);
+                });
+            })
+            .catch(error => console.error('Error fetching project list:', error));
+    </script>
+</body>
+</html>
+
diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "html-css-javascript-projects-for-beginners",
+  "version": "1.0.0",
+  "description": "This is the source code of the website: <a href=\"https://100jsprojects.com\" style=\"background-color: #1a73e8; color: white; font-weight: bold; padding: 10px 20px; border-radius: 5px; text-decoration: none;\">100 HTML CSS JavaScript Projects</a> <div>   Visit <a href=\"https://100jsprojects.com\">100jsprojects.com</a> to preview the projects.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.19.2"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
