added banners + started intro

assets/UbuntuMono/LICENCE-FAQ.txt

@@ -0,0 +1,177 @@
+                        Ubuntu Font Family Licensing FAQ
+
+  Stylistic Foundations
+
+   The Ubuntu Font Family is the first time that a libre typeface has been
+   designed professionally and explicitly with the intent of developing a
+   public and long-term community-based development process.
+
+   When developing an open project, it is generally necessary to have firm
+   foundations: a font needs to maintain harmony within itself even across
+   many type designers and writing systems. For the [1]Ubuntu Font Family,
+   the process has been guided with the type foundry Dalton Maag setting
+   the project up with firm stylistic foundation covering several
+   left-to-right scripts: Latin, Greek and Cyrillic; and right-to-left
+   scripts: Arabic and Hebrew (due in 2011).
+
+   With this starting point the community will, under the supervision of
+   [2]Canonical and [3]Dalton Maag, be able to build on the existing font
+   sources to expand their character coverage. Ultimately everybody will
+   be able to use the Ubuntu Font Family in their own written languages
+   across the whole of Unicode (and this will take some time!).
+
+  Licensing
+
+   The licence chosen by any free software project is one of the
+   foundational decisions that sets out how derivatives and contributions
+   can occur, and in turn what kind of community will form around the
+   project.
+
+   Using a licence that is compatible with other popular licences is a
+   powerful constraint because of the [4]network effects: the freedom to
+   share improvements between projects allows free software to reach
+   high-quality over time. Licence-proliferation leads to many
+   incompatible licences, undermining the network effect, the freedom to
+   share and ultimately making the libre movement that Ubuntu is a part of
+   less effective. For all kinds of software, writing a new licence is not
+   to be taken lightly and is a choice that needs to be thoroughly
+   justified if this path is taken.
+
+   Today it is not clear to Canonical what the best licence for a font
+   project like the Ubuntu Font Family is: one that starts life designed
+   by professionals and continues with the full range of community
+   development, from highly commercial work in new directions to curious
+   beginners' experimental contributions. The fast and steady pace of the
+   Ubuntu release cycle means that an interim libre licence has been
+   necessary to enable the consideration of the font family as part of
+   Ubuntu 10.10 operating system release.
+
+   Before taking any decision on licensing, Canonical as sponsor and
+   backer of the project has reviewed the many existing licenses used for
+   libre/open fonts and engaged the stewards of the most popular licenses
+   in detailed discussions. The current interim licence is the first step
+   in progressing the state-of-the-art in licensing for libre/open font
+   development.
+
+   The public discussion must now involve everyone in the (comparatively
+   new) area of the libre/open font community; including font users,
+   software freedom advocates, open source supporters and existing libre
+   font developers. Most importantly, the minds and wishes of professional
+   type designers considering entering the free software business
+   community must be taken on board.
+
+   Conversations and discussion has taken place, privately, with
+   individuals from the following groups (generally speaking personally on
+   behalf of themselves, rather than their affiliations):
+     * [5]SIL International
+     * [6]Open Font Library
+     * [7]Software Freedom Law Center
+     * [8]Google Font API
+
+    Document embedding
+
+   One issue highlighted early on in the survey of existing font licences
+   is that of document embedding. Almost all font licences, both free and
+   unfree, permit embedding a font into a document to a certain degree.
+   Embedding a font with other works that make up a document creates a
+   "combined work" and copyleft would normally require the whole document
+   to be distributed under the terms of the font licence. As beautiful as
+   the font might be, such a licence makes a font too restrictive for
+   useful general purpose digital publishing.
+
+   The situation is not entirely unique to fonts and is encountered also
+   with tools such as GNU Bison: a vanilla GNU GPL licence would require
+   anything generated with Bison to be made available under the terms of
+   the GPL as well. To avoid this, Bison is [9]published with an
+   additional permission to the GPL which allows the output of Bison to be
+   made available under any licence.
+
+   The conflict between licensing of fonts and licensing of documents, is
+   addressed in two popular libre font licences, the SIL OFL and GNU GPL:
+     * [10]SIL Open Font Licence: When OFL fonts are embedded in a
+       document, the OFL's terms do not apply to that document. (See
+       [11]OFL-FAQ for details.
+     * [12]GPL Font Exception: The situation is resolved by granting an
+       additional permission to allow documents to not be covered by the
+       GPL. (The exception is being reviewed).
+
+   The Ubuntu Font Family must also resolve this conflict, ensuring that
+   if the font is embedded and then extracted it is once again clearly
+   under the terms of its libre licence.
+
+    Long-term licensing
+
+   Those individuals involved, especially from Ubuntu and Canonical, are
+   interested in finding a long-term libre licence that finds broad favour
+   across the whole libre/open font community. The deliberation during the
+   past months has been on how to licence the Ubuntu Font Family in the
+   short-term, while knowingly encouraging everyone to pursue a long-term
+   goal.
+     * [13]Copyright assignment will be required so that the Ubuntu Font
+       Family's licensing can be progressively expanded to one (or more)
+       licences, as best practice continues to evolve within the
+       libre/open font community.
+     * Canonical will support and fund legal work on libre font licensing.
+       It is recognised that the cost and time commitments required are
+       likely to be significant. We invite other capable parties to join
+       in supporting this activity.
+
+   The GPL version 3 (GPLv3) will be used for Ubuntu Font Family build
+   scripts and the CC-BY-SA for associated documentation and non-font
+   content: all items which do not end up embedded in general works and
+   documents.
+
+Ubuntu Font Licence
+
+   For the short-term only, the initial licence is the [14]Ubuntu Font
+   License (UFL). This is loosely inspired from the work on the SIL
+   OFL 1.1, and seeks to clarify the issues that arose during discussions
+   and legal review, from the perspective of the backers, Canonical Ltd.
+   Those already using established licensing models such as the GPL, OFL
+   or Creative Commons licensing should have no worries about continuing
+   to use them. The Ubuntu Font Licence (UFL) and the SIL Open Font
+   Licence (SIL OFL) are not identical and should not be confused with
+   each other. Please read the terms precisely. The UFL is only intended
+   as an interim license, and the overriding aim is to support the
+   creation of a more suitable and generic libre font licence. As soon as
+   such a licence is developed, the Ubuntu Font Family will migrate to
+   it—made possible by copyright assignment in the interium. Between the
+   OFL 1.1, and the UFL 1.0, the following changes are made to produce the
+   Ubuntu Font Licence:
+     * Clarification:
+
+    1. Document embedding (see [15]embedding section above).
+    2. Apply at point of distribution, instead of receipt
+    3. Author vs. copyright holder disambiguation (type designers are
+       authors, with the copyright holder normally being the funder)
+    4. Define "Propagate" (for internationalisation, similar to the GPLv3)
+    5. Define "Substantially Changed"
+    6. Trademarks are explicitly not transferred
+    7. Refine renaming requirement
+
+     Streamlining:
+    8. Remove "not to be sold separately" clause
+    9. Remove "Reserved Font Name(s)" declaration
+
+   A visual demonstration of how these points were implemented can be
+   found in the accompanying coloured diff between SIL OFL 1.1 and the
+   Ubuntu Font Licence 1.0: [16]ofl-1.1-ufl-1.0.diff.html
+
+References
+
+   1. http://font.ubuntu.com/
+   2. http://www.canonical.com/
+   3. http://www.daltonmaag.com/
+   4. http://en.wikipedia.org/wiki/Network_effect
+   5. http://scripts.sil.org/
+   6. http://openfontlibrary.org/
+   7. http://www.softwarefreedom.org/
+   8. http://code.google.com/webfonts
+   9. http://www.gnu.org/licenses/gpl-faq.html#CanIUseGPLToolsForNF
+  10. http://scripts.sil.org/OFL_web
+  11. http://scripts.sil.org/OFL-FAQ_web
+  12. http://www.gnu.org/licenses/gpl-faq.html#FontException
+  13. https://launchpad.net/~uff-contributors
+  14. http://font.ubuntu.com/ufl/ubuntu-font-licence-1.0.txt
+  15. http://font.ubuntu.com/ufl/FAQ.html#embedding
+  16. http://font.ubuntu.com/ufl/ofl-1.1-ufl-1.0.diff.html

