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:main
Branches Tags
david:main

4 Commits
bbd4bfe9ac ... main

Author SHA1 Message Date
David Madl
6c99b8a812 favicons, fonts 2026-05-08 23:21:05 +02:00
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
19 changed files with 401 additions and 9 deletions
Expand all files Collapse all files

BIN
favicon/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
favicon/favicon-96x96.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
favicon/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
favicon/favicon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

21
favicon/site.webmanifest Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "David Madl",
"short_name": "Madl",
"icons": [
{
"src": "/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

BIN
favicon/web-app-manifest-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
favicon/web-app-manifest-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
font/Inter-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
font/Inter-BoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
font/Inter-Italic.woff2 Normal file
View File

Binary file not shown.

BIN
font/Inter-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
font/SpaceGrotesk-Bold.woff2 Normal file
View File

Binary file not shown.

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

43
index.html
View File

@@ -1,3 +1,34 @@
<!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">
<!-- Standard favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- SVG favicon -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- PNG favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple / iOS home screen icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Web app manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Optional browser UI color -->
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="blocks">
<div class="block">
<h2>Optimizing software</h2>
@@ -26,9 +57,15 @@
</ul>
</div>
</div>
<div class="body">
<!--<p>Lorem ipsum</p>-->
<div class="cta">
<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:hello@hexopt.com">hello@hexopt.com</a></p>
</div>
</div>
<div class="footer">
<p>Footer</p>
<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

70
main.css
View File

@@ -1,4 +1,10 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"); */
@font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url("font/Inter-Regular.woff2?v=4.1") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:400; font-display:swap; src:url("font/Inter-Italic.woff2?v=4.1") format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:700; font-display:swap; src:url("font/Inter-Bold.woff2?v=4.1") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:700; font-display:swap; src:url("font/Inter-BoldItalic.woff2?v=4.1") format("woff2"); }
@font-face { font-family:Space Grotesk; font-style:normal; font-weight:700; font-display:swap; src:url("font/SpaceGrotesk-Bold.woff2?v=4.1") format("woff2"); }
body {
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -13,8 +19,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("img/hero_bg_2_plain.svg");
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
@@ -45,6 +52,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 {
@@ -60,13 +68,18 @@ h1, h2, h3, h4, h5, h6 {
margin-top: 0.5rem;
}
.cta {
padding-left: 13vw; /* for regular screen only */
}
/* Small screens */
@media (max-width: 960px) {
.blocks {
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 +96,61 @@ 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 */
}
.cta {
padding-left: 15.25vw; /* for small screen only */
}
}
div.body, div.footer {
.cta {
margin-left: 0;
margin-top: -0.3vw;
}
div.cta {
/*width: 100%;*/
min-height: 5.95vw;
background-image: url("img/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;