Skip to content

Commit d9503fe

Browse files
committed
chore: add click to Repo, demo
1 parent 1f0668a commit d9503fe

2 files changed

Lines changed: 138 additions & 36 deletions

File tree

generator/index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,28 @@ <h1>Terminal Portfolio Config Generator</h1>
4646
<code>terminal-config.js</code> file for your own terminal-style
4747
homepage.
4848
</p>
49+
<div class="page-header-links">
50+
<a
51+
href="https://github.com/PythonToGo/terminal-portfolio-template"
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
class="header-link-code"
55+
>
56+
<span class="header-link-prefix">$</span>
57+
<span class="header-link-command">open</span>
58+
<span class="header-link-label">GitHub</span>
59+
</a>
60+
<a
61+
href="https://pythontogo.github.io/terminal-portfolio-template/"
62+
target="_blank"
63+
rel="noopener noreferrer"
64+
class="header-link-code"
65+
>
66+
<span class="header-link-prefix">$</span>
67+
<span class="header-link-command">open</span>
68+
<span class="header-link-label">Demo</span>
69+
</a>
70+
</div>
4971
</header>
5072

5173
<section class="card">
@@ -188,6 +210,26 @@ <h2>Banner</h2>
188210
<button type="button" id="downloadBtn" disabled>
189211
Download terminal-config.js
190212
</button>
213+
<a
214+
href="https://github.com/PythonToGo/terminal-portfolio-template"
215+
target="_blank"
216+
rel="noopener noreferrer"
217+
class="header-link-code"
218+
>
219+
<span class="header-link-prefix">$</span>
220+
<span class="header-link-command">open</span>
221+
<span class="header-link-label">GitHub</span>
222+
</a>
223+
<a
224+
href="https://pythontogo.github.io/terminal-portfolio-template/"
225+
target="_blank"
226+
rel="noopener noreferrer"
227+
class="header-link-code"
228+
>
229+
<span class="header-link-prefix">$</span>
230+
<span class="header-link-command">open</span>
231+
<span class="header-link-label">Demo</span>
232+
</a>
191233
</div>
192234
</form>
193235
</section>

generator/style.css

Lines changed: 96 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,57 +11,117 @@ body {
1111
}
1212

1313
body {
14-
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
14+
padding: 10px 15px;
15+
min-height: 99%;
16+
width: min(1000px, 95vw);
17+
margin: 0 auto;
18+
color: #ecdcf9;
19+
background: #241634;
20+
font-family: cursor, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
21+
monospace;
1522
line-height: 1.5;
16-
color: #111827;
17-
background: #0f172a;
23+
overflow-x: hidden;
24+
font-size: min(18px, calc(1.1vw + 7px));
1825
}
1926

2027
.page {
2128
max-width: 960px;
2229
margin: 0 auto;
23-
padding: 24px 16px 40px;
30+
padding: 18px 16px 32px;
31+
border-radius: 10px;
32+
background: #1a1027;
33+
border: 1px solid rgba(201, 146, 246, 0.35);
34+
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
2435
}
2536

2637
.page-header {
2738
margin-bottom: 24px;
28-
color: #e5e7eb;
39+
color: #ecdcf9;
40+
}
41+
42+
.page-header-links {
43+
margin-top: 12px;
44+
display: flex;
45+
flex-wrap: wrap;
46+
gap: 8px;
2947
}
3048

3149
.page-header h1 {
32-
margin: 0 0 8px;
33-
font-size: 1.8rem;
50+
margin: 0 0 6px;
51+
font-size: 1.6rem;
52+
color: #ecdcf9;
53+
}
54+
55+
.page-header h1::before {
56+
content: "$ ";
57+
color: #c992f6;
3458
}
3559

3660
.page-header p {
3761
margin: 0;
3862
max-width: 640px;
39-
color: #d1d5db;
63+
color: #d9c8ff;
64+
}
65+
66+
.header-link-code {
67+
display: inline-flex;
68+
align-items: center;
69+
gap: 6px;
70+
padding: 4px 10px;
71+
border-radius: 6px;
72+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
73+
monospace;
74+
font-size: 0.8rem;
75+
text-decoration: none;
76+
color: #e7d0ff;
77+
background: #241634;
78+
border: 1px solid rgba(201, 146, 246, 0.6);
79+
transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease,
80+
box-shadow 0.15s ease;
81+
}
82+
83+
.header-link-code:hover {
84+
background: #2b183f;
85+
border-color: #c992f6;
86+
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.85);
87+
transform: translateY(-1px);
88+
}
89+
90+
.header-link-prefix {
91+
color: #8ae9c1;
92+
}
93+
94+
.header-link-command {
95+
color: #e5e7eb;
96+
}
97+
98+
.header-link-label {
99+
color: #93c5fd;
40100
}
41101

