shnwazdeveloper.github.io/terminal.html at main · shnwazdeveloper/shnwazdeveloper.github.io · 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
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>shnwazdev | Terminal Resume</title>
        <link rel="stylesheet" href="styles.css">
        <!-- FontAwesome for icons -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <!-- Add Google Fonts for better typography -->
        <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap" rel="stylesheet">
        <!-- p5.js for Snake game -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
    </head>

    <body>
        <div class="terminal">
            <div class="terminal-header">
                <div class="terminal-buttons">
                    <span class="close"></span>
                    <span class="minimize"></span>
                    <span class="maximize"></span>
                </div>
                <div class="terminal-title">shnwazdev@portfolio: ~/resume</div>
                <div class="terminal-controls">
                    <div class="theme-selector">
                        <i class="fa-solid fa-palette" id="theme-toggle"></i>
                    </div>
                    <div class="language-selector">
                        <i class="fa-solid fa-globe" id="language-toggle"></i>
                    </div>
                </div>
            </div>
            <div class="terminal-container">
                <div class="terminal-content">
                    <div id="output"></div>
                    <div class="input-line">
                        <span class="prompt">➜</span>
                        <input type="text" id="command-input" autofocus />
                    </div>
                </div>
            </div>
            <div class="terminal-footer">
                <a href="about.html" class="resume-link"><i class="fas fa-file-alt"></i> View Resume</a>
                <a href="neo-resume.html" class="resume-link"><i class="fas fa-shapes"></i> Neo-Brutalism Resume</a>
            </div>
            <div class="context-menu">
                <div class="menu-item" data-action="split-h">Split Horizontally</div>
                <div class="menu-item" data-action="split-v">Split Vertically</div>
                <div class="menu-item" data-action="close-split">Close Split</div>
            </div>
        </div>

        <!-- Theme Selection Modal -->
        <div id="theme-modal" class="modal">
            <div class="modal-content">
                <span class="close-button">&times;</span>
                <h2>Select Theme</h2>
                <div class="theme-options">
                    <div class="theme-option" data-theme="default">
                        <div class="theme-preview default-theme"></div>
                        <span>Default</span>
                    </div>
                    <div class="theme-option" data-theme="dracula">
                        <div class="theme-preview dracula-theme"></div>
                        <span>Dracula</span>
                    </div>
                    <div class="theme-option" data-theme="solarized">
                        <div class="theme-preview solarized-theme"></div>
                        <span>Solarized</span>
                    </div>
                    <div class="theme-option" data-theme="nord">
                        <div class="theme-preview nord-theme"></div>
                        <span>Nord</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Language Selection Modal -->
        <div id="language-modal" class="modal">
            <div class="modal-content">
                <span class="close-button">&times;</span>
                <h2>Select Language</h2>
                <div class="language-options">
                    <div class="language-option" data-lang="en">English</div>
                    <div class="language-option" data-lang="de">Deutsch</div>
                    <div class="language-option" data-lang="fr">Français</div>
                    <div class="language-option" data-lang="it">Italiano</div>
                </div>
            </div>
        </div>

        <!-- Projects Showcase Modal -->
        <div id="projects-modal" class="modal">
            <div class="modal-content projects-modal-content">
                <span class="close-button">&times;</span>
                <h2>Projects</h2>
                <div class="projects-container">
                    <!-- Project cards will be added here dynamically -->
                </div>
            </div>
        </div>

        <!-- Skills Visualization Modal -->
        <div id="skills-modal" class="modal">
            <div class="modal-content skills-modal-content">
                <span class="close-button">&times;</span>
                <h2>Skills Visualization</h2>
                <div class="skills-container">
                    <!-- Skills visualization will be added here dynamically -->
                </div>
            </div>
        </div>

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

</html>