david/portfolio-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: david:bbd4bfe9acc036e60a6588bc46e7a7b9a970dec9
Branches Tags
david:main
...
compare: david:00fde85f39e81b3ac727e88ea3eabcda4bf2f189
Branches Tags
david:main

3 Commits
bbd4bfe9ac ... 00fde85f39

Author SHA1 Message Date
David Madl
00fde85f39 add html structure 2026-05-08 22:30:56 +02:00
David Madl
425106856b move svgs 2026-05-08 22:29:07 +02:00
David Madl
ac0571a626 add contact link 2026-05-08 22:28:16 +02:00
7 changed files with 347 additions and 7 deletions
Expand all files Collapse all files

29
img/cta.svg Normal file
View File

@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="28mm"
height="12.5mm"
viewBox="0 0 28 12.5"
version="1.1"
id="svg29846"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs29843" />
<g
id="layer1">
<circle
style="fill:#00adee;fill-opacity:1;stroke-width:0.0555501"
id="path840-6-5"
cx="21.17"
cy="6.1161757"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-0-6"
cx="21.17"
cy="6.1161757"
r="3.5699999" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 696 B

116
img/hero_bg_2_plain.svg Normal file
View File

@@ -0,0 +1,116 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="600mm"
viewBox="0 0 210 600"
version="1.1"
id="svg13367"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
sodipodi:docname="hero_bg_2.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview13369"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.7128681"
inkscape:cx="219.80676"
inkscape:cy="507.04428"
inkscape:window-width="2400"
inkscape:window-height="1261"
inkscape:window-x="2391"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="g13905" />
<defs
id="defs13364" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g13905"
transform="translate(-4.6826096,0.77377499)">
<rect
style="fill:#00adee;fill-opacity:1;stroke-width:0.13348"
id="rect3266-3-9"
width="550"
height="2.5"
x="-558.88629"
y="24.800598"
transform="rotate(-90)" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-7"
width="43"
height="2.5"
x="94.470894"
y="25.416904" />
<circle
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
id="path840-6"
cx="26.050598"
cy="5.3162251"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-0"
cx="26.050598"
cy="5.3162251"
r="3.5699999" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-3"
width="43"
height="2.5"
x="31.155714"
y="4.0662231" />
<circle
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
id="path840-1"
cx="193.31462"
cy="16.357677"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-3"
cx="193.31462"
cy="16.357677"
r="3.5699999" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-1"
width="43"
height="2.5"
x="146.7446"
y="15.10769" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0318068"
id="rect3266-9-7"
width="31.23"
height="2.4999993"
x="55.311241"
y="-49.560772"
transform="rotate(45)" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0224908"
id="rect3266-9-7-5"
width="15.615"
height="2.4999993"
x="77.466377"
y="114.44683"
transform="rotate(-45)" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

0
hero_bg_plain.svg → img/hero_bg_plain.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

26
index.html
View File

@@ -1,3 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Madl</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="blocks">
<div class="block">
<h2>Optimizing software</h2>
@@ -26,9 +38,17 @@
</ul>
</div>
</div>
<div class="body">
<div class="cta">
<!--<p>Lorem ipsum</p>-->
<div class="cta-content">
<h2>Need results?</h2>
<p><svg style="height: 1.5em; vertical-align: -0.4em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M125.4 128C91.5 128 64 155.5 64 189.4C64 190.3 64 191.1 64.1 192L64 192L64 448C64 483.3 92.7 512 128 512L512 512C547.3 512 576 483.3 576 448L576 192L575.9 192C575.9 191.1 576 190.3 576 189.4C576 155.5 548.5 128 514.6 128L125.4 128zM528 256.3L528 448C528 456.8 520.8 464 512 464L128 464C119.2 464 112 456.8 112 448L112 256.3L266.8 373.7C298.2 397.6 341.7 397.6 373.2 373.7L528 256.3zM112 189.4C112 182 118 176 125.4 176L514.6 176C522 176 528 182 528 189.4C528 193.6 526 197.6 522.7 200.1L344.2 335.5C329.9 346.3 310.1 346.3 295.8 335.5L117.3 200.1C114 197.6 112 193.6 112 189.4z"/></svg> <a href="mailto:todo@example.com">todo@example.com</a></p>
<!--<h2>cta</h2>-->
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
<p>&copy; 2026 David Madl</p>
</div>
</body>
</html>

0
hero_bg.svg → inkscape/hero_bg.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

