PublicPortfolio/project1.html at main · Goodgui/PublicPortfolio · 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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Description</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body class="project-page">
    <a href="./index.html" class="back">
        ↪
    </a>

    <div class="project-page-container">

        <header>
            <h1>Starbase Grid Display Editor</h1>
        </header>

        <div class="project-about-container">
            <section class="project-about-section">
                <h2>About the Project</h2>
                <p>This is a web based editor designd to emulate the digital displays provided to the player inside of the
                    game
                    Starbase. The goal is to provide an easy to use, feature rich editor for designing graphics that can
                    be quickly imported using the game's native scripting language YOLOL. </p>

                <a href="https://github.com/Goodgui/GridDisplayEditor_Standalone" target="_blank" class="github-link">
                    View on GitHub
                </a>
            </section>
            <section class="project-about-section project-image-section">
                <img src="projectimage_griddisplay_outlines.png" alt="Project Screenshot">
            </section>
        </div>
        <section class="project-section">
            <h3>Features</h3>
            <ul>
                <li>Easy visual editing</li>
                <li>2D Copy, Cut, Paste and Move</li>
                <li>Undo/Redo</li>
                <li>Text pattern compression</li>
                <li>Export to ingame coding language YOLOL</li>
            </ul>
        </section>
        <section class="project-section">
            <h3>Technologies Used</h3>
            <div class="tech-chips">
                <span class="tech-chip">HTML, CSS and JavaScript</span>
                <span class="tech-chip">VS Code</span>
                <span class="tech-chip">GitHub Pages</span>
                <span class="tech-chip">Git</span>
                <span class="tech-chip">Github Copilot</span>
                <span class="tech-chip">GPT4o</span>
            </div>
        </section>
        <!-- <section class="project-section">
            <h3>Code Snippets</h3>
            <div class="codeblock-container">
                <pre class="codeblock">
                    <code class="codeblock-code">
                    // Example JavaScript snippet
                    function greet(name) {
                        return `Hello, ${name}!`;
                    }

                    console.log(greet('World'));
                    // Example JavaScript snippet
                    function greet(name) {
                        return `Hello, ${name}!`;
                    }

                    console.log(greet('World'));
                    // Example JavaScript snippet
                    function greet(name) {
                        return `Hello, ${name}!`;
                    }

                    console.log(greet('World'));
                    // Example JavaScript snippet
                    function greet(name) {
                        return `Hello, ${name}!`;
                    }

                    console.log(greet('World'));
                    // Example JavaScript snippet
                    function greet(name) {
                        return `Hello, ${name}!`;
                    }

                    console.log(greet('World'));
                    // Example JavaScript snippet
                    function greet(name) {
                        return `Hello, ${name}!`;
                    }

                    console.log(greet('World'));
                    // Example JavaScript snippet
                    function greet(name) {
                        return `Hello, ${name}!`;
                    }

                    console.log(greet('World'));
                    </code>
                </pre>
                <a> - code snippet description </a>
            </div>
            <div class="codeblock-container">
                <pre class="codeblock">
                    <code class="codeblock-code">
                    // Example JavaScript snippet
                    function greet(name) {
                        return `Hello, ${name}!`;                          89172387912873123789789137892789127898312789 89172387912873123789789137892789127898312789 89172387912873123789789137892789127898312789
                    }

                    console.log(greet('World'));
                    </code>
                </pre>
                <a> - code snippet description </a>
            </div>
        </section> -->

        <!-- <section class="project-section">
            <h3> Additional Information</h3>
        </section> -->
    </div>
</body>

<script src="BackgroundPattern.js"></script>

</html>