Skip to content

Commit a8dffbe

Browse files
MoistCodeMoistCode
committed
Forgot to commit my html
1 parent 4b51007 commit a8dffbe

1 file changed

Lines changed: 45 additions & 10 deletions

File tree

‎index.html‎

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -88,22 +88,22 @@
8888
flex-direction: column;
8989
align-items: center;
9090
padding: calc(var(--sizing-unit) * 20) calc(var(--sizing-unit) * 6);
91-
background-color: oklch(22.5% .006 244.69);
92-
color: oklch(0.65 0 0);
91+
background-color: darkslategrey;
92+
color: lightblue;
9393
font-family: monospace;
9494
font-size: large;
9595
}
9696

9797
main {
9898
display: flex;
9999
flex-direction: column;
100-
gap: calc(var(--sizing-unit) * 5);
101-
max-width: calc(var(--sizing-unit) * 180);
100+
gap: calc(var(--sizing-unit) * 4);
101+
max-width: calc(var(--sizing-unit) * 190);
102102

103103
@media screen and (min-width: 820px) {
104104
display: grid;
105-
grid-template-columns: calc(var(--sizing-unit) * 35) 1fr;
106-
gap: calc(var(--sizing-unit) * 4) calc(var(--sizing-unit) * 5);
105+
grid-template-columns: calc(var(--sizing-unit) * 45) 1fr;
106+
gap: calc(var(--sizing-unit) * 6) calc(var(--sizing-unit) * 8);
107107
grid-template-areas:
108108
". avatar-and-name"
109109
"section-titles-about about"
@@ -127,8 +127,13 @@
127127
}
128128

129129
.section-title {
130-
font-size: 1rem;
130+
font-size: 1.25rem;
131131
color: white;
132+
margin-top: 20px;
133+
134+
@media screen and (min-width: 820px) {
135+
margin-top: 0;
136+
}
132137
}
133138

134139
.section-title::before,
@@ -159,6 +164,9 @@
159164

160165
#technology {
161166
grid-area: technology;
167+
display: flex;
168+
flex-wrap: wrap;
169+
gap: calc(var(--sizing-unit) * 2);
162170
}
163171

164172
#section-titles-experience {
@@ -181,6 +189,11 @@
181189
color: white;
182190
}
183191

192+
.technology-icon {
193+
height: calc(var(--sizing-unit) * 14);
194+
width: calc(var(--sizing-unit) * 14);
195+
}
196+
184197
@media screen and (max-width: 820px) {
185198
.sr-only-mobile {
186199
position: absolute;
@@ -196,6 +209,7 @@
196209
}
197210
</style>
198211
<body>
212+
<!-- TODO: Light and dark mode? -->
199213
<main>
200214
<section id="avatar-and-name">
201215
<img
@@ -234,21 +248,42 @@ <h2 id="section-titles-technology" class="section-title">
234248
<code>technology</code>
235249
</h2>
236250
<section id="technology">
237-
<p>Technology</p>
251+
<!-- TODO: Add a toggle to toggle between text and icons -->
252+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/JavaScript.svg" alt="JavaScript logo" />
253+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/TypeScript.svg" alt="TypeScript logo" />
254+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/React.svg" alt="React logo" />
255+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/HTML5.svg" alt="HTML5 logo" />
256+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/CSS3.svg" alt="CSS3 logo" />
257+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/Git.svg" alt="Git logo" />
258+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/Next.js.svg" alt="Next.js logo" />
259+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/Astro.svg" alt="Astro logo" />
260+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/GraphQL.svg" alt="GraphQL logo" />
261+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/Node.js.svg" alt="Node.js logo" />
262+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/Rust.svg" alt="Rust logo" />
263+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/PHP.svg" alt="PHP logo" />
264+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/Python.svg" alt="Python logo" />
265+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/Figma.svg" alt="Figma logo" />
266+
267+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/LinkedIn.svg" alt="LinkedIn logo" />
268+
<img class="technology-icon" src="https://moistcode.github.io/assets/icons/GitHub.svg" alt="GitHub logo" />
238269
</section>
239270

240271
<h2 id="section-titles-experience" class="section-title">
241272
<code>experience</code>
242273
</h2>
243274
<section id="experience">
244-
<p>Experience</p>
275+
<p>
276+
I work, I live, I learn, I laugh, I cry, and I'm human. I forgot to add something here.
277+
</p>
245278
</section>
246279

247280
<h2 id="section-titles-contact" class="section-title">
248281
<code>contact</code>
249282
</h2>
250283
<section id="contact">
251-
<p>Contact</p>
284+
<p>
285+
I work, I live, I learn, I laugh, I cry, and I'm human. I forgot to add something here.
286+
</p>
252287
</section>
253288
</main>
254289
</body>

0 commit comments

Comments
 (0)