Add service page

global.d.ts

@@ -5,3 +5,4 @@ declare module '*.svg' {
 declare module "*.png?format=avif"
 declare module "*.svg";
 declare module "*.gif";
+declare module "*.png";

src/App.tsx

@@ -10,6 +10,7 @@ import Index from './pages/Index';
 import Hire from './pages/Hire';
 import Work from './pages/Work';
 import About from './pages/About';
+import Services from './pages/Services';
 import Stories from './pages/Stories';
 import Article from './pages/Article';
 import Contact from './pages/Contact';
@@ -46,6 +47,10 @@ const App = () => {
                     path: '/Work',
                     element: <Work />
                 },
+                {
+                    path: '/Webdesign',
+                    element: <Services />
+                },
                 {
                     path: '/About',
                     element: <About />

src/components/Header.tsx

@@ -32,6 +32,11 @@ const Header = () => {
 				filter: 'none',
 				pointerEvents: 'all'
 			});
+			gsap.to('svg', {
+				top: '-13rem',
+				duration: 0,
+				delay: 0
+			});
 			gsap.to(mobile.current!.querySelectorAll(':scope nav > .mobile ul li a'), {
 				x: 200,
 				opacity: 0,
@@ -57,6 +62,11 @@ const Header = () => {
 				filter: 'blur(8px)',
 				pointerEvents: 'none'
 			});
+			gsap.to('svg', {
+				top: '-13rem',
+				duration: 0,
+				delay: 0
+			});
 			gsap.to(mobile.current!.querySelectorAll(':scope nav > .mobile ul li a'), {
 				x: 0,
 				opacity: 1,

src/components/Navigation.tsx

@@ -21,6 +21,9 @@ const Navigation = ({ mobile = defaultProps.mobile }: Props) => {
 
 		(e.target as HTMLElement).classList.add('active');
 
+		/* Don't apply flicker to highlight element */
+		if((e.target as HTMLElement).classList.contains('highlight')) return;
+
 		gsap.to(e.target, {
 			autoAlpha: 0,
 			repeat: 2,
@@ -42,23 +45,20 @@ const Navigation = ({ mobile = defaultProps.mobile }: Props) => {
 	const items = [
 		{
 			title: 'Stories',
-			url: 'stories',
-			colour: 'none'
+			url: 'stories'
 		},
 		{
 			title: 'About Me',
-			url: 'about',
-			colour: 'none'
+			url: 'about'
 		},
 		{
 			title: 'Work',
-			url: 'work',
-			colour: 'none'
+			url: 'work'
 		},
 		{
-			title: 'Hire Me',
-			url: 'hire',
-			colour: 'none'
+			title: 'Services',
+			url: 'webdesign',
+			highlight: true
 		}
 	];
 
@@ -69,10 +69,10 @@ const Navigation = ({ mobile = defaultProps.mobile }: Props) => {
 					{items.map((items: any, index: number) => {
 						return (
 							<li key={index}>
-								<NavLink onMouseLeave={unhoverItem} onClick={clickedItem} to={'/' + items.url} className={({ isActive }) => (isActive || (items.url === 'stories' && pathname.includes('/article')) ? 'active' : '') + (items.url === 'hire' ? ' hire' : '')} data-colour={items.colour} data-hover={items.title}>
+								<NavLink onMouseLeave={unhoverItem} onClick={clickedItem} to={'/' + items.url} className={({ isActive }) => (isActive || (items.url === 'stories' && pathname.includes('/article')) ? 'active' : '') + /* (items.url === 'hire' ? ' hire' : '') + */ (items.highlight ? ' highlight' : '')} data-hover={items.title}>
 									<span>{items.title}</span>
 								</NavLink>
-								{items.url === 'hire' && <sup>Busy &mdash; No offers</sup>}
+								{/* {items.url === 'hire' && <sup>Busy &mdash; No offers</sup>} */}
 							</li>
 						);
 					})}

src/components/Spotlight.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+/* Assets */
+import DesignSpotlight from '../assets/images/spotlight/design.png?format=avif';
+import MarketingSpotlight from '../assets/images/spotlight/marketing.png?format=avif';
+import CodeSpotlight from '../assets/images/spotlight/code.png?format=avif';
+import AiSpotlight from '../assets/images/spotlight/ai.png?format=avif';
+
+/* Misc */
+import { Link } from 'react-router-dom';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/pagination';
+
+// Import required modules
+import { Autoplay, Pagination } from 'swiper/modules';
+import Heading from '../components/Heading';
+
+const Spotlight = () => {
+
+	const spotlightItems = [
+		{
+			illustration: DesignSpotlight,
+			title: 'Interaction Design',
+			description: 'Crafting intuitive and seamless user experiences through thoughtful interaction design is my passion and expertise.',
+			buttonTitle: 'Learn more',
+			buttonTarget: '/hire'
+		},
+		{
+			illustration: MarketingSpotlight,
+			title: 'Online Marketing',
+			description: 'Driving digital success through strategic marketing initiatives to maximise reach and engagement.',
+			buttonTitle: 'Learn more',
+			buttonTarget: '/hire'
+		},
+		{
+			illustration: CodeSpotlight,
+			title: 'Web & App Development',
+			description: 'Empowering digital experiences through dynamic web development and impactful solutions in the realm of the web.',
+			buttonTitle: 'Learn more',
+			buttonTarget: '/hire'
+		},
+		{
+			illustration: AiSpotlight,
+			title: 'Artificial Intelligence',
+			description: 'Harnessing the power of AI, I innovate and implement solutions that redefine possibilities and elevate user experiences.',
+			buttonTitle: 'Learn more',
+			buttonTarget: '/hire'
+		}
+	];
+
+	return (
+		<div className="spotlight">
+			<Heading container={true}>Spotlight</Heading>
+			<Swiper
+				spaceBetween={30}
+				centeredSlides={true}
+				slidesPerView={'auto'}
+				loop={true}
+				autoplay={{
+					delay: 2500,
+					disableOnInteraction: true
+				}}
+				pagination={{clickable: true}}
+				modules={[Autoplay, Pagination]}
+				className="cards"
+			>
+				{spotlightItems.map((item: any, index: number) =>
+					<SwiperSlide className="card" key={index}>
+						<div className="illustration">
+							<img src={item.illustration} alt={item.title}/>
+						</div>
+						<div className="description">
+							<h2>{item.title}</h2>
+							<p>{item.description}</p>
+							<div className="actions">
+								<Link to={item.buttonTarget} className="button primary">{item.buttonTitle}</Link>
+							</div>
+						</div>
+					</SwiperSlide>
+				)}
+			</Swiper>
+		</div>
+	)
+}
+
+export default Spotlight;

src/pages/Hire.tsx

@@ -227,11 +227,11 @@ const Index = () => {
 			icon: TeamLike
 		},
 		{
-			name: 'Company Hardware',
+			name: 'Latest Hardware',
 			icon: HardwareLike
 		},
 		{
-			name: 'Kotlin & TypeScript',
+			name: 'Kotlin, php, TypeScript',
 			icon: JavaLike
 		},
 		{
@@ -335,7 +335,7 @@ const Index = () => {
 					{likeItems.map((like: any, index: number) =>
 						<div className="like" key={index}>
 							<img src={like.icon} alt={like.name}/>
-							<h2>{like.name}</h2>
+							<h2>{like.name.replaceAll('%n', '<br />')}</h2>
 						</div>
 					)}
 				</div>

src/pages/Index.tsx

@@ -1,20 +1,15 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
 
 /* Components */
 import Connect from './../components/Connect';
+import Spotlight from './../components/Spotlight';
 
 /* Assets */
 import FelixTransparent from '../assets/images/promos/felix-transparent.png?format=avif';
 import GithubLogo from '../assets/icons/github.svg';
 import LinkedInLogo from '../assets/icons/linkedin.svg';
 import XingLogo from '../assets/icons/xing.svg';
 
-import DesignSpotlight from '../assets/images/spotlight/design.png?format=avif';
-import MarketingSpotlight from '../assets/images/spotlight/marketing.png?format=avif';
-import CodeSpotlight from '../assets/images/spotlight/code.png?format=avif';
-import AiSpotlight from '../assets/images/spotlight/ai.png?format=avif';
-
 import UserIcon from '../assets/icons/user.svg';
 import ClockIcon from '../assets/icons/clock.svg';
 import ShareIcon from '../assets/icons/share.svg';
@@ -26,12 +21,7 @@ import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { useGSAP } from '@gsap/react';
 
-// Import Swiper styles
-import 'swiper/css';
-import 'swiper/css/pagination';
-
 // import required modules
-import { Autoplay, Pagination } from 'swiper/modules';
 import { SplitText } from "../services/SplitText";
 import TechStack from "../components/TechStack";
 import Heading from "../components/Heading";
@@ -43,37 +33,6 @@ const Index = () => {
     /* Register ScrollTrigger */
     gsap.registerPlugin(ScrollTrigger);
 
-    const spotlightItems = [
-        {
-            illustration: DesignSpotlight,
-            title: 'Interaction Design',
-            description: 'Crafting intuitive and seamless user experiences through thoughtful interaction design is my passion and expertise.',
-            buttonTitle: 'Learn more',
-            buttonTarget: '/hire'
-        },
-        {
-            illustration: MarketingSpotlight,
-            title: 'Online Marketing',
-            description: 'Driving digital success through strategic marketing initiatives to maximise reach and engagement.',
-            buttonTitle: 'Learn more',
-            buttonTarget: '/hire'
-        },
-        {
-            illustration: CodeSpotlight,
-            title: 'Web & App Development',
-            description: 'Empowering digital experiences through dynamic web development and impactful solutions in the realm of the web.',
-            buttonTitle: 'Learn more',
-            buttonTarget: '/hire'
-        },
-        {
-            illustration: AiSpotlight,
-            title: 'Artificial Intelligence',
-            description: 'Harnessing the power of AI, I innovate and implement solutions that redefine possibilities and elevate user experiences.',
-            buttonTitle: 'Learn more',
-            buttonTarget: '/hire'
-        }
-    ];
-
     useEffect(() => {
         const storyCards: NodeListOf<HTMLDivElement> = document.querySelectorAll('.stories .card');
         storyCards.forEach((card: HTMLDivElement) => {
@@ -245,37 +204,7 @@ const Index = () => {
                 </div>
             </div>
             <TechStack />
-            <div className="spotlight">
-                <Heading container={true}>Spotlight</Heading>
-                <Swiper
-                    spaceBetween={30}
-                    centeredSlides={true}
-                    slidesPerView={'auto'}
-                    loop={true}
-                    autoplay={{
-                        delay: 2500,
-                        disableOnInteraction: true
-                    }}
-                    pagination={{clickable: true}}
-                    modules={[Autoplay, Pagination]}
-                    className="cards"
-                >
-                    {spotlightItems.map((item: any, index: number) =>
-                        <SwiperSlide className="card" key={index}>
-                            <div className="illustration">
-                                <img src={item.illustration} alt={item.title}/>
-                            </div>
-                            <div className="description">
-                                <h2>{item.title}</h2>
-                                <p>{item.description}</p>
-                                <div className="actions">
-                                    <Link to={item.buttonTarget} className="button primary">{item.buttonTitle}</Link>
-                                </div>
-                            </div>
-                        </SwiperSlide>
-                    )}
-                </Swiper>
-            </div>
+            <Spotlight />
             <div className="stories" ref={stories}>
                 <Heading container={true}>Stories</Heading>
                 <div className="cards container">