assets/UbuntuMono/LICENCE.txt

@@ -0,0 +1,96 @@
+-------------------------------
+UBUNTU FONT LICENCE Version 1.0
+-------------------------------
+
+PREAMBLE
+This licence allows the licensed fonts to be used, studied, modified and
+redistributed freely. The fonts, including any derivative works, can be
+bundled, embedded, and redistributed provided the terms of this licence
+are met. The fonts and derivatives, however, cannot be released under
+any other licence. The requirement for fonts to remain under this
+licence does not require any document created using the fonts or their
+derivatives to be published under this licence, as long as the primary
+purpose of the document is not to be a vehicle for the distribution of
+the fonts.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this licence and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Original Version" refers to the collection of Font Software components
+as received under this licence.
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to
+a new environment.
+
+"Copyright Holder(s)" refers to all individuals and companies who have a
+copyright ownership of the Font Software.
+
+"Substantially Changed" refers to Modified Versions which can be easily
+identified as dissimilar to the Font Software by users of the Font
+Software comparing the Original Version with the Modified Version.
+
+To "Propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification and with or without charging
+a redistribution fee), making available to the public, and in some
+countries other activities as well.
+
+PERMISSION & CONDITIONS
+This licence does not grant any rights under trademark law and all such
+rights are reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of the Font Software, to propagate the Font Software, subject to
+the below conditions:
+
+1) Each copy of the Font Software must contain the above copyright
+notice and this licence. These can be included either as stand-alone
+text files, human-readable headers or in the appropriate machine-
+readable metadata fields within text or binary files as long as those
+fields can be easily viewed by the user.
+
+2) The font name complies with the following:
+(a) The Original Version must retain its name, unmodified.
+(b) Modified Versions which are Substantially Changed must be renamed to
+avoid use of the name of the Original Version or similar names entirely.
+(c) Modified Versions which are not Substantially Changed must be
+renamed to both (i) retain the name of the Original Version and (ii) add
+additional naming elements to distinguish the Modified Version from the
+Original Version. The name of such Modified Versions must be the name of
+the Original Version, with "derivative X" where X represents the name of
+the new work, appended to that name.
+
+3) The name(s) of the Copyright Holder(s) and any contributor to the
+Font Software shall not be used to promote, endorse or advertise any
+Modified Version, except (i) as required by this licence, (ii) to
+acknowledge the contribution(s) of the Copyright Holder(s) or (iii) with
+their explicit written permission.
+
+4) The Font Software, modified or unmodified, in part or in whole, must
+be distributed entirely under this licence, and must not be distributed
+under any other licence. The requirement for fonts to remain under this
+licence does not affect any document created using the Font Software,
+except any version of the Font Software extracted from a document
+created using the Font Software may only be distributed under this
+licence.
+
+TERMINATION
+This licence becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF
+COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.

