janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add details to start & project page

Browse Source
This commit is contained in:
Janis Hutz
2025-02-07 11:43:51 +01:00
parent bcf24e7ed0
commit ad73a3496c
4 changed files with 109 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/timeline/index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timeline</title>
<link rel="stylesheet" href="/timeline.css">
</head>
<body>
<div class="timeline">
<div class="timeline-line"></div>
<div class="timeline-el" id="timeline-dot-1">
<div class="timeline-year">Year</div>
<div class="timeline-dot"></div>
<div class="timeline-desc">Description</div>
</div>
<div class="timeline-el" id="timeline-dot-2">
<div class="timeline-year">Year 2</div> <!-- TODO: Check date is accurate-->
<div class="timeline-dot"></div>
<div class="timeline-desc">Description 2</div>
</div>
</div>
</body>
</html>

49
components/timeline/timeline.css Normal file
View File

@@ -0,0 +1,49 @@
.timeline {
position: relative;
display: block;
flex-direction: column;
height: 100%;
}
.timeline-el {
z-index: 3;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
margin-top: 30px;
background: none;
}
.timeline-dot {
width: 20px;
height: 20px;
background-color: rgb(21, 43, 92);
border-radius: 20px;
}
.timeline-year {
margin-right: 20px;
color: rgb(63, 63, 63);
font-style: italic;
width: 5rem;
}
.timeline-desc {
font-style: italic;
font-weight: lighter;
margin-left: 20px;
max-width: calc( 100% - 5rem - 60px );
}
.timeline-line {
position: absolute;
z-index: 1;
height: calc(100% - 10px);
top: 5px;
width: 4px;
background-color: rgb(110, 110, 110);
display: flex;
left: calc( 5rem + 28px );
}

30
site/src/index.html
View File

@@ -48,6 +48,34 @@
<div class="content">
<h1>My work</h1>
<div class="side-by-side">
<div class="side-by-side-item left">
<h3>Store</h3>
<p>Find your perfect professional-grade Software</p>
</div>
<div class="side-by-side-item right">
<h3>Custom Websites</h3>
<p>Find your perfect new web appearance, built from the groundup without any frameworks</p>
</div>
</div>
<div class="side-by-side">
<div class="side-by-side-item left">
<h3>Accounts</h3>
<p>Log into any of my services with one single account, or apply to get access to the SDKs to integrate them into your own projects</p>
</div>
<div class="side-by-side-item right">
<h3>Free & Open Source Software</h3>
<p>Various open source projects are in the works at janishutz.com, with help from the community.</p>
</div>
</div>
<div class="side-by-side">
<div class="side-by-side-item left">
<h3></h3>
</div>
<div class="side-by-side-item right">
<h3>Custom Websites</h3>
</div>
</div>
</div>
@@ -56,4 +84,4 @@
<script src="https://static.janishutz.com/js/slider.js"></script>
<script>activateSlider( 7500 )</script>
</body>
</html>
</html>

10
site/src/projects/index.html
View File

@@ -57,8 +57,12 @@
<p>Discover all of my software projects</p>
<h3 id="foss">Open Source Projects</h3>
<div class=""></div>
<h2 id="foss">Open Source Projects</h2>
<div class="side-by-side">
<div class="side-by-side-item left">
<h3></h3>
</div>
</div>
</div>
@@ -71,4 +75,4 @@
activateSlider( 7500 );
</script>
</body>
</html>
</html>