128
inkscape/hero_bg_2.svg Normal file
View File

@@ -0,0 +1,128 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="600mm"
viewBox="0 0 210 600"
version="1.1"
id="svg13367"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
sodipodi:docname="hero_bg_2.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview13369"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.7128681"
inkscape:cx="219.80676"
inkscape:cy="273.51784"
inkscape:window-width="2400"
inkscape:window-height="1261"
inkscape:window-x="2391"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="g13905" />
<defs
id="defs13364" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g13905"
transform="translate(-4.6826096,0.77377499)">
<rect
style="fill:#00adee;fill-opacity:1;stroke-width:0.13348"
id="rect3266-3-9"
width="550"
height="2.5"
x="-558.88629"
y="24.800598"
transform="rotate(-90)" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-7"
width="43"
height="2.5"
x="94.470894"
y="25.416904" />
<circle
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
id="path840-6"
cx="26.050598"
cy="5.3162251"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-0"
cx="26.050598"
cy="5.3162251"
r="3.5699999" />
<circle
style="fill:#00adee;fill-opacity:1;stroke-width:0.0555501"
id="path840-6-5"
cx="26.050598"
cy="114.77202"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-0-6"
cx="26.050598"
cy="114.77202"
r="3.5699999" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-3"
width="43"
height="2.5"
x="31.155714"
y="4.0662231" />
<circle
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
id="path840-1"
cx="193.31462"
cy="16.357677"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-3"
cx="193.31462"
cy="16.357677"
r="3.5699999" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-1"
width="43"
height="2.5"
x="146.7446"
y="15.10769" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0318068"
id="rect3266-9-7"
width="31.23"
height="2.4999993"
x="55.311241"
y="-49.560772"
transform="rotate(45)" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0224908"
id="rect3266-9-7-5"
width="15.615"
height="2.4999993"
x="77.466377"
y="114.44683"
transform="rotate(-45)" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

55
main.css
View File

@@ -13,8 +13,9 @@ h1, h2, h3, h4, h5, h6 {
/*gap: 20px;*/
padding-top: 5.78vw; /* hor spacing from line to heading top */
margin-top: 2.25vw;
margin-bottom: 0;
background-image: url("https://abanbytes.eu/upload/hero_bg_plain.svg");
background-image: url("https://abanbytes.eu/upload/hero_bg_2_plain.svg");
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
@@ -45,6 +46,7 @@ h1, h2, h3, h4, h5, h6 {
/*align-items: center;
justify-content: center;*/
flex-direction: column;
margin-bottom: 2.25vw; /* bottom distance to cta, in regular mode */
}
.block h2 {
@@ -66,7 +68,8 @@ h1, h2, h3, h4, h5, h6 {
flex-direction: column;
padding-top: 19.29vw;
margin-top: 2.25vw;
margin-bottom: 2.25vw;
margin-bottom: 0;
width: max(100%, calc(15em + 2 * 12.85vw));
}
.block {
@@ -83,14 +86,58 @@ h1, h2, h3, h4, h5, h6 {
}
.block:nth-child(1) {
margin-top:
margin-top: 0;
}
.block:nth-child(3) {
margin-bottom: 4.5vw; /* bottom 2.25vw + distance to cta, in responsive mode */
}
}
div.body, div.footer {
.cta {
margin-left: 0;
margin-top: -0.3vw;
padding-left: 13vw;
}
div.cta {
/*width: 100%;*/
min-height: 5.95vw;
background-image: url("https://abanbytes.eu/upload/cta.svg");
background-repeat: no-repeat;
background-position: left top;
background-size: auto 5.95vw;
}
div.footer {
margin-left: 7.14vw;
margin-right: 7.14vw;
}
div.cta {
margin-right: 7.14vw;
}
.cta {
/* set variables */
--circle-center-y: 2.905vw;
--cta-heading-size: 1.5rem;
--cta-heading-line-height: 1.2;
}
.cta h2 {
margin-top: 0px;
margin-bottom: 0.5rem; /* sensitive to .cta h2 font-size */
font-size: var(--cta-heading-size);
line-height: var(--cta-heading-line-height);
}
.cta p:first-of-type {
margin-top: 0.5rem;
}
div.cta-content {
padding-top: calc(
var(--circle-center-y) -
((var(--cta-heading-size) * var(--cta-heading-line-height)) * 0.5)
);
margin-left: 2.25vw;
}
div.footer {
margin-top: 7.14vw;