alivecomp/index.html at main · MatthewFeroz/alivecomp · GitHub

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
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matthew Feroz - Portfolio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="js/config.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="font-sans bg-white text-[#333] dark:bg-[#121212] dark:text-[#e0e0e0] w-full px-8 py-10 transition-[background-color,color] duration-200 ease-in-out">
    <div class="max-w-3xl mx-auto">
        <h1 class="text-3xl mb-3 font-semibold text-black dark:text-orange">Matthew Feroz</h1>

        <p class="mb-6 text-[#555] dark:text-[#b0b0b0]">
            Welcome to my portfolio! Here are some of my projects and links:
        </p>

        <div id="links-container" class="w-full grid grid-cols-1 gap-4 my-10">
            <!-- Links will be rendered here dynamically -->
        </div>

        <h2 class="text-2xl mt-8 mb-4 font-semibold text-orange dark:text-orange">projects</h2>

        <div id="projects-container" class="w-full grid grid-cols-1 md:grid-cols-2 gap-4 mb-10">
            <!-- Projects will be rendered here dynamically -->
        </div>

        <div id="footer-container"></div>
    </div>

    <script src="data/links.js"></script>
    <script src="data/projects.js"></script>
    <script src="js/components.js"></script>
    <script src="js/theme.js"></script>
    <script>
        // Render links, projects, and footer after DOM is loaded
        document.addEventListener('DOMContentLoaded', function() {
            renderPortfolioLinks('links-container');
            renderProjects('projects-container');
            const footerContainer = document.getElementById('footer-container');
            if (footerContainer) {
                footerContainer.innerHTML = renderFooter({
                    showSponsorLink: false
                });
            }
        });
    </script>
</body>
</html>