Skip to content

Commit 97a5696

Browse files
integr-devintegr-dev
committed
update
1 parent 793c279 commit 97a5696

21 files changed

Lines changed: 110 additions & 63 deletions

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en" data-theme="sunset">
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/src/assets/img/icon_round.png" />

‎src/App.css‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ footer {
8585
}
8686

8787
.flip-container {
88-
perspective: 1000px;
88+
perspective: 1200px;
8989
display: inline-block;
9090
position: relative;
9191
width: 320px;
@@ -99,7 +99,7 @@ footer {
9999
backface-visibility: hidden;
100100
top: 0;
101101
left: 0;
102-
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
102+
transition: transform 0.8s cubic-bezier(0.68, -0.9, 0.32, 1.9);
103103
display: flex;
104104
flex-direction: column;
105105
align-items: center;
@@ -109,21 +109,21 @@ footer {
109109
.flip-front {
110110
z-index: 2;
111111
background: transparent;
112-
transform: rotateX(0deg) scale(1) rotateY(0deg) skewY(0deg);
112+
transform: rotateX(0deg) scale(1) skew(0);
113113
}
114114

115115
.flip-back {
116116
z-index: 1;
117117
background: transparent;
118-
transform: rotateX(180deg) scale(0.5) rotateY(50deg) skewY(-50deg);
118+
transform: rotateX(180deg) scale(0.3) skew(20deg);
119119
}
120120

121121
.flip-container.flipped .flip-front {
122-
transform: rotateX(180deg) scale(0.5) rotateY(50deg) skewY(-50deg);
122+
transform: rotateX(180deg) scale(0.3) skew(-20deg);
123123
}
124124

125125
.flip-container.flipped .flip-back {
126-
transform: rotateX(0deg) scale(1) rotateY(0deg) skewY(0deg);
126+
transform: rotateX(0deg) scale(1) skew(0);
127127
}
128128

129129
.section {
@@ -173,3 +173,17 @@ footer {
173173
}
174174
}
175175

176+
.entry {
177+
border-radius: var(--border-radius);
178+
}
179+
180+
.entry::before {
181+
content: '';
182+
position: absolute;
183+
inset: 0;
184+
border-radius: var(--border-radius);
185+
background: radial-gradient(var(--circle-width) circle at var(--x) var(--y),
186+
oklch(var(--p)),
187+
transparent);
188+
}
189+

‎src/App.tsx‎

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +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 kotlinImg from "./assets/img/tool/kotlin.png";
7-
import csharpImg from "./assets/img/tool/csharp.png";
8-
import javaImg from "./assets/img/tool/java.png";
9-
import pythonImg from "./assets/img/tool/python.png";
10-
import javascriptImg from "./assets/img/tool/javascript.png";
11-
import typescriptImg from "./assets/img/tool/typescript.png";
12-
import htmlImg from "./assets/img/tool/html.png";
13-
import cssImg from "./assets/img/tool/css.png";
14-
import reactImg from "./assets/img/tool/react.png";
15-
import mongoImg from "./assets/img/tool/mongo.svg";
16-
import mysqlImg from "./assets/img/tool/mysql.svg";
17-
import springImg from "./assets/img/tool/spring.svg";
18-
import gitImg from "./assets/img/tool/git.png";
19-
import vueImg from "./assets/img/tool/vue.png";
206
import cImg from "./assets/img/tool/c.png";
217
import {
228
faChevronDown,
@@ -29,6 +15,7 @@ import {
2915
import {Repos} from "./assets/Data.tsx";
3016
import HeroMainText from "./assets/HeroMainText.tsx";
3117
import Section from "./assets/Section.tsx";
18+
import MousePositionProvider from "./assets/MousePositionProvider.tsx";
3219

3320
export interface ProjectWrapper {
3421
name: string
@@ -49,6 +36,7 @@ function App() {
4936

5037
return (
5138
<>
39+
<MousePositionProvider />
5240
<NavBar searchCallback={setSearch}/>
5341

5442
<HeroElement search={search}/>
@@ -143,21 +131,24 @@ function SkillsElement(props: Props) {
143131

144132
<div className="flex justify-center flex-col">
145133
<div>
146-
<ToolImage img={kotlinImg} alt={"Kotlin"}/>
147-
<ToolImage img={javaImg} alt={"Java"}/>
148-
<ToolImage img={csharpImg} alt={"C#"}/>
149-
<ToolImage img={pythonImg} alt={"Python"}/>
150-
<ToolImage img={javascriptImg} alt={"JavaScript"}/>
151-
<ToolImage img={typescriptImg} alt={"TypeScript"}/>
152-
<ToolImage img={htmlImg} alt={"HTML"}/>
153-
<ToolImage img={cssImg} alt={"CSS"}/>
154-
<ToolImage img={reactImg} alt={"React"}/>
155-
<ToolImage img={mongoImg} alt={"MongoDB"}/>
156-
<ToolImage img={mysqlImg} alt={"MySQL"}/>
157-
<ToolImage img={springImg} alt={"Spring"}/>
158-
<ToolImage img={gitImg} alt={"Git"}/>
159-
<ToolImage img={vueImg} alt={"Vue"}/>
160-
<ToolImage img={cImg} alt={"C"}/>
134+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/kotlin/kotlin-original.svg"} alt={"Kotlin"}/>
135+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/java/java-original.svg"} alt={"Java"}/>
136+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/csharp/csharp-original.svg"} alt={"C#"}/>
137+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg"} alt={"Python"}/>
138+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg"} alt={"JavaScript"}/>
139+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg"} alt={"TypeScript"}/>
140+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg"} alt={"HTML"}/>
141+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-original.svg"} alt={"CSS"}/>
142+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg"} alt={"React"}/>
143+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mongodb/mongodb-original-wordmark.svg"} alt={"MongoDB"}/>
144+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original.svg"} alt={"MySQL"}/>
145+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/spring/spring-original.svg"} alt={"Spring"}/>
146+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/git/git-original.svg"} alt={"Git"}/>
147+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vuejs/vuejs-original.svg"} alt={"Vue"}/>
148+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/gradle/gradle-original.svg"} alt={"Gradle"} />
149+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-original.svg"} alt={"Tailwind"} />
150+
<ToolImage img={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-plain.svg"} alt={"Docker"} />
151+
<ToolImage img={cImg} alt={"C"} />
161152
</div>
162153
</div>
163154
</div>

‎src/assets/GradientOutline.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, {useEffect, useRef} from "react";
2+
3+
interface GradientOutlineProps {
4+
circleWidth: string;
5+
className?: string;
6+
children?: React.ReactNode;
7+
}
8+
9+
export default function GradientOutline({ circleWidth, className = "", children }: GradientOutlineProps) {
10+
const elRef = useRef<HTMLDivElement | null>(null);
11+
12+
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`);
20+
}
21+
};
22+
window.addEventListener("mousemove", handle);
23+
return () => window.removeEventListener("mousemove", handle);
24+
}, []);
25+
26+
return (
27+
<div
28+
className={`${className} entry relative p-[0.2rem] bg-transparent h-full`}
29+
style={{
30+
"--border-radius": "calc(var(--radius-box)*1.08)",
31+
"--circle-width": circleWidth,
32+
} as React.CSSProperties}
33+
>
34+
{children}
35+
</div>
36+
);
37+
}

‎src/assets/MousePositionProvider.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { useEffect } from "react";
2+
3+
export default function MousePositionProvider() {
4+
useEffect(() => {
5+
const handleMouseMove = (e: MouseEvent) => {
6+
document.documentElement.style.setProperty("--x", `${e.clientX}px`);
7+
document.documentElement.style.setProperty("--y", `${e.clientY}px`);
8+
};
9+
window.addEventListener("mousemove", handleMouseMove);
10+
return () => window.removeEventListener("mousemove", handleMouseMove);
11+
}, []);
12+
return null;
13+
}

‎src/assets/NavBar.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export default function NavBar(props: Props) {
2424
onload = () => {
2525
const theme = JSON.parse(localStorage.getItem('theme')!);
2626
if (theme) {
27-
document.documentElement.setAttribute('data-theme', theme);
2827
(document.querySelector(`input[value="${theme}"]`)! as HTMLInputElement).checked = true;
2928
}
3029
const themeControllers = document.querySelectorAll('.theme-controller');
@@ -140,7 +139,7 @@ export default function NavBar(props: Props) {
140139

141140
<div className="navbar-end">
142141
<button className="btn btn-ghost btn-circle"
143-
onClick={() => window.open("https://github.com/Integr-0", '_blank')!.focus()}>
142+
onClick={() => window.open("https://github.com/integr-dev", '_blank')!.focus()}>
144143
<FontAwesomeIcon icon={faGithub} size="xl"/>
145144
</button>
146145
</div>

‎src/assets/RepoCard.tsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {faBook, faUpRightFromSquare} from "@fortawesome/free-solid-svg-icons";
66
import {ProjectWrapper} from "../App.tsx";
77
import {useEffect, useState} from "react";
88
import Section from "./Section.tsx";
9+
import GradientOutline from "./GradientOutline.tsx";
910

1011
export interface Props {
1112
repo: ProjectWrapper
@@ -60,24 +61,26 @@ export default function RepoCard(props: Props) {
6061
if (props.visible) {
6162
return (
6263
<>
63-
<Section className="card bg-base-100 shadow-xl border-base-200 border-2 m-6 w-[90vw] lg:w-9/12" id={props.repo.name}>
64-
<div className="card-body">
65-
<div className="flex justify-between flex-col lg:flex-row">
66-
<div>
67-
<h2 className="card-title">{props.repo.name}</h2>
68-
<p>{props.repo.description}</p>
69-
</div>
64+
<GradientOutline circleWidth="200px" className="w-[90vw] lg:w-9/12">
65+
<Section className="card bg-base-100 shadow-xl border-base-200 border-2 m-6" id={props.repo.name}>
66+
<div className="card-body">
67+
<div className="flex justify-between flex-col lg:flex-row">
68+
<div>
69+
<h2 className="card-title">{props.repo.name}</h2>
70+
<p>{props.repo.description}</p>
71+
</div>
7072

71-
<button className="btn btn-primary w-24 mt-3 lg:mt-0"
72-
onClick={() => window.open(props.repo.projectUrl, '_blank')!.focus()}><FontAwesomeIcon
73-
icon={faUpRightFromSquare}/>View
74-
</button>
73+
<button className="btn btn-primary w-24 mt-3 lg:mt-0"
74+
onClick={() => window.open(props.repo.projectUrl, '_blank')!.focus()}><FontAwesomeIcon
75+
icon={faUpRightFromSquare}/>View
76+
</button>
7577

76-
</div>
78+
</div>
7779

78-
<ReadmeRenderer/>
79-
</div>
80-
</Section>
80+
<ReadmeRenderer/>
81+
</div>
82+
</Section>
83+
</GradientOutline>
8184
</>
8285
)
8386
} else return <></>

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

-25.1 KB
Binary file not shown.

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

-3.8 KB
Binary file not shown.

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

-5.57 KB
Binary file not shown.

0 commit comments

Comments
 (0)