assets/UbuntuMono/README.md

@@ -0,0 +1,57 @@
+# Nerd Fonts
+
+This is an archived font from the Nerd Fonts release v3.2.0.
+
+For more information see:
+* https://github.com/ryanoasis/nerd-fonts/
+* https://github.com/ryanoasis/nerd-fonts/releases/latest/
+
+# Ubuntu Mono
+
+The Ubuntu Font Family are a set of matching new libre/open fonts in
+development during 2010--2011.  And with further expansion work and
+bug fixing during 2015.  The development is being funded by
+Canonical Ltd on behalf the wider Free Software community and the
+Ubuntu project.  The technical font design work and implementation is
+being undertaken by Dalton Maag.
+
+Both the final font Truetype/OpenType files and the design files used
+to produce the font family are distributed under an open licence and
+you are expressly encouraged to experiment, modify, share and improve.
+
+http://font.ubuntu.com/
+
+Version: 0.80
+
+## Which font?
+
+### TL;DR
+
+* Pick your font family:
+  * If you are limited to monospaced fonts (because of your terminal, etc) then pick a font with `Nerd Font Mono` (or `NFM`).
+  * If you want to have bigger icons (usually around 1.5 normal letters wide) pick a font without `Mono` i.e. `Nerd Font` (or `NF`). Most terminals support this, but ymmv.
+  * If you work in a proportional context (GUI elements or edit a presentation etc) pick a font with `Nerd Font Propo` (or `NFP`).
+
+### Ligatures
+
+Ligatures are generally preserved in the patched fonts.
+Nerd Fonts `v2.0.0` had no ligatures in the `Nerd Font Mono` fonts, this has been dropped with `v2.1.0`.
+If you have a ligature-aware terminal and don't want ligatures you can (usually) disable them in the terminal settings.
+
+### Explanation
+
+Once you narrow down your font choice of family (`Droid Sans`, `Inconsolata`, etc) and style (`bold`, `italic`, etc) you have 2 main choices:
+
+#### `Option 1: Download already patched font`
+
+ * For a stable version download a font package from the [release page](https://github.com/ryanoasis/nerd-fonts/releases)
+ * Or download the development version from the folders here
+
+#### `Option 2: Patch your own font`
+
+ * Patch your own variations with the various options provided by the font patcher (i.e. not include all symbols for smaller font size)
+
+For more information see: [The FAQ](https://github.com/ryanoasis/nerd-fonts/wiki/FAQ-and-Troubleshooting#which-font)
+
+[SIL-RFN]:http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web_fonts_and_RFNs#14cbfd4a
+

view/component/banner.templ

@@ -0,0 +1,18 @@
+package component
+
+import "fmt"
+
+templ Banner(text string, icon string, colorBg string, colorText string) {
+<div class={"col-span-3 text-center py-3", fmt.Sprintf("bg-[%s]", colorBg), fmt.Sprintf("text-[%s]", colorText)}>
+		for i, x:= 0, 10 ; i < x ; i++ {
+			<div class="inline">
+				{text}
+			</div>
+			if i + 1 < x {
+				<div class="inline mr-3 ml-1.75">
+					{icon}
+				</div>
+			}
+		}
+	</div>
+}

view/component/banner_templ.go

@@ -0,0 +1,97 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.650
+package component
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "fmt"
+
+func Banner(text string, icon string, colorBg string, colorText string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		var templ_7745c5c3_Var2 = []any{"col-span-3 text-center py-3", fmt.Sprintf("bg-[%s]", colorBg), fmt.Sprintf("text-[%s]", colorText)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/banner.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for i, x := 0, 10; i < x; i++ {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"inline\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(text)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/banner.templ`, Line: 9, Col: 9}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if i+1 < x {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"inline mr-3 ml-1.75\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(icon)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/banner.templ`, Line: 13, Col: 10}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

view/layout/base.templ

@@ -10,7 +10,13 @@ templ Base() {
 			<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
 			<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
 	</head>
-	<body class="m-0 p-0 font-mono font-black">
+	<style>
+		@font-face {
+			font-family: UbuntuMono;
+			src: url(static/UbuntuMono/UbuntuMonoNerdFont-Bold.ttf)
+		}
+	</style>
+	<body class="m-0 p-0 font-black" style="font-family: UbuntuMono">
 
 	<nav class="flex w-full">
 		<div class="bg-orange-500 w-35 flex justify-center">

view/layout/base_templ.go

@@ -23,7 +23,7 @@ func Base() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Portfolio Lorenz Hohermuth</title><script src=\"https://cdn.jsdelivr.net/npm/@unocss/runtime\"></script><script src=\"https://unpkg.com/htmx.org@1.9.11\" integrity=\"sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0\" crossorigin=\"anonymous\"></script></head><body class=\"m-0 p-0 font-mono font-black\"><nav class=\"flex w-full\"><div class=\"bg-orange-500 w-35 flex justify-center\"><img src=\"/static/robot.png\" height=\"70\"></div><div class=\"container bg-[#3331ee]\"><ul class=\"flex items-center justify-center h-full gap-x-4 p-0 list-none m-0\"><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#home\">Home</a></li><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#projects\">Projects</a></li><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#contact\">Work</a></li></ul></div></nav><main>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Portfolio Lorenz Hohermuth</title><script src=\"https://cdn.jsdelivr.net/npm/@unocss/runtime\"></script><script src=\"https://unpkg.com/htmx.org@1.9.11\" integrity=\"sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0\" crossorigin=\"anonymous\"></script></head><style>\n\t\t@font-face {\n\t\t\tfont-family: UbuntuMono;\n\t\t\tsrc: url(static/UbuntuMono/UbuntuMonoNerdFont-Bold.ttf)\n\t\t}\n\t</style><body class=\"m-0 p-0 font-black\" style=\"font-family: UbuntuMono\"><nav class=\"flex w-full\"><div class=\"bg-orange-500 w-35 flex justify-center\"><img src=\"/static/robot.png\" height=\"70\"></div><div class=\"container bg-[#3331ee]\"><ul class=\"flex items-center justify-center h-full gap-x-4 p-0 list-none m-0\"><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#home\">Home</a></li><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#projects\">Projects</a></li><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#contact\">Work</a></li></ul></div></nav><main>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

view/page/home.templ

@@ -5,16 +5,78 @@ import "github.com/lorenzhohermuth/portfolio/view/component"
 
 templ ShowHome(arr []component.CarouselEntry, index int) {
 	@layout.Base(){
-		<div class="h-80 bg-[#cdb4f6] flex justify-center items-center">
+		<div class="bg-[#cdb4f6] pb-8 pt-1">
-			Intro
+			<div class="text-white py-2 pr-3 pl-6 bg-[#6266ec] my-4 mr-4 rounded-r-4">
+				<p>
+					 About this Website 
+				</p>
+				<p>
+					The Purpose of this website is to try a new Stack with GO and HTMX with the goal of using a Minimal amount of Code.
+					And to refresh my old Portfolio to a newer State.
+				</p>
 			</div>
 
-		<div class="h-80 bg-[#ff5cdb] flex justify-center items-center">
+			<div class="my-4">
+				@component.Banner("Stack", "", "#6266ec", "#b9f301" )
+			</div>
+
+			<div class="px-4">
+				
+				<div class="grid grid-cols-3 gap-1 gap-y-2 font-sm text-sm">
+
+					<div class="col-span-2 rounded bg-[#ff5cdb] flex justify-center items-center py-3 px-6">
+						Language
+					</div>
+					<div class="rounded bg-[#ff5cdb] flex justify-center items-center py-3 px-6">
+						GO
+					</div>
+
+					<div class="text-white rounded bg-[#6266ec] flex justify-center items-center py-3 px-6">
+						HTMX
+					</div>
+					<div class="text-white col-span-2 rounded bg-[#6266ec] flex justify-center items-center py-3 px-6">
+						Frontend Famework
+					</div>
+					
+					<div class="col-span-2 rounded bg-[#b9f301] flex justify-center items-center py-3 px-6">
+						CSS Famework
+					</div>
+					<div class="rounded bg-[#b9f301] flex justify-center items-center py-3 px-6">
+						Uno CSS
+					</div>
+
+					<div class="text-white rounded bg-[#6266ec] flex justify-center items-center py-3 px-6">
+						Templ
+					</div>
+					<div class="text-white col-span-2 rounded bg-[#6266ec] flex justify-center items-center py-3 px-6">
+						HTML Templating
+					</div>
+
+					<div class="text-white col-span-2 rounded bg-[#3331ee] flex justify-center items-center py-3 px-6">
+						HTTP Famework
+					</div>
+					<div class="text-white rounded bg-[#3331ee] flex justify-center items-center py-3 px-6">
+						Echo
+					</div>
+					
+				</div>
+			</div>
+		</div>
+
+		<div class="bg-[#ff5cdb] pb-7">
+			@component.Banner("Porjects", "󰣪", "#b9f301", "#ff5cdb")
+			<div class="flex justify-center items-center mt-10">
 				@component.Carousel(arr, index)
 			</div>
+		</div>
 
-		<div class="h-80 bg-[#1733d2] flex justify-center items-center">
+		<div class="h-80 bg-[#fee7c5]">
+			@component.Banner("Work", "", "#1733d2", "#ff5cdb")
+			<div class="p-3 h-full">
+				<div class="bg-[#1733d2] h-full w-full rounded-8 flex justify-center items-center">
 					Work
 				</div>
+			</div>
+		</div>
 	}
 }

view/page/home_templ.go

@@ -32,7 +32,23 @@ func ShowHome(arr []component.CarouselEntry, index int) templ.Component {
 				templ_7745c5c3_Buffer = templ.GetBuffer()
 				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"h-80 bg-[#cdb4f6] flex justify-center items-center\">Intro</div><div class=\"h-80 bg-[#ff5cdb] flex justify-center items-center\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"bg-[#cdb4f6] pb-8 pt-1\"><div class=\"text-white py-2 pr-3 pl-6 bg-[#6266ec] my-4 mr-4 rounded-r-4\"><p>About this Website </p><p>The Purpose of this website is to try a new Stack with GO and HTMX with the goal of using a Minimal amount of Code. And to refresh my old Portfolio to a newer State.</p></div><div class=\"my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = component.Banner("Stack", "", "#6266ec", "#b9f301").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"px-4\"><div class=\"grid grid-cols-3 gap-1 gap-y-2 font-sm text-sm\"><div class=\"col-span-2 rounded bg-[#ff5cdb] flex justify-center items-center py-3 px-6\">Language</div><div class=\"rounded bg-[#ff5cdb] flex justify-center items-center py-3 px-6\">GO</div><div class=\"text-white rounded bg-[#6266ec] flex justify-center items-center py-3 px-6\">HTMX</div><div class=\"text-white col-span-2 rounded bg-[#6266ec] flex justify-center items-center py-3 px-6\">Frontend Famework</div><div class=\"col-span-2 rounded bg-[#b9f301] flex justify-center items-center py-3 px-6\">CSS Famework</div><div class=\"rounded bg-[#b9f301] flex justify-center items-center py-3 px-6\">Uno CSS</div><div class=\"text-white rounded bg-[#6266ec] flex justify-center items-center py-3 px-6\">Templ</div><div class=\"text-white col-span-2 rounded bg-[#6266ec] flex justify-center items-center py-3 px-6\">HTML Templating</div><div class=\"text-white col-span-2 rounded bg-[#3331ee] flex justify-center items-center py-3 px-6\">HTTP Famework</div><div class=\"text-white rounded bg-[#3331ee] flex justify-center items-center py-3 px-6\">Echo</div></div></div></div><div class=\"bg-[#ff5cdb] pb-7\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = component.Banner("Porjects", "󰣪", "#b9f301", "#ff5cdb").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex justify-center items-center mt-10\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -40,7 +56,15 @@ func ShowHome(arr []component.CarouselEntry, index int) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"h-80 bg-[#1733d2] flex justify-center items-center\">Work</div>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"h-80 bg-[#fee7c5]\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = component.Banner("Work", "", "#1733d2", "#ff5cdb").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"p-3 h-full\"><div class=\"bg-[#1733d2] h-full w-full rounded-8 flex justify-center items-center\">Work</div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}