Skip to content

Commit b5f347b

Browse files
integr-devintegr-dev
committed
Update
1 parent 97a5696 commit b5f347b

8 files changed

Lines changed: 146 additions & 69 deletions

File tree

‎package-lock.json‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.css‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
--color-one: oklch(var(--p));
77
--color-two: oklch(var(--s));
88
--bg-size: 200%;
9-
109
}
10+
1111
.main-shadow {
1212
height: 55px;
1313
background: linear-gradient(
@@ -174,7 +174,11 @@ footer {
174174
}
175175

176176
.entry {
177-
border-radius: var(--border-radius);
177+
border-radius: 200px;
178+
}
179+
180+
.no-pr {
181+
padding-right: 0 !important;
178182
}
179183

180184
.entry::before {
@@ -183,7 +187,6 @@ footer {
183187
inset: 0;
184188
border-radius: var(--border-radius);
185189
background: radial-gradient(var(--circle-width) circle at var(--x) var(--y),
186-
oklch(var(--p)),
187-
transparent);
190+
var(--color-one), transparent);
188191
}
189192

‎src/App.tsx‎

Lines changed: 67 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
import {Repos} from "./assets/Data.tsx";
1616
import HeroMainText from "./assets/HeroMainText.tsx";
1717
import Section from "./assets/Section.tsx";
18-
import MousePositionProvider from "./assets/MousePositionProvider.tsx";
18+
import GradientOutline from "./assets/GradientOutline.tsx";
1919

2020
export interface ProjectWrapper {
2121
name: string
@@ -36,7 +36,6 @@ function App() {
3636

3737
return (
3838
<>
39-
<MousePositionProvider />
4039
<NavBar searchCallback={setSearch}/>
4140

4241
<HeroElement search={search}/>
@@ -47,10 +46,12 @@ function App() {
4746

4847
<div className="flex flex-col items-center bg-repeat point_back content-wrap" id="repos">
4948
<div className="mt-20 flex flex-col items-center w-[100%]">
50-
{repos.map((repo: ProjectWrapper, index: number) => <RepoCard repo={repo} key={index} visible={shouldShow(repo)}/>)}
49+
{repos.map((repo: ProjectWrapper, index: number) => <RepoCard repo={repo} key={index}
50+
visible={shouldShow(repo)}/>)}
5151
</div>
5252
</div>
5353

54+
5455
<FooterRenderer/>
5556
</>
5657
)
@@ -64,30 +65,69 @@ function HeroElement(props: Props) {
6465
if (props.search === "") {
6566
return (
6667
<>
67-
<div className="hero bg-base-200 min-h-screen">
68+
<div className="hero bg-gradient-to-br from-base-200 to-base-300 min-h-screen ">
6869
<div className="hero-content text-center">
69-
<div className="max-w-md flex flex-col items-center justify-center">
70+
<div className="max-w-md flex flex-col items-center justify-center lg:mr-52">
7071
<div className="mb-10 avatar online">
7172
<div className="w-20 rounded-full">
72-
<img src="https://avatars.githubusercontent.com/u/74710895" alt="Profile Picture" className="rounded-full w-20"/>
73+
<img src="https://avatars.githubusercontent.com/u/74710895" alt="Profile Picture"
74+
className="rounded-full w-20"/>
7375
</div>
7476
</div>
7577

76-
<h1 className="text-5xl font-bold"><FontAwesomeIcon icon={faFire} className="mr-2" size="xs"/>Hey there, i'm</h1>
78+
<h1 className="text-5xl font-bold"><FontAwesomeIcon icon={faFire} className="mr-2"
79+
size="xs"/>Hey there, i'm</h1>
7780

78-
<HeroMainText />
81+
<HeroMainText/>
7982
<p className="py-6">
80-
I'm a <strong className="text-primary">{renderAge()}</strong> year old software developer
83+
I'm a <strong className="text-primary">{renderAge()}</strong> year old software
84+
developer
8185
from <strong className="text-primary">Austria</strong>.
8286
I'm passionate about open
8387
source and love to contribute to it's community. I'm also a huge fan of the <strong
8488
className="text-primary">Kotlin</strong> language.
8589
</p>
8690

8791
<button className="btn btn-primary" onClick={() => {
88-
document.getElementById("skills")!.scrollIntoView()
89-
}}><FontAwesomeIcon icon={faCompass}/>Explore</button>
92+
scrollToElementWithOffset("skills")
93+
}}><FontAwesomeIcon icon={faCompass}/>Explore
94+
</button>
9095
</div>
96+
97+
<GradientOutline circleWidth="250px" borderRadius="1.5rem" className="hidden lg:block">
98+
<div className="mockup-code bg-base-100 border border-base-300 w-full text-start">
99+
<pre data-prefix="$"><code>npm run dev</code></pre>
100+
<pre><code></code></pre>
101+
102+
<div className="flex">
103+
<pre className="text-success no-pr"><code>VITE v5.4.8</code></pre>
104+
<pre className="no-pr"><code>ready in</code></pre>
105+
<pre className="text-base-content"><code>257 ms</code></pre>
106+
</div>
107+
108+
<pre><code></code></pre>
109+
110+
<div className="flex">
111+
<pre className="text-success no-pr"><code>➜</code></pre>
112+
<pre className="text-base-content no-pr"><code>Local:</code></pre>
113+
<pre className="text-blue-500 underline"><code>http://localhost:5173/</code></pre>
114+
</div>
115+
<div className="flex">
116+
<pre className="text-success no-pr"><code>➜</code></pre>
117+
<pre className="no-pr"><code>Network: use</code></pre>
118+
<pre className="text-base-content no-pr"><code>--host</code></pre>
119+
<pre className=""><code> to expose</code></pre>
120+
</div>
121+
<div className="flex">
122+
<pre className="text-success no-pr"><code>➜</code></pre>
123+
<pre className="no-pr"><code>press</code></pre>
124+
<pre className="text-base-content no-pr"><code>h + enter</code></pre>
125+
<pre className=""><code>to show help</code></pre>
126+
</div>
127+
</div>
128+
129+
</GradientOutline>
130+
91131
</div>
92132

93133
<div className="flex flex-col h-screen justify-end">
@@ -100,6 +140,22 @@ function HeroElement(props: Props) {
100140
} else return (<></>)
101141
}
102142

143+
function scrollToElementWithOffset(elementId: string) {
144+
const element = document.getElementById(elementId);
145+
const offsetElement = document.getElementById("navbar_anchor");
146+
const offsetHeight = offsetElement?.offsetHeight || 0;
147+
148+
if (element) {
149+
const elementPosition = element.offsetTop;
150+
requestAnimationFrame(() => {
151+
window.scrollTo({
152+
top: elementPosition - offsetHeight,
153+
behavior: "smooth",
154+
});
155+
});
156+
}
157+
}
158+
103159
function renderAge() {
104160
// Calculate age from 27.5.2009
105161
const birthday = new Date(2009, 4, 27);

‎src/assets/GradientOutline.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,36 @@ import React, {useEffect, useRef} from "react";
22

33
interface GradientOutlineProps {
44
circleWidth: string;
5+
borderRadius: string;
56
className?: string;
67
children?: React.ReactNode;
78
}
89

9-
export default function GradientOutline({ circleWidth, className = "", children }: GradientOutlineProps) {
10-
const elRef = useRef<HTMLDivElement | null>(null);
10+
export default function GradientOutline({ circleWidth, borderRadius, className = "", children }: GradientOutlineProps) {
11+
const ref = useRef<HTMLDivElement>(null);
1112

1213
useEffect(() => {
13-
const handle = (e: MouseEvent) => {
14-
const rect = elRef.current?.getBoundingClientRect();
15-
if (rect) {
16-
const localX = e.clientX - rect.left;
17-
const localY = e.clientY - rect.top;
18-
elRef.current?.style.setProperty("--x", `${localX}px`);
19-
elRef.current?.style.setProperty("--y", `${localY}px`);
14+
const handle = (e: PointerEvent) => {
15+
if (ref.current) {
16+
const rect = ref.current.getBoundingClientRect();
17+
const x = e.clientX - rect.left;
18+
const y = e.clientY - rect.top;
19+
20+
ref.current.style.setProperty('--x', `${x}px`);
21+
ref.current.style.setProperty('--y', `${y}px`);
2022
}
2123
};
22-
window.addEventListener("mousemove", handle);
23-
return () => window.removeEventListener("mousemove", handle);
24+
25+
document.addEventListener("pointermove", handle);
26+
return () => document.removeEventListener("pointermove", handle);
2427
}, []);
2528

2629
return (
2730
<div
28-
className={`${className} entry relative p-[0.2rem] bg-transparent h-full`}
31+
ref={ref}
32+
className={`${className} entry relative p-[0.25rem]`}
2933
style={{
30-
"--border-radius": "calc(var(--radius-box)*1.08)",
34+
"--border-radius": borderRadius,
3135
"--circle-width": circleWidth,
3236
} as React.CSSProperties}
3337
>

‎src/assets/MousePositionProvider.tsx‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/assets/NavBar.tsx‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useState } from "react";
21
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
32
import {
43
faBars,
@@ -14,8 +13,6 @@ export interface Props {
1413
}
1514

1615
export default function NavBar(props: Props) {
17-
const [searchFocused, setSearchFocused] = useState(false);
18-
1916
const onThemeChange = () => {
2017
const theme = (document.querySelector('input[name="theme-dropdown"]:checked')! as HTMLInputElement).value;
2118
localStorage.setItem('theme', JSON.stringify(theme));
@@ -57,11 +54,11 @@ export default function NavBar(props: Props) {
5754
<ul
5855
tabIndex={0}
5956
className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
60-
<li><a onClick={() => document.getElementById("skills")!.scrollIntoView()} className="btn btn-sm btn-block btn-ghost justify-start"><FontAwesomeIcon icon={faCode}/>Skills</a></li>
61-
<li><a onClick={() => document.getElementById("libraries")!.scrollIntoView()} className="btn btn-sm btn-block btn-ghost justify-start"><FontAwesomeIcon icon={faBook}/>Libraries</a></li>
62-
<li><a onClick={() => document.getElementById("timeline")!.scrollIntoView()} className="btn btn-sm btn-block btn-ghost justify-start"><FontAwesomeIcon icon={faClock}/>Timeline</a></li>
63-
<li><a onClick={() => document.getElementById("favourites")!.scrollIntoView()} className="btn btn-sm btn-block btn-ghost justify-start"><FontAwesomeIcon icon={faBoxesStacked}/>Favourite Stack</a></li>
64-
<li><a onClick={() => document.getElementById("repos")!.scrollIntoView()} className="btn btn-sm btn-block btn-ghost justify-start"><FontAwesomeIcon icon={faFolder}/>Repositories</a></li>
57+
<li><a onClick={() => scrollToElementWithOffset("skills")} className="btn btn-sm btn-block btn-ghost justify-start"><FontAwesomeIcon icon={faCode}/>Skills</a></li>
58+
<li><a onClick={() => scrollToElementWithOffset("libraries")} className="btn btn-sm btn-block btn-ghost justify-start"><FontAwesomeIcon icon={faBook}/>Libraries</a></li>
59+
<li><a onClick={() => scrollToElementWithOffset("timeline")} className="btn btn-sm btn-block btn-ghost justify-start"><FontAwesomeIcon icon={faClock}/>Timeline</a></li>
60+
<li><a onClick={() => scrollToElementWithOffset("favourites")} className="btn btn-sm btn-block btn-ghost justify-start"><FontAwesomeIcon icon={faBoxesStacked}/>Favourite Stack</a></li>
61+
<li><a onClick={() => scrollToElementWithOffset("repos")} className="btn btn-sm btn-block btn-ghost justify-start"><FontAwesomeIcon icon={faFolder}/>Repositories</a></li>
6562
</ul>
6663
</div>
6764

@@ -120,7 +117,7 @@ export default function NavBar(props: Props) {
120117
</div>
121118
<div className="navbar-center">
122119
<label
123-
className={`cursor-text input input-bordered hidden items-center gap-2 lg:w-96 lg:flex${searchFocused ? " input-primary" : ""}`}
120+
className="cursor-text input input-bordered hidden items-center gap-2 lg:w-96 lg:flex"
124121
>
125122
<FontAwesomeIcon icon={faMagnifyingGlass}/>
126123
<input
@@ -129,8 +126,6 @@ export default function NavBar(props: Props) {
129126
id="search_bar"
130127
placeholder="Search"
131128
onKeyUp={() => props.searchCallback((document.getElementById("search_bar")! as HTMLInputElement).value)}
132-
onFocus={() => setSearchFocused(true)}
133-
onBlur={() => setSearchFocused(false)}
134129
/>
135130
<kbd className="kbd kbd-sm select-none cursor-text">ctrl</kbd>
136131
<kbd className="kbd kbd-sm select-none cursor-text">k</kbd>
@@ -149,4 +144,21 @@ export default function NavBar(props: Props) {
149144
</div>
150145
</>
151146
)
147+
}
148+
149+
150+
function scrollToElementWithOffset(elementId: string) {
151+
const element = document.getElementById(elementId);
152+
const offsetElement = document.getElementById("navbar_anchor");
153+
const offsetHeight = offsetElement?.offsetHeight || 0;
154+
155+
if (element) {
156+
const elementPosition = element.offsetTop;
157+
requestAnimationFrame(() => {
158+
window.scrollTo({
159+
top: elementPosition - offsetHeight,
160+
behavior: "smooth",
161+
});
162+
});
163+
}
152164
}

0 commit comments

Comments
 (0)