Skip to content

Commit 76d560f

Browse files
pix-codepix-code
committed
add about page
1 parent 34264d6 commit 76d560f

8 files changed

Lines changed: 130 additions & 42 deletions

File tree

‎about/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>dukebr - home</title>
6+
<link rel="stylesheet" href="../style.css">
7+
</head>
8+
9+
<body>
10+
<div class="centered">
11+
<div class="navbar">
12+
<h3>dukebr.org</h3>
13+
<a class="navbar-link" href="../index.html">home</a>
14+
</div>
15+
<div class="flex-row">
16+
<div class="img-pane">
17+
<img src="../taipei.jpg"></img>
18+
</div>
19+
<div class="text-pane">
20+
<h3 class="about-command">$ whoami</h3>
21+
<p class="about-output">Duke B.</p>
22+
<p class="about-output">19 years old</p>
23+
<p class="about-output">Computer Science / Cybersecurity</p>
24+
<p class="about-output">Rochester Institute of Technology</p>
25+
<div class="about-space"></div>
26+
<h3 class="about-command">$ cat ./interests</h3>
27+
<p class="about-output">Systems Administration</p>
28+
<p class="about-output">Low Level Programming</p>
29+
<p class="about-output">Vulnerability Research</p>
30+
<div class="about-space"></div>
31+
<h3 class="about-command">$ cat ./clubs</h3>
32+
<p class="about-output">RITSEC</p>
33+
<p class="about-output">Archery Club</p>
34+
<p class="about-output">Jam Club</p>
35+
</div>
36+
</div>
37+
<sub>made with &lt;3</sub>
38+
</div>
39+
</body>
40+
41+
<html>

‎favicon.ico‎

15.4 KB
Binary file not shown.

‎index.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23

34
<head>
5+
<title>dukebr - about</title>
6+
<link rel="icon" href="favicon.ico" type="image/x-icon">
47
<link rel="stylesheet" href="style.css">
58
</head>
69

710
<body>
8-
<div id="centered">
9-
<div id="main">
10-
<div id="left">
11-
<h3>dukebr.org</h3>
12-
<a href="./about">about</a>
13-
<a href="./projects">projects</a>
14-
<a href="./contact">contact</a>
11+
<div class="centered">
12+
<div class="flex-row">
13+
<div class="text-pane" id="home-nav-pane">
14+
<h3 id="home-site-name">dukebr.org</h3>
15+
<a href="about/index.html">about</a>
1516
</div>
16-
<div id="right">
17-
<img src="./img.jpg" width=320 height=480></img>
17+
<div class="img-pane">
18+
<img src="qm.jpg" alt="Picture of the quarter mile walkway at RIT"></img>
1819
</div>
1920
</div>
21+
<sub>made with &lt;3</sub>
2022
</div>
2123
</body>
2224

‎lantern.jpg‎

1.46 MB
Loading

‎power-lines.jpg‎

885 KB
Loading

img.jpg renamed to qm.jpg

File renamed without changes.

‎style.css‎

Lines changed: 77 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* == GLOBAL == */
12
@font-face {
23
font-family: "iosevka";
34
src: url("iosevka.ttf");
@@ -21,62 +22,106 @@ body {
2122
background-color: #fdf6e3;
2223
}
2324

24-
#centered {
25+
h3 {
26+
color: #657b83;
27+
}
28+
29+
a {
30+
color: #6c71c4;
31+
text-align: center;
32+
font-weight: bold;
33+
text-decoration: none;
34+
}
35+
36+
a:hover {
37+
text-decoration: underline;
38+
font-size: 1.1rem;
39+
color: #d33682;
40+
}
41+
42+
a:active {
43+
font-size: 0.9rem;
44+
}
45+
46+
img {
47+
width: 316px;
48+
border-style: solid;
49+
border-width: 2px;
50+
border-color: #93a1a1e0;
51+
border-radius: 8px;
52+
}
53+
54+
sub {
55+
margin-top: 12px;
56+
color: #93a1a1;
57+
}
58+
59+
p {
60+
color: #657b83;
61+
}
62+
63+
.centered {
2564
display: flex;
2665
align-items: center;
2766
justify-content: center;
2867
height: 100vh;
68+
flex-direction: column;
2969
}
3070

31-
#main {
71+
.flex-row {
3272
display: flex;
3373
flex-wrap: wrap;
3474
flex-direction: row;
35-
gap: 16px;
75+
align-items: top;
76+
gap: 32px;
77+
min-height: 18px;
3678
}
3779

38-
#left,
39-
#right {
80+
.navbar {
81+
display: flex;
82+
gap: 40px;
83+
flex-wrap: wrap;
84+
flex-direction: row;
85+
align-items: center;
86+
margin-bottom: 12px;
87+
}
88+
89+
.navbar-link {
90+
flex: 1 1;
91+
}
92+
93+
.text-pane,
94+
.img-pane {
4095
flex: 1 1 320px;
41-
min-width: 320px;
42-
background-color: #eee8d5;
43-
border-width: 1px;
44-
border-style: solid;
45-
border-color: #93a1a160;
96+
width: 320px;
4697
}
4798

48-
#left {
99+
.text-pane {
49100
display: flex;
50101
flex-direction: column;
51-
gap: 16px;
52-
border-radius: 6px;
53102
}
54103

55-
#right {
56-
border-radius: 6px;
104+
.left-right {
105+
display: flex;
106+
justify-content: space-between;
57107
}
58108

59-
h3 {
60-
color: #657b83;
61-
text-align: center;
62-
font-size: 18px;
109+
/* == HOME == */
110+
#home-nav-pane {
111+
padding-top: 128px;
63112
}
64113

65-
a {
66-
color: #6c71c4;
114+
#home-site-name {
67115
text-align: center;
68-
font-weight: bold;
69-
text-decoration: none;
70-
font-size: 14px;
71116
}
72117

73-
a:hover {
74-
text-decoration: underline;
75-
font-size: 16px;
76-
color: #d33682;
118+
/* == ABOUT == */
119+
.about-space {
120+
min-height: 20px;
77121
}
78-
79-
img {
80-
border-radius: 4px;
122+
.about-command {
123+
margin: 0px 0px 0.2rem 0.2rem;
124+
}
125+
.about-output {
126+
margin: 0px 0px 0.1rem 0.1rem;
81127
}
82-

‎taipei.jpg‎

963 KB
Loading

0 commit comments

Comments
 (0)