Skip to content

Commit 308588d

Browse files
integr-devintegr-dev
committed
update
1 parent b5f347b commit 308588d

File tree

9 files changed

+115
-85
lines changed

9 files changed

+115
-85
lines changed

‎src/App.css‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@ body {
6767

6868
html {
6969
scroll-behavior: smooth;
70-
background: url('assets/img/point_pat.svg') repeat;
71-
background-size: 30px;
70+
background: oklch(var(--b2)) url('assets/img/graph-paper.svg') repeat center left 6.8rem fixed !important;
71+
background-size: 10rem !important;
7272
background-blend-mode: exclusion;
7373
font-family: "Roboto", sans-serif !important;
7474
}
@@ -190,3 +190,21 @@ footer {
190190
var(--color-one), transparent);
191191
}
192192

193+
.back-grid {
194+
background: linear-gradient(to bottom right, oklch(var(--b1)), oklch(var(--p) / 0.4));
195+
}
196+
.bg-transparent {
197+
background: transparent !important;
198+
box-shadow: none !important;
199+
border-color: transparent !important;
200+
}
201+
202+
.bg-opacity-100 {
203+
background: rgba(255, 255, 255, 0.9); /* Adjust as needed */
204+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
205+
}
206+
207+
.navbar {
208+
transition: background 0.3s ease, box-shadow 0.3s ease;
209+
}
210+

‎src/App.tsx‎

