Skip to content

Commit 19d68bd

Browse files
threequartersjohnthreequartersjohn
committed
first commit
1 parent 5c37e87 commit 19d68bd

File tree

7 files changed

+523
-0
lines changed

7 files changed

+523
-0
lines changed

‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## About
2+
3+
Personal page built with hand crafted, artisanal HTML, CSS and a bit of Javascript.
4+
5+
Built with as little parts as possible to ensure flexibility and lightness.

‎index.css

+326
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
/* variables */
2+
3+
:root {
4+
/* Themes: */
5+
/* --dark: absolute dark theme */
6+
/* --gray: not quite so dark */
7+
/* --light: light theme */
8+
9+
/* Colors */
10+
--dark-bg-color: #000;
11+
--dark-text-color: #fff;
12+
--dark-accent-color: #FA8072 ;
13+
14+
--gray-bg-color: #2b2b2b;
15+
--gray-text-color: #ddffe4;
16+
--gray-accent-color: #4562da;
17+
18+
--light-bg-color: #eee4e4;
19+
--light-text-color: #770064;
20+
--light-accent-color: #FFB300;
21+
22+
/* Font sizes */
23+
--small-font-size: 14px;
24+
--medium-font-size: 15px;
25+
--large-font-size: 16px;
26+
27+
/* Initial color values */
28+
--bg-color: var(--dark-bg-color);
29+
/* --bg-color: var(--gray-bg-color); */
30+
/* --bg-color: var(--light-bg-color); */
31+
--text-color: var(--dark-text-color);
32+
/* --text-color: var(--gray-text-color); */
33+
/* --text-color: var(--light-text-color); */
34+
--accent-color: var(--dark-accent-color);
35+
/* --accent-color: var(--gray-accent-color); */
36+
/* --accent-color: var(--light-accent-color); */
37+
38+
/* Initial color value */
39+
--font-size: var(--large-font-size);
40+
}
41+
42+
@media (prefers-color-scheme: light) {
43+
:root {
44+
--bg-color: var(--light-bg-color);
45+
--text-color: var(--light-text-color);
46+
--accent-color: var(--light-accent-color);
47+
}
48+
}
49+
50+
/* Fonts */
51+
52+
@font-face {
53+
font-family: 'Lora';
54+
font-weight: 400;
55+
src: url('./public/fonts/lora-variable.ttf');
56+
}
57+
58+
/* Animations */
59+
60+
@keyframes wave {
61+
from {
62+
transform: translateY(0);
63+
}
64+
25% {
65+
transform: translateY(-2px);
66+
}
67+
50% {
68+
transform: translateY(0);
69+
}
70+
75% {
71+
transform: translateY(2px);
72+
}
73+
to {
74+
transform: translateY(0);
75+
}
76+
}
77+
78+
html {
79+
font-size: var(--font-size);
80+
}
81+
82+
body {
83+
background-color: var(--bg-color);
84+
color: var(--text-color);
85+
transition: 0.3s ease-in-out;
86+
font-family: 'Lora';
87+
}
88+
89+
main {
90+
height: 100vh;
91+
display: flex;
92+
flex-direction: row;
93+
align-items: center;
94+
justify-content: center;
95+
}
96+
97+
.layout {
98+
display: flex;
99+
}
100+
101+
img {
102+
width: 100%;
103+
height: 100%;
104+
}
105+
106+
.imageContainer {
107+
width: 20rem;
108+
position: relative;
109+
margin-right: 3rem;
110+
}
111+
112+
.imageContainer::before {
113+
content: "";
114+
display: block;
115+
position: absolute;
116+
width: 100%;
117+
height: 100%;
118+
top: 10px;
119+
right: 10px;
120+
background-color: var(--accent-color);
121+
z-index: -1;
122+
transition: 0.3s ease-in-out;
123+
}
124+
125+
.textContainer {
126+
display: flex;
127+
flex-direction: column;
128+
}
129+
130+
.textContainer .moving {
131+
display: inline-block;
132+
animation: wave 1s step-start infinite forwards;
133+
}
134+
135+
@media (hover: hover) {
136+
.movingContainer:hover .moving {
137+
animation-duration: 0.15s;
138+
}
139+
}
140+
141+
.textContainer .moving:nth-of-type(1) {
142+
animation-delay: calc(1 * 0.05s);
143+
}
144+
145+
.textContainer .moving:nth-of-type(2) {
146+
animation-delay: calc(2 * 0.05s);
147+
}
148+
149+
.textContainer .moving:nth-of-type(3) {
150+
animation-delay: calc(3 * 0.05s);
151+
}
152+
153+
.textContainer .moving:nth-of-type(4) {
154+
animation-delay: calc(4 * 0.05s);
155+
}
156+
157+
.textContainer .moving:nth-of-type(5) {
158+
animation-delay: calc(5 * 0.05s);
159+
}
160+
161+
.textContainer .moving:nth-of-type(6) {
162+
animation-delay: calc(6 * 0.05s);
163+
}
164+
165+
.textContainer article {
166+
margin-top: 2rem;
167+
}
168+
169+
.textContainer p:not(:first-of-type) {
170+
margin-top: 0.25rem;
171+
}
172+
173+
.textContainer a {
174+
display: inline-block;
175+
position: relative;
176+
}
177+
178+
.textContainer a::before {
179+
content: "";
180+
display: block;
181+
position: absolute;
182+
width: 100%;
183+
height: 2px;
184+
bottom: -5px;
185+
right: 0;
186+
background-color: var(--accent-color);
187+
transform: scaleX(0);
188+
transform-origin: left;
189+
transition: transform 0.15s ease-in-out;
190+
}
191+
192+
@media (hover: hover) {
193+
.textContainer a:hover::before {
194+
transform: scaleX(1);
195+
transform-origin: right;
196+
}
197+
}
198+
199+
nav {
200+
margin-top: 1.5rem;
201+
}
202+
203+
nav a {
204+
position: relative;
205+
}
206+
207+
.textContainer nav a::before {
208+
content: "";
209+
display: block;
210+
position: absolute;
211+
width: 100%;
212+
height: calc(100% - 8px);
213+
top: 8px;
214+
right: 0;
215+
background-color: var(--accent-color);
216+
z-index: -1;
217+
transform: scaleX(0);
218+
transform-origin: left;
219+
transition: transform 0.15s ease-in-out;
220+
}
221+
222+
@media (hover: hover) {
223+
.textContainer nav a:hover::before {
224+
transform: scaleX(1);
225+
transform-origin: right;
226+
}
227+
}
228+
229+
.themeSelectionContainer {
230+
width: 5rem;
231+
}
232+
233+
.themeSelectionContainer .themeRange {
234+
width: 100%;
235+
}
236+
237+
.themeSelectionContainer:nth-of-type(2) {
238+
display: none;
239+
}
240+
241+
.themeSelectionContainer .colorThemeOptions {
242+
display: flex;
243+
justify-content: space-between;
244+
align-items: center;
245+
}
246+
247+
.themeSelectionContainer .sizeThemeOptions {
248+
display: flex;
249+
justify-content: space-between;
250+
align-items: flex-end;
251+
}
252+
253+
footer {
254+
margin-top: auto;
255+
display: flex;
256+
justify-content: space-between;
257+
}
258+
259+
input[type="range"] {
260+
-webkit-appearance: none;
261+
appearance: none;
262+
background: transparent;
263+
height: 20px;
264+
}
265+
266+
input[type="range"]::-webkit-slider-runnable-track {
267+
background-color: var(--accent-color);
268+
height: 0.2rem;
269+
border-radius: 0.1rem;
270+
}
271+
272+
input[type="range"]::-webkit-slider-thumb {
273+
-webkit-appearance: none;
274+
appearance: none;
275+
margin-top: -6px;
276+
border-radius: 0.45rem;
277+
background-color: var(--text-color);
278+
height: 0.9rem;
279+
width: 0.9rem;
280+
}
281+
282+
input[type="range"]::-moz-range-track {
283+
background-color: var(--accent-color);
284+
height: 0.2rem;
285+
border-radius: 0.1rem;
286+
}
287+
288+
input[type="range"]::-moz-range-thumb {
289+
border: none;
290+
border-radius: 0.45rem;
291+
background-color: var(--text-color);
292+
height: 0.9rem;
293+
width: 0.9rem;
294+
}
295+
296+
@media (max-width:961px) {
297+
:root {
298+
--font-size: var(--small-font-size);
299+
}
300+
301+
main {
302+
max-width: -webkit-fill-available;
303+
max-height: -webkit-fill-available;
304+
}
305+
306+
.layout {
307+
flex-direction: column;
308+
}
309+
310+
.imageContainer {
311+
width: 15rem;
312+
margin: 0 auto;
313+
}
314+
315+
.textContainer {
316+
z-index: 2;
317+
}
318+
319+
footer {
320+
margin-top: 3rem;
321+
}
322+
323+
.themeSelectionContainer:nth-of-type(2) {
324+
display: block;
325+
}
326+
}