42102
.card {
43-
background: #020617;
44-
border-radius: 12px;
45-
padding: 20px 18px;
46-
margin-bottom: 18px;
47-
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.6);
48-
border: 1px solid rgba(148, 163, 184, 0.25);
103+
background: #140b21;
104+
border-radius: 8px;
105+
padding: 18px 16px;
106+
margin-bottom: 16px;
107+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
108+
border: 1px solid rgba(201, 146, 246, 0.35);
49109
}
50110

51111
.card h2 {
52112
margin-top: 0;
53113
margin-bottom: 12px;
54114
font-size: 1.25rem;
55-
color: #e5e7eb;
115+
color: #e7d0ff;
56116
}
57117

58118
.card p,
59119
.card li {
60-
color: #cbd5f5;
120+
color: #ecdcf9;
61121
}
62122

63123
.form-section {
64-
border-top: 1px solid rgba(148, 163, 184, 0.25);
124+
border-top: 1px solid rgba(201, 146, 246, 0.3);
65125
padding-top: 14px;
66126
margin-top: 14px;
67127
}
@@ -86,23 +146,23 @@ body {
86146
.field-row label {
87147
font-size: 0.85rem;
88148
margin-bottom: 4px;
89-
color: #9ca3af;
149+
color: #d3b9ff;
90150
}
91151

92152
.field-row input,
93153
.field-row textarea,
94154
.field-row select {
95155
border-radius: 8px;
96-
border: 1px solid rgba(148, 163, 184, 0.6);
156+
border: 1px solid rgba(201, 146, 246, 0.55);
97157
padding: 8px 10px;
98158
font-size: 0.95rem;
99-
background: #020617;
100-
color: #e5e7eb;
159+
background: #241634;
160+
color: #ecdcf9;
101161
}
102162

103163
.field-row input::placeholder,
104164
.field-row textarea::placeholder {
105-
color: #6b7280;
165+
color: #8b6fae;
106166
}
107167

108168
.field-row textarea {
@@ -115,10 +175,10 @@ body {
115175
font-size: 0.75rem;
116176
line-height: 1.2;
117177
padding: 12px;
118-
background: rgba(15, 23, 42, 0.6);
178+
background: #241634;
119179
border-radius: 8px;
120-
border: 1px solid rgba(148, 163, 184, 0.3);
121-
color: #94a3b8;
180+
border: 1px solid rgba(201, 146, 246, 0.5);
181+
color: #e7d0ff;
122182
margin: 0;
123183
overflow-x: auto;
124184
white-space: pre;
@@ -155,20 +215,20 @@ body {
155215
}
156216

157217
#generateBtn {
158-
background: linear-gradient(135deg, #4f46e5, #06b6d4);
159-
color: white;
160-
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.4);
218+
background: #c992f6;
219+
color: #241634;
220+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
161221
}
162222

163223
#generateBtn:hover {
164-
box-shadow: 0 12px 26px rgba(59, 130, 246, 0.5);
224+
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.9);
165225
transform: translateY(-1px);
166226
}
167227

168228
#downloadBtn {
169229
background: transparent;
170-
color: #e5e7eb;
171-
border: 1px solid rgba(148, 163, 184, 0.7);
230+
color: #e7d0ff;
231+
border: 1px solid rgba(201, 146, 246, 0.7);
172232
}
173233

174234
#downloadBtn:disabled {
@@ -179,20 +239,20 @@ body {
179239
.output {
180240
width: 100%;
181241
border-radius: 10px;
182-
border: 1px solid rgba(148, 163, 184, 0.6);
242+
border: 1px solid rgba(201, 146, 246, 0.6);
183243
padding: 10px;
184244
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
185245
font-size: 0.85rem;
186-
background: #020617;
187-
color: #e5e7eb;
246+
background: #241634;
247+
color: #ecdcf9;
188248
}
189249

190250
ol {
191251
padding-left: 20px;
192252
}
193253

194254
code {
195-
background: rgba(15, 23, 42, 0.8);
255+
background: #241634;
196256
padding: 2px 4px;
197257
border-radius: 4px;
198258
font-size: 0.85em;
@@ -203,7 +263,7 @@ code {
203263
top: 8px;
204264
right: 14px;
205265
font-size: 12px;
206-
color: #94a3b8;
266+
color: #e7d0ff;
207267
opacity: 0.8;
208268
pointer-events: none;
209269
}

0 commit comments

Comments
 (0)