Lines changed: 3 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import NavBar from "./assets/NavBar.tsx";
33
import {useState} from "react";
44
import RepoCard from "./assets/RepoCard.tsx";
55
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
6-
import cImg from "./assets/img/tool/c.png";
76
import {
87
faChevronDown,
98
faCompass,
@@ -15,7 +14,6 @@ import {
1514
import {Repos} from "./assets/Data.tsx";
1615
import HeroMainText from "./assets/HeroMainText.tsx";
1716
import Section from "./assets/Section.tsx";
18-
import GradientOutline from "./assets/GradientOutline.tsx";
1917

2018
export interface ProjectWrapper {
2119
name: string
@@ -44,7 +42,7 @@ function App() {
4442
<Timeline search={search}/>
4543
<FavouritesElement search={search}/>
4644

47-
<div className="flex flex-col items-center bg-repeat point_back content-wrap" id="repos">
45+
<div className="back-grid flex flex-col items-center bg-repeat point_back content-wrap" id="repos">
4846
<div className="mt-20 flex flex-col items-center w-[100%]">
4947
{repos.map((repo: ProjectWrapper, index: number) => <RepoCard repo={repo} key={index}
5048
visible={shouldShow(repo)}/>)}
@@ -65,9 +63,9 @@ function HeroElement(props: Props) {
6563
if (props.search === "") {
6664
return (
6765
<>
68-
<div className="hero bg-gradient-to-br from-base-200 to-base-300 min-h-screen ">
66+
<div className="hero back-grid min-h-screen">
6967
<div className="hero-content text-center">
70-
<div className="max-w-md flex flex-col items-center justify-center lg:mr-52">
68+
<div className="max-w-md flex flex-col items-center justify-center">
7169
<div className="mb-10 avatar online">
7270
<div className="w-20 rounded-full">
7371
<img src="https://avatars.githubusercontent.com/u/74710895" alt="Profile Picture"
@@ -94,40 +92,6 @@ function HeroElement(props: Props) {
9492
</button>
9593
</div>
9694

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-
13195
</div>
13296

13397
<div className="flex flex-col h-screen justify-end">
@@ -201,10 +165,6 @@ function SkillsElement(props: Props) {
201165
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/spring/spring-original.svg"} alt={"Spring"}/>
202166
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/git/git-original.svg"} alt={"Git"}/>
203167
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vuejs/vuejs-original.svg"} alt={"Vue"}/>
204-
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/gradle/gradle-original.svg"} alt={"Gradle"} />
205-
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-original.svg"} alt={"Tailwind"} />
206-
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-plain.svg"} alt={"Docker"} />
207-
<ToolImage img={cImg} alt={"C"} />
208168
</div>
209169
</div>
210170
</div>

‎src/assets/GradientOutline.tsx‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,68 @@
1-
import React, {useEffect, useRef} from "react";
1+
import React, {useEffect, useRef, useState} from "react";
22

33
interface GradientOutlineProps {
44
circleWidth: string;
55
borderRadius: string;
66
className?: string;
77
children?: React.ReactNode;
88
}
9+
type MouseListener = (pos: { x: number; y: number }) => void;
10+
11+
let mousePos = { x: 0, y: 0 };
12+
const listeners: MouseListener[] = [];
13+
let handlerRegistered = false;
14+
15+
16+
function notifyListeners() {
17+
listeners.forEach(listener => listener(mousePos));
18+
}
19+
20+
function registerHandler() {
21+
if (!handlerRegistered) {
22+
document.addEventListener("pointermove", (e: PointerEvent) => {
23+
mousePos = { x: e.clientX, y: e.clientY };
24+
notifyListeners();
25+
});
26+
handlerRegistered = true;
27+
}
28+
}
29+
30+
function useMouse() {
31+
const [pos, setPos] = useState(mousePos);
32+
33+
useEffect(() => {
34+
registerHandler();
35+
listeners.push(setPos);
36+
return () => {
37+
const idx = listeners.indexOf(setPos);
38+
if (idx !== -1) listeners.splice(idx, 1);
39+
};
40+
}, []);
41+
42+
return pos;
43+
}
944

1045
export default function GradientOutline({ circleWidth, borderRadius, className = "", children }: GradientOutlineProps) {
1146
const ref = useRef<HTMLDivElement>(null);
47+
const {x, y} = useMouse();
1248

1349
useEffect(() => {
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`);
22-
}
23-
};
50+
if (ref.current) {
51+
const rect = ref.current.getBoundingClientRect();
52+
const xN = x - rect.left;
53+
const yN = y - rect.top;
2454

25-
document.addEventListener("pointermove", handle);
26-
return () => document.removeEventListener("pointermove", handle);
27-
}, []);
55+
ref.current.style.setProperty('--x', `${xN}px`);
56+
ref.current.style.setProperty('--y', `${yN}px`);
57+
}
58+
}, [x, y]);
2859

2960
return (
3061
<div
3162
ref={ref}
3263
className={`${className} entry relative p-[0.25rem]`}
3364
style={{
34-
"--border-radius": borderRadius,
65+
"--border-radius": `calc(${borderRadius} + 0.25rem)`,
3566
"--circle-width": circleWidth,
3667
} as React.CSSProperties}
3768
>

‎src/assets/NavBar.tsx‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,28 @@ import {
77
faPalette
88
} from "@fortawesome/free-solid-svg-icons";
99
import { faGithub } from "@fortawesome/free-brands-svg-icons";
10+
import { useEffect, useState } from "react";
1011

1112
export interface Props {
1213
searchCallback: (search: string) => void
1314
}
1415

1516
export default function NavBar(props: Props) {
17+
const [isAtTop, setIsAtTop] = useState(true);
18+
19+
useEffect(() => {
20+
const onScroll = () => setIsAtTop(window.scrollY === 0);
21+
window.addEventListener("scroll", onScroll);
22+
onScroll();
23+
return () => window.removeEventListener("scroll", onScroll);
24+
}, []);
25+
1626
const onThemeChange = () => {
1727
const theme = (document.querySelector('input[name="theme-dropdown"]:checked')! as HTMLInputElement).value;
1828
localStorage.setItem('theme', JSON.stringify(theme));
1929
}
2030

21-
onload = () => {
31+
useEffect(() => {
2232
const theme = JSON.parse(localStorage.getItem('theme')!);
2333
if (theme) {
2434
(document.querySelector(`input[value="${theme}"]`)! as HTMLInputElement).checked = true;
@@ -27,25 +37,33 @@ export default function NavBar(props: Props) {
2737
themeControllers.forEach(controller => {
2838
controller.addEventListener('change', onThemeChange);
2939
});
30-
}
31-
32-
onkeydown = (e: KeyboardEvent) => {
33-
if (e.ctrlKey && e.key === 'k') {
34-
document.getElementById("search_bar")!.focus();
35-
e.preventDefault();
36-
}
3740

38-
if (e.key === 'Escape') {
39-
document.getElementById("search_bar")!.blur();
40-
(document.getElementById("search_bar")! as HTMLInputElement).value = "";
41-
props.searchCallback("");
42-
}
43-
}
41+
const onKeyDown = (e: KeyboardEvent) => {
42+
if (e.ctrlKey && e.key === 'k') {
43+
document.getElementById("search_bar")!.focus();
44+
e.preventDefault();
45+
}
46+
if (e.key === 'Escape') {
47+
document.getElementById("search_bar")!.blur();
48+
(document.getElementById("search_bar")! as HTMLInputElement).value = "";
49+
props.searchCallback("");
50+
}
51+
};
52+
window.addEventListener("keydown", onKeyDown);
53+
return () => {
54+
window.removeEventListener("keydown", onKeyDown);
55+
};
56+
}, [props]);
4457

4558
return (
4659
<>
4760
<div>
48-
<div className="navbar bg-base-100 fixed z-10 border-b-2 border-b-base-300 h-[4.5rem]" id="navbar_anchor">
61+
<div
62+
className={`navbar bg-base-100 backdrop-blur fixed z-10 border-b-2 border-b-base-300 h-[4.5rem] transition-all duration-300 ${
63+
isAtTop ? "bg-transparent shadow-none" : "bg-opacity-55 border-opacity-55"
64+
}`}
65+
id="navbar_anchor"
66+
>
4967
<div className="navbar-start">
5068
<div className="dropdown">
5169
<div tabIndex={0} role="button" className="btn btn-ghost btn-circle">
@@ -117,7 +135,7 @@ export default function NavBar(props: Props) {
117135
</div>
118136
<div className="navbar-center">
119137
<label
120-
className="cursor-text input input-bordered hidden items-center gap-2 lg:w-96 lg:flex"
138+
className="bg-opacity-20 cursor-text input input-bordered hidden items-center gap-2 lg:w-96 lg:flex"
121139
>
122140
<FontAwesomeIcon icon={faMagnifyingGlass}/>
123141
<input
@@ -146,7 +164,6 @@ export default function NavBar(props: Props) {
146164
)
147165
}
148166

149-
150167
function scrollToElementWithOffset(elementId: string) {
151168
const element = document.getElementById(elementId);
152169
const offsetElement = document.getElementById("navbar_anchor");

‎src/assets/RepoCard.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
55
import {faBook, faUpRightFromSquare} from "@fortawesome/free-solid-svg-icons";
66
import {ProjectWrapper} from "../App.tsx";
77
import {useEffect, useState} from "react";
8-
import Section from "./Section.tsx";
98
import GradientOutline from "./GradientOutline.tsx";
109

1110
export interface Props {
@@ -61,9 +60,9 @@ export default function RepoCard(props: Props) {
6160
if (props.visible) {
6261
return (
6362
<>
64-
<Section id={props.repo.name} className="w-[90vw] lg:w-9/12 m-5">
65-
<GradientOutline circleWidth="300px" borderRadius="1.4rem" className="">
66-
<div className="card bg-base-100 shadow-xl border-base-200 border-2">
63+
<div className="w-[90vw] lg:w-9/12 m-5">
64+
<GradientOutline circleWidth="300px" borderRadius="var(--rounded-box, 1rem)" className="">
65+
<div className="card bg-base-100 bg-opacity-65 backdrop-blur-[10000px] shadow-xl">
6766
<div className="card-body">
6867
<div className="flex justify-between flex-col lg:flex-row">
6968
<div>
@@ -83,7 +82,7 @@ export default function RepoCard(props: Props) {
8382
</div>
8483
</div>
8584
</GradientOutline>
86-
</Section>
85+
</div>
8786
</>
8887
)
8988
} else return <></>

‎src/assets/img/graph-paper.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/img/plus.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/assets/img/tool/c.png‎

-48.3 KB
Binary file not shown.

‎src/main.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
import { StrictMode } from 'react'
21
import { createRoot } from 'react-dom/client'
32
import App from './App.tsx'
43
import './index.css'
54

65
createRoot(document.getElementById('root')!).render(
7-
<StrictMode>
86
<App />
9-
</StrictMode>,
107
)

0 commit comments

Comments
 (0)