a personal site
added start page
+182
src/assets/cat.gif
src/assets/cat.gif
This is a binary file and will not be displayed.
+113
src/css/startpage.css
+113
src/css/startpage.css
···
1
+
:root {
2
+
--color-bg: #282828;
3
+
--color-fg: #EADBB2;
4
+
--color-link: #8F9191;
5
+
--color-link-visited: #668F8B;
6
+
--color-link-hover: #FA7921 ;
7
+
}
8
+
9
+
html, body {
10
+
background: var(--color-bg);
11
+
color: var(--color-fg);
12
+
font-family: "Fira Code";
13
+
height: 100%;
14
+
width: 100%;
15
+
margin: 0;
16
+
padding: 0;
17
+
}
18
+
19
+
.container {
20
+
display: grid;
21
+
grid-template-columns: 1fr 460px 600px 1fr;
22
+
grid-template-areas:
23
+
". left right .";
24
+
column-gap: 80px;
25
+
justify-items: center;
26
+
align-items: center;
27
+
min-height: 100%;
28
+
}
29
+
30
+
.left-container {
31
+
grid-area: left;
32
+
aspect-ratio: 1/1;
33
+
}
34
+
35
+
.right-container {
36
+
grid-area: right;
37
+
height: 50%;
38
+
width: 100%;
39
+
}
40
+
41
+
.gif img {
42
+
max-width: 100%;
43
+
max-height: 100%;
44
+
}
45
+
46
+
.head {
47
+
display: flex;
48
+
flex-direction: column;
49
+
align-items: center;
50
+
font-size: 40px;
51
+
padding-top: 60px;
52
+
}
53
+
54
+
.category {
55
+
display: flex;
56
+
flex-direction: column;
57
+
width: 180px;
58
+
}
59
+
60
+
.bookmarks {
61
+
display: flex;
62
+
justify-content: center;
63
+
}
64
+
65
+
.links {
66
+
display: flex;
67
+
flex-direction: column;
68
+
align-items: center;
69
+
padding-top: 20px;
70
+
padding-bottom: 20px;
71
+
}
72
+
73
+
.title {
74
+
font-size: 20px;
75
+
}
76
+
77
+
li {
78
+
font-size: 16px;
79
+
list-style-type: none;
80
+
padding: 5px
81
+
}
82
+
83
+
a:link {
84
+
text-decoration: none;
85
+
color: var(--color-link);
86
+
}
87
+
88
+
a:visited {
89
+
color: var(--color-link-visited);
90
+
}
91
+
92
+
a:hover {
93
+
color: var(--color-link-hover);
94
+
}
95
+
96
+
.blinking {
97
+
animation: opacity 1s ease-in-out infinite;
98
+
opacity: 1;
99
+
}
100
+
101
+
@keyframes opacity {
102
+
0% {
103
+
opacity: 1;
104
+
}
105
+
106
+
50% {
107
+
opacity: 0;
108
+
}
109
+
110
+
100% {
111
+
opacity: 1;
112
+
}
113
+
}
+69
startpage.html
+69
startpage.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
4
+
<head>
5
+
<meta charset="UTF-8">
6
+
<title>~/startpage</title>
7
+
<link rel="stylesheet" type="text/css" href="./src/css/startpage.css">
8
+
</head>
9
+
10
+
<body>
11
+
<div class="container">
12
+
<div class="left-container">
13
+
<div class="gif">
14
+
<img src="./src/assets/cat.gif" />
15
+
</div>
16
+
</div>
17
+
18
+
<div class="right-container">
19
+
<div class="head">
20
+
<p>> cd ~/<span class="blinking">_</span></p>
21
+
</div>
22
+
23
+
<div class="bookmarks">
24
+
<div class="category">
25
+
<div class="links">
26
+
<li class="title">work</li>
27
+
<li><a href="https://gmail.com">gmail</a></li>
28
+
<li><a href="https://outlook.office.com">outlook</a></li>
29
+
<li><a href="https://linkedin.com">linkedin</a></li>
30
+
<li><a href="https://asu.edu/">asu</a></li>
31
+
</div>
32
+
</div>
33
+
34
+
<div class="category">
35
+
<div class="links">
36
+
<li class="title">dev</li>
37
+
<li><a href="https://github.com/">github</a></li>
38
+
<li><a href="https://fastapi.tiangolo.com/">fastapi</a></li>
39
+
<li><a href="https://mankier.com/">mankier</a></li>
40
+
<li><a href="https://devdocs.io/">devdocs</a></li>
41
+
</div>
42
+
</div>
43
+
44
+
<div class="category">
45
+
<div class="links">
46
+
<li class="title"><a style="color: #EADBB2">reading</a></li>
47
+
<li><a href="https://www.nytimes.com/">nytimes</a></li>
48
+
<li><a href="https://reddit.com/r/programming/">programming</a></li>
49
+
<li><a href="https://reddit.com/r/selfhosted/">selfhosted</a></li>
50
+
<li><a href="https://reddit.com/r/unixporn/">unixporn</a></li>
51
+
52
+
</div>
53
+
</div>
54
+
55
+
<div class="category">
56
+
<div class="links">
57
+
<li class="title">play</li>
58
+
<li><a href="https://monkeytype.com/">monkeytype</a></li>
59
+
<li><a href="https://youtube.com/">youtube</a></li>
60
+
<li><a href="https://dagster.io/">dagster</a></li>
61
+
<li><a href="https://plotly.com/">plotly</a></li>
62
+
</div>
63
+
</div>
64
+
</div>
65
+
</div>
66
+
</div>
67
+
</body>
68
+
69
+
</html>