‎index.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>João Silva</title>
6+
<link rel="stylesheet" href="normalize.css" />
7+
<link rel="stylesheet" href="index.css" />
8+
<link rel="" href="index.css" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
10+
<script src="index.js"></script>
11+
</head>
12+
13+
<body>
14+
<main>
15+
<div class="layout">
16+
<div class="imageContainer">
17+
<img src="public/images/selfie.jpeg" />
18+
</div>
19+
<div class="textContainer">
20+
<header>
21+
<h1>A software developer</h1>
22+
<h2>in perpetual
23+
<span class="movingContainer"><span class="moving">m</span><span class="moving">o</span><span class="moving">t</span><span class="moving">i</span><span class="moving">o</span><span class="moving">n</span></span>
24+
</h2>
25+
</header>
26+
27+
<article>
28+
<p>An aspiring coder and amateur photographer.</p>
29+
30+
<p>Currently at <a target="_blank" rel="noopener noreferrer" href="https://uphold.com">Uphold</a>, previously at <a target="_blank" rel="noopener noreferrer" href="https://moxy.studio/">MOXY</a>.</p>
31+
</article>
32+
33+
<nav>
34+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/threequartersjohn">github</a> / <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/joao_silva.90/">photos</a> / <a target="_blank" rel="noopener noreferrer" href="https://glass-train-5c6.notion.site/Jo-o-Silva-927e110fb20c4ee3ace07ec1bb11da78">cv</a> / <a target="_blank" rel="noopener noreferrer" href="mailto:joaorfcsilva@gmail.com">email</a>
35+
</nav>
36+
37+
<footer>
38+
<div class="themeSelectionContainer">
39+
<input class="themeRange" type="range" id="colorTheme" name="volume" min="0" max="2" value="0">
40+
41+
<div class="colorThemeOptions">
42+
<span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg"><g id="Dark"><path d="M12.741,20.917a9.389,9.389,0,0,1-1.395-.105,9.141,9.141,0,0,1-1.465-17.7,1.177,1.177,0,0,1,1.21.281,1.273,1.273,0,0,1,.325,1.293,8.112,8.112,0,0,0-.353,2.68,8.266,8.266,0,0,0,4.366,6.857,7.628,7.628,0,0,0,3.711.993,1.242,1.242,0,0,1,.994,1.963h0A9.148,9.148,0,0,1,12.741,20.917ZM10.261,4.05a.211.211,0,0,0-.065.011,8.137,8.137,0,1,0,9.131,12.526h0a.224.224,0,0,0,.013-.235.232.232,0,0,0-.206-.136A8.619,8.619,0,0,1,14.946,15.1a9.274,9.274,0,0,1-4.883-7.7,9.123,9.123,0,0,1,.4-3.008.286.286,0,0,0-.069-.285A.184.184,0,0,0,10.261,4.05Z"></path></g></svg></span>
43+
<span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg"><g id="Cloud_On" dataName="Cloud On"><path d="M21.917,13.484a4.381,4.381,0,0,0-5.19-4.26,6.281,6.281,0,0,0-11.75,2.19,3.237,3.237,0,0,0-2.66,2,3.433,3.433,0,0,0,.82,3.74c1.12,1.03,2.54.89,3.94.89h10.15a4.514,4.514,0,0,0,4.69-4.32Zm-4.65,3.56c-1.19.01-2.38,0-3.56,0-2.75,0-5.49.06-8.23,0a2.383,2.383,0,0,1-2.33-1.73,2.333,2.333,0,0,1,2.28-2.94.515.515,0,0,0,.5-.5,5.3,5.3,0,0,1,10.11-1.81.5.5,0,0,0,.56.23,3.366,3.366,0,0,1,4.33,3.32A3.489,3.489,0,0,1,17.267,17.044Z"></path></g></svg></span>
44+
<span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg"><g id="Light"><g><path d="M12,18.09A6.09,6.09,0,1,1,18.09,12,6.1,6.1,0,0,1,12,18.09ZM12,6.91A5.09,5.09,0,1,0,17.09,12,5.1,5.1,0,0,0,12,6.91Z"></path><path d="M11.5,2.568v1.6a.5.5,0,1,0,1,0v-1.6a.5.5,0,1,0-1,0Z"></path><path d="M12.5,21.432v-1.6a.5.5,0,0,0-1,0v1.6a.5.5,0,1,0,1,0Z"></path><path d="M21.432,11.5h-1.6a.5.5,0,0,0,0,1h1.6a.5.5,0,1,0,0-1Z"></path><path d="M2.568,12.5h1.6a.5.5,0,1,0,0-1h-1.6a.5.5,0,1,0,0,1Z"></path><path d="M18.316,4.977l-.992.992-.141.141a.514.514,0,0,0-.146.353.508.508,0,0,0,.146.354.5.5,0,0,0,.354.146.515.515,0,0,0,.353-.146l.992-.992.141-.141a.515.515,0,0,0,.147-.354.508.508,0,0,0-.147-.353.5.5,0,0,0-.353-.147.522.522,0,0,0-.354.147Z"></path><path d="M5.684,19.023l.992-.992.141-.141a.514.514,0,0,0,.146-.353.508.508,0,0,0-.146-.354.5.5,0,0,0-.354-.146.515.515,0,0,0-.353.146l-.992.992-.141.141a.515.515,0,0,0-.147.354.508.508,0,0,0,.147.353.5.5,0,0,0,.353.147.522.522,0,0,0,.354-.147Z"></path><path d="M19.023,18.316l-.992-.992-.141-.141a.514.514,0,0,0-.353-.146.508.508,0,0,0-.354.146.5.5,0,0,0-.146.354.515.515,0,0,0,.146.353l.992.992.141.141a.515.515,0,0,0,.354.147.508.508,0,0,0,.353-.147.5.5,0,0,0,.147-.353.522.522,0,0,0-.147-.354Z"></path><path d="M4.977,5.684l.992.992.141.141a.514.514,0,0,0,.353.146.508.508,0,0,0,.354-.146.5.5,0,0,0,.146-.354.515.515,0,0,0-.146-.353l-.992-.992-.141-.141A.515.515,0,0,0,5.33,4.83a.508.508,0,0,0-.353.147.5.5,0,0,0-.147.353.522.522,0,0,0,.147.354Z"></path></g></g></svg></span>
45+
</div>
46+
</div>
47+
48+
<div class="themeSelectionContainer">
49+
<input class="themeRange" type="range" id="sizeTheme" name="volume" min="0" max="2" value="0">
50+
51+
<div class="sizeThemeOptions">
52+
<span style="font-size: 12px;">A</span>
53+
<span style="font-size: 14px;">A</span>
54+
<span style="font-size: 16px;">A</span>
55+
</div>
56+
</div>
57+
</footer>
58+
</div>
59+
</div>
60+
</main>
61+
</main>
62+
</body>
63+
</html>

0 commit comments

Comments
 (0)