a personal site
add project pages (#28)
authored by
Daniel Daum
and committed by
GitHub
55d5ca0e
61f3e920
+282
-7
+1
-1
404.html
+1
-1
404.html
···
41
41
<a href="/src/now/now.html" aria-label="link to my now page">now</a>
42
42
<s><a href="#" aria-label="link to my blog; still under construction">blog</a></s>
43
43
<s><a href="#" aria-label="link to my digital garden; still under construction">garden</a></s>
44
-
<s><a href="#" aria-label="link to my projects; still under construction">projects</a></s>
44
+
<a href="/src/projects/projects.html" aria-label="link to my projects; still under construction">projects</a>
45
45
<!--<s><a href="/src/blog/blog.html" aria-label="link to my blog">blog</a></s>
46
46
<s><a href="/src/garden.html" aria-label="link to my digital garden">garden</a></s>
47
47
<s><a href="/src/projects/projects.html" aria-label="link to my projects">projects</a></s>-->
+89
-2
global.css
+89
-2
global.css
···
723
723
}
724
724
}
725
725
726
+
/*============================*/
727
+
/* project banner styles */
728
+
/* svg html generated entirely by ai*/
729
+
/*all other styles by me*/
730
+
/*============================*/
731
+
.project-banner {
732
+
position: relative;
733
+
border: 1px solid var(--text-body);
734
+
border-radius: 0.75rem;
735
+
overflow: hidden;
736
+
background: linear-gradient(135deg, #1a2e1a 0%, #0f1e0f 50%, #1a3520 100%);
737
+
padding: 2rem;
738
+
height: 20rem;
739
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
740
+
}
726
741
742
+
.project-banner-background {
743
+
position: absolute;
744
+
inset: 0;
745
+
}
746
+
747
+
.project-banner-img {
748
+
position: relative;
749
+
display: block;
750
+
width: 93%;
751
+
height: auto;
752
+
margin: 2rem auto 0;
753
+
border: 3px solid rgba(255, 255, 255, 0.25);
754
+
border-radius: 0.5rem;
755
+
}
756
+
757
+
.project-header {
758
+
display: flex;
759
+
flex-direction: row;
760
+
justify-content: space-between;
761
+
padding-bottom: 1rem;
762
+
border-bottom: 1px solid var(--borders);
763
+
}
764
+
765
+
.project-header-title {
766
+
all:unset;
767
+
font-size: 2rem;
768
+
font-weight: 700;
769
+
color: var(--accent);
770
+
margin-right: 5rem;
771
+
}
772
+
773
+
.project-header-desc {
774
+
font-weight: 300;
775
+
align-self: center;
776
+
color: var(--text-secondary)
777
+
}
778
+
779
+
.project-details {
780
+
display: flex;
781
+
flex-direction: row;
782
+
margin-top: 1rem;
783
+
}
784
+
785
+
.project-details-left {
786
+
display: flex;
787
+
flex-direction: column;
788
+
padding-right: 1rem;
789
+
min-width: 12rem;
790
+
}
791
+
792
+
.project-details-right {
793
+
display: flex;
794
+
flex-direction: column;
795
+
padding-left: 1rem;
796
+
}
797
+
798
+
.project-details-meta-header {
799
+
color: var(--text-headings);
800
+
font-weight: 700;
801
+
}
802
+
803
+
.project-details-meta-bullet {
804
+
color: var(--text-body);
805
+
font-weight: 300;
806
+
}
807
+
808
+
.project-details-source {
809
+
/*border: 1px solid red;*/
810
+
display: inline;
811
+
width: max-content;
812
+
813
+
}
727
814
728
815
729
816
730
817
/*============================*/
731
818
/* blog home page styles */
732
819
/*============================*/
733
-
820
+
/*
734
821
.blog-home {
735
822
max-width: 65ch;
736
823
margin: 0 auto;
···
777
864
color: var(--text-secondary);
778
865
font-size: 0.85rem;
779
866
white-space: nowrap;
780
-
}
867
+
}*/
+2
-2
index.html
+2
-2
index.html
···
42
42
<a href="/src/now/now.html" aria-label="link to my now page">now</a>
43
43
<s><a href="#" aria-label="link to my blog; still under construction">blog</a></s>
44
44
<s><a href="#" aria-label="link to my digital garden; still under construction">garden</a></s>
45
-
<s><a href="#" aria-label="link to my projects; still under construction">projects</a></s>
45
+
<a href="/src/projects/projects.html" aria-label="link to my projects; still under construction">projects</a>
46
46
<!--<s><a href="/src/blog/blog.html" aria-label="link to my blog">blog</a></s>
47
47
<s><a href="/src/garden.html" aria-label="link to my digital garden">garden</a></s>
48
48
<s><a href="/src/projects/projects.html" aria-label="link to my projects">projects</a></s>-->
···
63
63
i am pursuing an undergradute degree in computer science and currently learning rust and game development
64
64
</p>
65
65
<p>
66
-
don't hesitate to shoot me an email, especially if it's to chat about books and video games
66
+
don't hesitate to shoot me an email, especially if it's to chat about books or video games
67
67
</p>
68
68
</main>
69
69
+1
-1
src/now/now.html
+1
-1
src/now/now.html
···
42
42
<a href="/src/now/now.html" aria-label="link to my now page">now</a>
43
43
<s><a href="#" aria-label="link to my blog; still under construction">blog</a></s>
44
44
<s><a href="#" aria-label="link to my digital garden; still under construction">garden</a></s>
45
-
<s><a href="#" aria-label="link to my projects; still under construction">projects</a></s>
45
+
<a href="/src/projects/projects.html" aria-label="link to my projects; still under construction">projects</a>
46
46
<!--<s><a href="/src/blog/blog.html" aria-label="link to my blog">blog</a></s>
47
47
<s><a href="/src/garden.html" aria-label="link to my digital garden">garden</a></s>
48
48
<s><a href="/src/projects/projects.html" aria-label="link to my projects">projects</a></s>-->
+77
src/projects/projects.html
+77
src/projects/projects.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<meta
7
+
name="description"
8
+
content="daniel daum's projects - oakland based software engineer"
9
+
/>
10
+
<meta
11
+
http-equiv="Content-Security-Policy"
12
+
content="default-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self';"
13
+
/>
14
+
<meta name="referrer" content="strict-origin-when-cross-origin" />
15
+
<link rel="stylesheet" href="/global.css" />
16
+
<link
17
+
rel="apple-touch-icon"
18
+
sizes="180x180"
19
+
href="/assets/favicon/apple-touch-icon.png"
20
+
/>
21
+
<link
22
+
rel="icon"
23
+
type="image/png"
24
+
sizes="32x32"
25
+
href="/assets/favicon/favicon-32x32.png"
26
+
/>
27
+
<link
28
+
rel="icon"
29
+
type="image/png"
30
+
sizes="16x16"
31
+
href="/assets/favicon/favicon-16x16.png"
32
+
/>
33
+
<link rel="manifest" href="/assets/favicon/site.webmanifest" />
34
+
<title>daniel daum - projects</title>
35
+
</head>
36
+
37
+
<body>
38
+
<header>
39
+
<h1 class="title">projects</h1>
40
+
<nav>
41
+
<a href="/index.html" aria-label="return home">home</a>
42
+
<a href="/src/now/now.html" aria-label="link to my now page">now</a>
43
+
<s><a href="#" aria-label="link to my blog; still under construction">blog</a></s>
44
+
<s><a href="#" aria-label="link to my digital garden; still under construction">garden</a></s>
45
+
<a href="/src/projects/projects.html" aria-label="link to my projects; still under construction">projects</a>
46
+
<!--<s><a href="/src/blog/blog.html" aria-label="link to my blog">blog</a></s>
47
+
<s><a href="/src/garden.html" aria-label="link to my digital garden">garden</a></s>
48
+
<s><a href="/src/projects/projects.html" aria-label="link to my projects">projects</a></s>-->
49
+
</nav>
50
+
51
+
</header>
52
+
<main>
53
+
54
+
<a
55
+
class="project-card"
56
+
href="/src/projects/saturn/saturn.html"
57
+
>
58
+
<div class="project-card-left">
59
+
<div class="project-card-left-top">
60
+
<p class="project-type">JAN '26 | RE-DESIGN</p>
61
+
</div>
62
+
<div class="project-card-left-bottom">
63
+
<h1>saturn</h1>
64
+
<p class="meta">a cozy yet minimalist personal website</p>
65
+
</div>
66
+
</div>
67
+
<div class="project-card-right">
68
+
<img
69
+
class="project-card-img"
70
+
src="/src/projects/saturn/saturn.png"
71
+
alt="saturn project thumbnail">
72
+
</img>
73
+
</div>
74
+
</a>
75
+
</main>
76
+
</body>
77
+
</html>
+112
src/projects/saturn/saturn.html
+112
src/projects/saturn/saturn.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<meta
7
+
name="description"
8
+
content="daniel daum's website homepage - oakland based software engineer"
9
+
/>
10
+
<meta
11
+
http-equiv="Content-Security-Policy"
12
+
content="default-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self';"
13
+
/>
14
+
<meta name="referrer" content="strict-origin-when-cross-origin" />
15
+
<link rel="stylesheet" href="/global.css" />
16
+
<link
17
+
rel="apple-touch-icon"
18
+
sizes="180x180"
19
+
href="/src/assets/favicon/apple-touch-icon.png"
20
+
/>
21
+
<link
22
+
rel="icon"
23
+
type="image/png"
24
+
sizes="32x32"
25
+
href="/src/assets/favicon/favicon-32x32.png"
26
+
/>
27
+
<link
28
+
rel="icon"
29
+
type="image/png"
30
+
sizes="16x16"
31
+
href="/src/assets/favicon/favicon-16x16.png"
32
+
/>
33
+
<link rel="manifest" href="/src/assets/favicon/site.webmanifest" />
34
+
<title>daniel daum - saturn</title>
35
+
</head>
36
+
37
+
38
+
<body>
39
+
<header>
40
+
<div class="nav-back">← <a href="/src/projects/projects.html">back to projects</a></div>
41
+
<section class="project-banner">
42
+
<div class="project-banner-background" aria-hidden="true">
43
+
<!--svg elements generated with help from warp ai-->
44
+
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin">
45
+
<defs>
46
+
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
47
+
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="1" />
48
+
</pattern>
49
+
<pattern id="diagonals" width="80" height="80" patternUnits="userSpaceOnUse">
50
+
<line x1="0" y1="0" x2="80" y2="80" stroke="white" stroke-width="1.5" />
51
+
<line x1="80" y1="0" x2="0" y2="80" stroke="white" stroke-width="1.5" />
52
+
</pattern>
53
+
<pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
54
+
<circle cx="10" cy="10" r="1.5" fill="white" />
55
+
</pattern>
56
+
</defs>
57
+
<rect width="100%" height="100%" fill="url(#grid)" opacity="0.2" />
58
+
<rect width="100%" height="100%" fill="url(#diagonals)" opacity="0.1" />
59
+
<rect width="100%" height="100%" fill="url(#dots)" opacity="0.15" />
60
+
</svg>
61
+
</div>
62
+
<img
63
+
class="project-banner-img"
64
+
src="/src/projects/saturn/saturn.png"
65
+
alt="Saturn project screenshot"
66
+
/>
67
+
</section>
68
+
</header>
69
+
<main>
70
+
71
+
<section class="project-header">
72
+
<h1 class="project-header-title">saturn</h1>
73
+
<h4 class="project-header-desc" >a cozy yet minimalist personal website</h4>
74
+
</section>
75
+
76
+
<section class="project-details">
77
+
<div class="project-details-left">
78
+
<h4 class="project-details-meta-header">role</h4>
79
+
<p class="project-details-meta-bullet">developer</p>
80
+
81
+
<h4 class="project-details-meta-header">timeline</h4>
82
+
<p class="project-details-meta-bullet">jan 2026 - ongoing</p>
83
+
84
+
<h4 class="project-details-meta-header">tools</h4>
85
+
<p class="project-details-meta-bullet">html, css</p>
86
+
87
+
<h4 class="project-details-meta-header">context</h4>
88
+
<p class="project-details-meta-bullet">personal project</p>
89
+
90
+
<a class="project-details-source" href="https://github.com/daniel-daum/saturn" aria-label="link to this websites source code" target="_blank" rel="noopener noreferrer">source</a>
91
+
92
+
</div>
93
+
<div class="project-details-right">
94
+
<p class="project-details-description">
95
+
i have never been satisfied with the look of my websites. in my efforts to improve what i don't like, i end up re-designing it...over and over
96
+
</p>
97
+
98
+
<p class="project-details-description">
99
+
i have always been drawn to simple, minimal sites. i find something elegeant about, less. this iteration represents my current best attempt at doing less
100
+
101
+
</p>
102
+
<p>
103
+
the implementation is intentionally simple: static html and css, no javascript or framework, registered and hosted on cloudflare
104
+
</p>
105
+
</div>
106
+
</section>
107
+
108
+
109
+
</main>
110
+
<footer>
111
+
</body>
112
+
</html>
src/projects/saturn/saturn.png
src/projects/saturn/saturn.png
This is a binary file and will not be displayed.