FE progress, styles, icons, imgs, fixes, classlists, classes, styles,…

… layout, elements, svgs, twd extentions, etc.

app/components/_menu.tsx

@@ -6,10 +6,10 @@ import { Icon } from './ui/icon.tsx'
 export function Menu() {
 	function menuItemClassList(isActive: boolean): string {
 		return (
-			'transition-opacity ' +
+			'transition-all duration-300 flex flex-col items-center ' +
 			(isActive
-				? 'flex flex-col items-center text-highlight lg:after:absolute lg:after:bottom-0 lg:after:w-12 lg:after:rounded-3xl lg:after:border-2 lg:after:border-highlight'
-				: 'flex flex-col items-center opacity-50 hover:text-highlight')
+				? 'text-highlight lg:after:absolute lg:after:bottom-0 lg:after:w-12 lg:after:rounded-3xl lg:after:border-2 lg:after:border-highlight'
+				: 'opacity-50 hover:text-highlight')
 		)
 	}
 	const menuItemTextClassList = 'capitalize mt-1 lg:mt-2 font-light'
@@ -48,7 +48,7 @@ export function Menu() {
 						<NavLink to="portfolio">
 							{({ isActive }) => (
 								<div className={menuItemClassList(isActive)}>
-									<Icon name="laptop" className="h-5 w-5 lg:h-6 lg:w-6" />
+									<Icon name="desktop" className="h-5 w-5 lg:h-6 lg:w-6" />
 									<p className={menuItemTextClassList}>Portfolio</p>
 								</div>
 							)}
@@ -58,7 +58,7 @@ export function Menu() {
 							{({ isActive }) => (
 								<div className={menuItemClassList(isActive)}>
 									<Icon
-										name="magnifying-glass"
+										name="question-mark-circled"
 										className="h-5 w-5 lg:h-6 lg:w-6"
 									/>
 									<p className={menuItemTextClassList}>about</p>
@@ -86,7 +86,7 @@ export function Menu() {
 								href="https://instagram.com/wochlife"
 								target="_blank"
 								rel="noreferrer"
-								className='hover:text-highlight transition-colors'
+								className="transition-colors hover:text-highlight"
 							>
 								@wochlife
 							</a>

app/components/classlists.tsx

@@ -13,6 +13,10 @@ export const boxProps =
 	'flex flex-col rounded-3xl lg:rounded-6xl pt-4 px-4 md:px-5 md:pt-6'
 export const darkBoxBgClassList = boxProps + ' bg-dark-gradient'
 export const purpleBoxBgClassList = boxProps + ' bg-purple-box-gradient'
+export const purpleBoxBg40ClassList = boxProps + ' bg-purple-box-gradient-40'
+
+export const darkContentBoxBgClassList =
+	'flex flex-col rounded-3xl lg:rounded-6xl p-4 md:p-5 xl:p-8 bg-dark-gradient'
 
 //* box items inside boxes
 export const boxInnerContentBoxProps =
@@ -25,6 +29,9 @@ export const darkBoxInnerContentBox =
 export const purpleBoxInnerContentBox =
 	boxInnerContentBoxProps +
 	' bg-highlight-dark/30 hover:bg-highlight-dark transition-colors duration-500 p-2 cursor-pointer rounded-xl'
+export const purpleBoxInnerContentBox40 =
+	boxInnerContentBoxProps +
+	' md:hover:bg-highlight-dark transition-colors duration-500 p-2 cursor-pointer rounded-xl'
 
 //* box items content
 export const innerContentBoxTexts =
@@ -43,9 +50,10 @@ export const bigBoxTitle = 'capitalize text-center text-2xl font-semibold mb-6'
 
 //* content routes (portfolio, projects, about)
 export const contentsRouteSelectorCol1 =
-	'md-to-lg:w-[35%] lg:w-[32%] lg-to-xl:w-[29%] xl:w-[26.502%] md-to-lg:max-w-[460px] sm:max-md-to-lg:w-1/2'
+	'md-to-lg:max-w-[300px] xl:max-w-[320px] sm:max-md-to-lg:w-1/2 md-to-lg:w-[35%] lg:w-[32%] lg-to-xl:w-[29%] xl:w-[26.502%]'
 export const mobContentsRouteSelectorCol1 =
-	'max-sm:w-[90%] transition-opacity duration-500 fixed bottom-20 z-2000 max-sm:left-5 sm:right-16 ' + contentsRouteSelectorCol1
+	'max-sm:w-[90%] transition-opacity duration-500 fixed bottom-20 z-2000 max-sm:left-5 sm:right-16 ' +
+	contentsRouteSelectorCol1
 export const contentsRouteContentCol2 =
 	'w-full md-to-lg:w-[65%] lg:w-[68%] lg-to-xl:w-[71%] xl:w-[73.498%] flex flex-col'
 export const contentsRouteWrapper =

app/components/modal-helpers.tsx

@@ -39,12 +39,29 @@ export function MobileModalCaretOpener({
 			)}
 			{!isMobExtraMenuToggled && (
 				<Icon
-					name={isMobExtraMenuToggled ? 'caret-down' : 'caret-up'}
+					name="caret-up"
 					size="xl"
-					className="fixed bottom-28 right-5 z-1999 rounded-lg bg-foreground text-background"
+					className="fixed bottom-28 right-5 z-1999 cursor-pointer rounded-lg bg-foreground text-background transition-colors hover:bg-highlight hover:text-foreground"
 					onClick={handleToggle}
 				/>
 			)}
 		</>
 	)
 }
+
+export function ModalCloserIcon({
+	handleToggle,
+	iconName = "cross-1",
+}: {
+	handleToggle: () => void
+	iconName?: string
+}) {
+	return (
+		<Icon
+			name={iconName}
+			size="md"
+			className="absolute right-6 top-6 z-2000 cursor-pointer text-white transition-opacity hover:opacity-70"
+			onClick={handleToggle}
+		/>
+	)
+}

app/components/ui/icons/nameStrings.ts

@@ -1,7 +1,45 @@
 // This file is generated by npm run build:icons
-		export function IconNames(): string[] {
-			return [
-				"arrow-left","arrow-right","avatar","calendar","camera","caret-down","caret-left","caret-right","caret-up","check","clock","cross-1","dashboard","dots-horizontal","download","envelope-closed","exit","file-text","github-logo","home","laptop","link-2","lock-closed","lock-open-1","magnifying-glass","minus","moon","pencil-1","pencil-2","plus","plus2","question-mark-circled","reset","sun","trash","update"
-			];
-		  };
-
+export function IconNames(): string[] {
+	return [
+		'accessibility',
+		'arrow-left',
+		'arrow-right',
+		'avatar',
+		'calendar',
+		'camera',
+		'caret-down',
+		'caret-left',
+		'caret-right',
+		'caret-up',
+		'check',
+		'clock',
+		'cross-1',
+		'dashboard',
+		'desktop',
+		'dots-horizontal',
+		'download',
+		'envelope-closed',
+		'exit',
+		'file-text',
+		'github-logo',
+		'home',
+		'laptop',
+		'link-2',
+		'lock-closed',
+		'lock-open-1',
+		'magnifying-glass',
+		'minus',
+		'mix',
+		'moon',
+		'pencil-1',
+		'pencil-2',
+		'plus',
+		'plus2',
+		'question-mark-circled',
+		'reset',
+		'rocket',
+		'sun',
+		'trash',
+		'update',
+	]
+}

app/components/ui/icons/nameTypes.d.ts

@@ -1,39 +1,42 @@
 // This file is generated by npm run build:icons
 export type IconName =
-	| "arrow-left"
-	| "arrow-right"
-	| "avatar"
-	| "calendar"
-	| "camera"
-	| "caret-down"
-	| "caret-left"
-	| "caret-right"
-	| "caret-up"
-	| "check"
-	| "clock"
-	| "cross-1"
-	| "dashboard"
-	| "dots-horizontal"
-	| "download"
-	| "envelope-closed"
-	| "exit"
-	| "file-text"
-	| "github-logo"
-	| "home"
-	| "laptop"
-	| "link-2"
-	| "lock-closed"
-	| "lock-open-1"
-	| "magnifying-glass"
-	| "minus"
-	| "moon"
-	| "pencil-1"
-	| "pencil-2"
-	| "plus"
-	| "plus2"
-	| "question-mark-circled"
-	| "reset"
-	| "sun"
-	| "trash"
-	| "update";
-
+	| 'accessibility'
+	| 'arrow-left'
+	| 'arrow-right'
+	| 'avatar'
+	| 'calendar'
+	| 'camera'
+	| 'caret-down'
+	| 'caret-left'
+	| 'caret-right'
+	| 'caret-up'
+	| 'check'
+	| 'clock'
+	| 'cross-1'
+	| 'dashboard'
+	| 'desktop'
+	| 'dots-horizontal'
+	| 'download'
+	| 'envelope-closed'
+	| 'exit'
+	| 'file-text'
+	| 'github-logo'
+	| 'home'
+	| 'laptop'
+	| 'link-2'
+	| 'lock-closed'
+	| 'lock-open-1'
+	| 'magnifying-glass'
+	| 'minus'
+	| 'mix'
+	| 'moon'
+	| 'pencil-1'
+	| 'pencil-2'
+	| 'plus'
+	| 'plus2'
+	| 'question-mark-circled'
+	| 'reset'
+	| 'rocket'
+	| 'sun'
+	| 'trash'
+	| 'update'