Switched to Next.Js
This commit is contained in:
Space-Banane
37
.github/copilot-instructions.md
vendored
37
.github/copilot-instructions.md
vendored
@@ -1,37 +0,0 @@
|
|||||||
# Workspace Instructions - my-portfolio
|
|
||||||
|
|
||||||
This repository contains a personal portfolio website built with React 19, Vite, TypeScript, and Tailwind CSS 4.
|
|
||||||
|
|
||||||
## Project Structure
|
|
||||||
- `src/components/`: Reusable UI components (cards, modals, navbar).
|
|
||||||
- `src/pages/`: Main page components.
|
|
||||||
- `src/sections/`: Modular layout sections used in pages.
|
|
||||||
- `src/types.ts`: Central location for all TypeScript interfaces and data models.
|
|
||||||
- `src/App.tsx`: The main entry point managing overall state and routing.
|
|
||||||
|
|
||||||
## Development Workflow
|
|
||||||
- **Package Manager**: Use `pnpm`.
|
|
||||||
- **Commands**:
|
|
||||||
- `pnpm dev`: Start development server.
|
|
||||||
- `pnpm build`: Type-check and build for production.
|
|
||||||
- `pnpm lint`: Run ESLint.
|
|
||||||
- `pnpm preview`: Preview production build.
|
|
||||||
|
|
||||||
## Code Conventions
|
|
||||||
- **Naming**: Use PascalCase for components and sections (e.g., `ProjectCard.tsx`).
|
|
||||||
- **Exports**: Prefer named exports for components.
|
|
||||||
- **Styling**:
|
|
||||||
- Use Tailwind CSS 4 utility classes.
|
|
||||||
- Follow the "glassmorphism" aesthetic (e.g., `backdrop-blur-sm`, `bg-white/10`, `border-white/10`).
|
|
||||||
- **Data Models**:
|
|
||||||
- All new data structures (projects, experiences) must be defined in `src/types.ts`.
|
|
||||||
- Content is typically initialized in `App.tsx` and passed down as props.
|
|
||||||
|
|
||||||
## Component Principles
|
|
||||||
- **Separation of Concerns**: Sections in `src/sections/` should focus on presentation and receive data via props from parent pages.
|
|
||||||
- **Modals**: Modal states (open/close, selected item) are managed in the parent component and passed down.
|
|
||||||
|
|
||||||
## Best Practices
|
|
||||||
- Ensure strict TypeScript typing for all props.
|
|
||||||
- Use the `@danielgtmn/umami-react` for analytics features if needed.
|
|
||||||
- Maintain consistent hover effects and layout patterns across cards.
|
|
||||||
34
.github/workflows/ci.yml
vendored
34
.github/workflows/ci.yml
vendored
@@ -1,34 +0,0 @@
|
|||||||
name: CI
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: [ "main" ]
|
|
||||||
pull_request:
|
|
||||||
branches: [ "main" ]
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v4
|
|
||||||
|
|
||||||
- name: Install pnpm
|
|
||||||
uses: pnpm/action-setup@v4
|
|
||||||
with:
|
|
||||||
version: 9
|
|
||||||
|
|
||||||
- name: Set up Node.js
|
|
||||||
uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: 24
|
|
||||||
cache: 'pnpm'
|
|
||||||
|
|
||||||
- name: Install dependencies
|
|
||||||
run: pnpm install
|
|
||||||
|
|
||||||
- name: Lint
|
|
||||||
run: pnpm run lint
|
|
||||||
|
|
||||||
- name: Build
|
|
||||||
run: pnpm run build
|
|
||||||
58
.gitignore
vendored
58
.gitignore
vendored
@@ -1,24 +1,44 @@
|
|||||||
# Logs
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
logs
|
|
||||||
*.log
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
pnpm-debug.log*
|
.pnpm-debug.log*
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
# env files (can opt-in for committing if needed)
|
||||||
dist
|
.env*
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
# vercel
|
||||||
.vscode/*
|
.vercel
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
# typescript
|
||||||
.DS_Store
|
*.tsbuildinfo
|
||||||
*.suo
|
next-env.d.ts
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
old/
|
||||||
*.sln
|
.next
|
||||||
*.sw?
|
|
||||||
36
README.md
Normal file
36
README.md
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
First, run the development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
# or
|
||||||
|
yarn dev
|
||||||
|
# or
|
||||||
|
pnpm dev
|
||||||
|
# or
|
||||||
|
bun dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||||
|
|
||||||
|
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||||
|
|
||||||
|
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
To learn more about Next.js, take a look at the following resources:
|
||||||
|
|
||||||
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||||
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||||
|
|
||||||
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||||
|
|
||||||
|
## Deploy on Vercel
|
||||||
|
|
||||||
|
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||||
|
|
||||||
|
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||||
@@ -6,12 +6,11 @@ services:
|
|||||||
- .:/app
|
- .:/app
|
||||||
restart: always
|
restart: always
|
||||||
ports:
|
ports:
|
||||||
- "6756:6756"
|
- "6756:3000"
|
||||||
command: >
|
command: >
|
||||||
sh -c "
|
sh -c "
|
||||||
npm i -g pnpm &&
|
npm i -g pnpm &&
|
||||||
pnpm install &&
|
pnpm install &&
|
||||||
pnpm build &&
|
pnpm build &&
|
||||||
if ! command -v serve >/dev/null 2>&1; then npm i -g serve; fi &&
|
pnpm start
|
||||||
npx serve -s -l 6756 dist
|
|
||||||
"
|
"
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import js from '@eslint/js'
|
|
||||||
import globals from 'globals'
|
|
||||||
import reactHooks from 'eslint-plugin-react-hooks'
|
|
||||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
||||||
import tseslint from 'typescript-eslint'
|
|
||||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
|
||||||
|
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
js.configs.recommended,
|
|
||||||
tseslint.configs.recommended,
|
|
||||||
reactHooks.configs.flat.recommended,
|
|
||||||
reactRefresh.configs.vite,
|
|
||||||
],
|
|
||||||
languageOptions: {
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
globals: globals.browser,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
18
eslint.config.mjs
Normal file
18
eslint.config.mjs
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
36
index.html
36
index.html
@@ -1,36 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" href="https://cdn.reversed.dev/pictures/cat.png" type="image/png" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
|
|
||||||
<title>Space - Developer & Enthusiast</title>
|
|
||||||
<meta name="title" content="Space - Developer & Enthusiast" />
|
|
||||||
<meta name="description" content="Personal portfolio site." />
|
|
||||||
<meta name="author" content="Space" />
|
|
||||||
<meta name="theme-color" content="#000000" />
|
|
||||||
|
|
||||||
<!-- Open Graph / Facebook -->
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:title" content="Space - Developer & Enthusiast" />
|
|
||||||
<meta property="og:description" content="Personal portfolio site." />
|
|
||||||
<meta property="og:image" content="https://cdn.reversed.dev/pictures/20250405_120402.png" />
|
|
||||||
|
|
||||||
<!-- Twitter -->
|
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
|
||||||
<meta property="twitter:title" content="Space - Developer & Enthusiast" />
|
|
||||||
<meta property="twitter:description" content="Personal portfolio site." />
|
|
||||||
<meta property="twitter:image" content="https://cdn.reversed.dev/pictures/20250405_120402.png" />
|
|
||||||
|
|
||||||
<meta name="robots" content="index, follow" />
|
|
||||||
<link rel="canonical" href="https://space.reversed.dev" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
7
next.config.ts
Normal file
7
next.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
/* config options here */
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
46
package.json
46
package.json
@@ -1,38 +1,32 @@
|
|||||||
{
|
{
|
||||||
"name": "getspaced",
|
"name": "next-profile",
|
||||||
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "next dev",
|
||||||
"build": "tsc -b && vite build",
|
"build": "next build",
|
||||||
"lint": "eslint .",
|
"start": "next start",
|
||||||
"preview": "vite preview"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@danielgtmn/umami-react": "^1.1.6",
|
"@danielgtmn/umami-react": "^1.1.6",
|
||||||
"@tailwindcss/vite": "^4.1.17",
|
"clsx": "^2.1.1",
|
||||||
|
"framer-motion": "^12.36.0",
|
||||||
"lucide-react": "^0.577.0",
|
"lucide-react": "^0.577.0",
|
||||||
"react": "^19.2.0",
|
"next": "16.1.6",
|
||||||
"react-dom": "^19.2.0",
|
"react": "19.2.3",
|
||||||
|
"react-dom": "19.2.3",
|
||||||
"react-router-dom": "^7.13.1",
|
"react-router-dom": "^7.13.1",
|
||||||
"tailwindcss": "^4.1.17"
|
"tailwind-merge": "^3.5.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.39.1",
|
"@tailwindcss/postcss": "^4",
|
||||||
"@types/node": "^24.10.1",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19.2.5",
|
"@types/react": "^19",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19",
|
||||||
"@vitejs/plugin-react": "^5.1.1",
|
"eslint": "^9",
|
||||||
"eslint": "^9.39.1",
|
"eslint-config-next": "16.1.6",
|
||||||
"eslint-plugin-react-hooks": "^7.0.1",
|
"tailwindcss": "^4",
|
||||||
"eslint-plugin-react-refresh": "^0.4.24",
|
"typescript": "^5"
|
||||||
"globals": "^16.5.0",
|
|
||||||
"typescript": "~5.9.3",
|
|
||||||
"typescript-eslint": "^8.46.4",
|
|
||||||
"vite": "npm:rolldown-vite@7.2.5"
|
|
||||||
},
|
|
||||||
"overrides": {
|
|
||||||
"vite": "npm:rolldown-vite@7.2.5"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
3469
pnpm-lock.yaml
generated
3469
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
7
postcss.config.mjs
Normal file
7
postcss.config.mjs
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
1
public/file.svg
Normal file
1
public/file.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 391 B |
1
public/globe.svg
Normal file
1
public/globe.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
1
public/next.svg
Normal file
1
public/next.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
1
public/vercel.svg
Normal file
1
public/vercel.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 128 B |
1
public/window.svg
Normal file
1
public/window.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||||
|
After Width: | Height: | Size: 385 B |
267
src/App.tsx
267
src/App.tsx
@@ -1,267 +0,0 @@
|
|||||||
import { useEffect, useState, useMemo } from "react";
|
|
||||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
|
||||||
import UmamiAnalytics from "@danielgtmn/umami-react";
|
|
||||||
import type { Experience, MiniProject, Project, RealWork } from "./types";
|
|
||||||
import { MiniProjectModal } from "./components/MiniProjectModal";
|
|
||||||
import { ExperienceModal } from "./components/ExperienceModal";
|
|
||||||
import { Navbar } from "./components/Navbar";
|
|
||||||
import { Footer } from "./sections/Footer";
|
|
||||||
|
|
||||||
// Pages
|
|
||||||
import { Home } from "./pages/Home";
|
|
||||||
import { About } from "./pages/AboutPage";
|
|
||||||
import { Contact } from "./pages/ContactPage";
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const [status, setStatus] = useState("");
|
|
||||||
const [borderStatus, setBorderStatus] = useState("border-gray-700");
|
|
||||||
const [glowColor, setGlowColor] = useState("rgba(55, 65, 81, 0.5)");
|
|
||||||
const [statusMessage, setStatusMessage] = useState("[??????]");
|
|
||||||
const [messageIndex, setMessageIndex] = useState(0);
|
|
||||||
const [displayMessage, setDisplayMessage] = useState("");
|
|
||||||
const [isScrambling, setIsScrambling] = useState(false);
|
|
||||||
const [showOldNames, setShowOldNames] = useState(false);
|
|
||||||
const [selectedMiniProject, setSelectedMiniProject] =
|
|
||||||
useState<MiniProject | null>(null);
|
|
||||||
const [selectedExperience, setSelectedExperience] =
|
|
||||||
useState<Experience | null>(null);
|
|
||||||
|
|
||||||
const [projects, setProjects] = useState<Project[]>([]);
|
|
||||||
const [miniProjects, setMiniProjects] = useState<MiniProject[]>([]);
|
|
||||||
const [experiences, setExperiences] = useState<Experience[]>([]);
|
|
||||||
const [realWork, setRealWork] = useState<RealWork[]>([]);
|
|
||||||
|
|
||||||
const oldUsernames = [
|
|
||||||
"getspaced (ingame)",
|
|
||||||
"Space<63> (alternative)",
|
|
||||||
"Space-Banane (2022-2024)",
|
|
||||||
];
|
|
||||||
|
|
||||||
const rotatingMessages = useMemo(
|
|
||||||
() => [
|
|
||||||
"Yelling at Claude",
|
|
||||||
"Shipping bugs",
|
|
||||||
"Compiling typescript files... Please wait.",
|
|
||||||
"Waiting for CI, this might take a while...",
|
|
||||||
"No debugger attached, but I'm sure it works ?",
|
|
||||||
"Seems fine, must be a problem with your machine lol",
|
|
||||||
"Waiting for pip, this might take a lifetime...",
|
|
||||||
"Collecting Spotify hours, this might take a while...",
|
|
||||||
"Fighting with go modules, i lost",
|
|
||||||
"Nuking Python for the 50th time, it's winning",
|
|
||||||
"Why is uv so cool?",
|
|
||||||
"Pulling 20-ish GB of node modules, see you next year",
|
|
||||||
],
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
|
|
||||||
const characters =
|
|
||||||
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+[]{}|;:',.<>?/`~" +
|
|
||||||
"?????????????????????????";
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (status === "online") {
|
|
||||||
setBorderStatus("border-green-500");
|
|
||||||
setGlowColor("rgba(34, 197, 94, 0.5)");
|
|
||||||
setStatusMessage("Reachable");
|
|
||||||
} else if (status === "offline") {
|
|
||||||
setBorderStatus("border-gray-500");
|
|
||||||
setGlowColor("rgba(107, 114, 128, 0.5)");
|
|
||||||
setStatusMessage("Probably Away");
|
|
||||||
} else if (status === "dnd") {
|
|
||||||
setBorderStatus("border-red-600");
|
|
||||||
setGlowColor("rgba(220, 38, 38, 0.5)");
|
|
||||||
setStatusMessage("Not Reachable");
|
|
||||||
} else if (status === "idle") {
|
|
||||||
setBorderStatus("border-yellow-500");
|
|
||||||
setGlowColor("rgba(234, 179, 8, 0.5)");
|
|
||||||
setStatusMessage("Doing anything but work");
|
|
||||||
} else {
|
|
||||||
setBorderStatus("border-gray-700");
|
|
||||||
setGlowColor("rgba(55, 65, 81, 0.5)");
|
|
||||||
setStatusMessage("[??????]");
|
|
||||||
}
|
|
||||||
}, [status]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetch(
|
|
||||||
"https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6",
|
|
||||||
)
|
|
||||||
.then((res) => res.json())
|
|
||||||
.then((data) => {
|
|
||||||
setStatus(data.status);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error(err);
|
|
||||||
setStatus("offline");
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Scramble effect
|
|
||||||
useEffect(() => {
|
|
||||||
const targetMessage = rotatingMessages[messageIndex];
|
|
||||||
|
|
||||||
if (isScrambling) {
|
|
||||||
let iteration = 0;
|
|
||||||
const scrambleInterval = setInterval(() => {
|
|
||||||
setDisplayMessage(
|
|
||||||
targetMessage
|
|
||||||
.split("")
|
|
||||||
.map((char, index) => {
|
|
||||||
if (index < iteration) {
|
|
||||||
return targetMessage[index];
|
|
||||||
}
|
|
||||||
if (char === " " || /[\u{1F000}-\u{1F9FF}]/u.test(char)) {
|
|
||||||
return char;
|
|
||||||
}
|
|
||||||
return characters[Math.floor(Math.random() * characters.length)];
|
|
||||||
})
|
|
||||||
.join(""),
|
|
||||||
);
|
|
||||||
|
|
||||||
if (iteration >= targetMessage.length) {
|
|
||||||
clearInterval(scrambleInterval);
|
|
||||||
setIsScrambling(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
iteration += 1; // Faster: increment by 1 instead of 1/3
|
|
||||||
}, 15); // Faster: reduce interval to 15ms
|
|
||||||
|
|
||||||
return () => clearInterval(scrambleInterval);
|
|
||||||
} else {
|
|
||||||
setDisplayMessage(targetMessage);
|
|
||||||
}
|
|
||||||
}, [messageIndex, isScrambling, characters, rotatingMessages]);
|
|
||||||
|
|
||||||
// Rotating message effect
|
|
||||||
useEffect(() => {
|
|
||||||
const messageInterval = setInterval(() => {
|
|
||||||
setIsScrambling(true);
|
|
||||||
setMessageIndex((prev) => (prev + 1) % rotatingMessages.length);
|
|
||||||
}, 7000);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
clearInterval(messageInterval);
|
|
||||||
};
|
|
||||||
}, [rotatingMessages.length]);
|
|
||||||
|
|
||||||
// Fetch data from API on mount
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchRealWork = async () => {
|
|
||||||
try {
|
|
||||||
const res = await fetch(
|
|
||||||
"https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/real_work",
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
throw new Error("Failed to fetch real work data");
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = (await res.json()) as RealWork[];
|
|
||||||
setRealWork(data);
|
|
||||||
} catch {
|
|
||||||
setRealWork([]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetch(
|
|
||||||
"https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/projects",
|
|
||||||
)
|
|
||||||
.then((res) => res.json())
|
|
||||||
.then(setProjects)
|
|
||||||
.catch(() => setProjects([]));
|
|
||||||
|
|
||||||
fetch(
|
|
||||||
"https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/mini_projects",
|
|
||||||
)
|
|
||||||
.then((res) => res.json())
|
|
||||||
.then(setMiniProjects)
|
|
||||||
.catch(() => setMiniProjects([]));
|
|
||||||
|
|
||||||
fetch(
|
|
||||||
"https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/experience",
|
|
||||||
)
|
|
||||||
.then((res) => res.json())
|
|
||||||
.then(setExperiences)
|
|
||||||
.catch(() => setExperiences([]));
|
|
||||||
|
|
||||||
fetchRealWork();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Router>
|
|
||||||
<UmamiAnalytics
|
|
||||||
websiteId="7d28af45-d984-428e-af79-fb4dc7e91492"
|
|
||||||
url="https://not-a-tracker.reversed.dev"
|
|
||||||
/>
|
|
||||||
<div className="relative min-h-screen bg-[#020205] text-white selection:bg-blue-500/30 font-sans overflow-x-hidden">
|
|
||||||
{/* Modern Background */}
|
|
||||||
<div className="fixed inset-0 z-0 pointer-events-none">
|
|
||||||
{/* Main Gradient Glows */}
|
|
||||||
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-blue-600/10 blur-[120px] animate-pulse"></div>
|
|
||||||
<div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-purple-600/10 blur-[120px] animate-pulse" style={{ animationDelay: "1s" }}></div>
|
|
||||||
|
|
||||||
{/* Subtle Grid Pattern */}
|
|
||||||
<div
|
|
||||||
className="absolute inset-0 opacity-[0.03]"
|
|
||||||
style={{
|
|
||||||
backgroundImage: `linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)`,
|
|
||||||
backgroundSize: "40px 40px"
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
|
|
||||||
{/* Noise Overlay */}
|
|
||||||
<div className="absolute inset-0 opacity-[0.02] mix-blend-overlay pointer-events-none bg-[url('https://grainy-gradients.vercel.app/noise.svg')]"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Navbar />
|
|
||||||
|
|
||||||
<main className="relative z-10 pt-32 pb-20 px-6 mx-auto max-w-6xl">
|
|
||||||
<Routes>
|
|
||||||
<Route
|
|
||||||
path="/"
|
|
||||||
element={
|
|
||||||
<Home
|
|
||||||
glowColor={glowColor}
|
|
||||||
borderStatus={borderStatus}
|
|
||||||
displayMessage={displayMessage}
|
|
||||||
rotatingMessages={rotatingMessages}
|
|
||||||
statusMessage={statusMessage}
|
|
||||||
showOldNames={showOldNames}
|
|
||||||
setShowOldNames={setShowOldNames}
|
|
||||||
oldUsernames={oldUsernames}
|
|
||||||
projects={projects}
|
|
||||||
miniProjects={miniProjects}
|
|
||||||
setSelectedMiniProject={setSelectedMiniProject}
|
|
||||||
experiences={experiences}
|
|
||||||
setSelectedExperience={setSelectedExperience}
|
|
||||||
realWork={realWork}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Route path="/about" element={<About />} />
|
|
||||||
<Route path="/contact" element={<Contact />} />
|
|
||||||
</Routes>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<Footer />
|
|
||||||
|
|
||||||
{selectedMiniProject && (
|
|
||||||
<MiniProjectModal
|
|
||||||
project={selectedMiniProject}
|
|
||||||
onClose={() => setSelectedMiniProject(null)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{selectedExperience && (
|
|
||||||
<ExperienceModal
|
|
||||||
experience={selectedExperience}
|
|
||||||
onClose={() => setSelectedExperience(null)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Router>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
47
src/app/about/page.tsx
Normal file
47
src/app/about/page.tsx
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { About as AboutSection } from "../../sections/About";
|
||||||
|
import { Goals } from "../../sections/Goals";
|
||||||
|
import { Navbar } from "../../components/Navbar";
|
||||||
|
import { Footer } from "../../sections/Footer";
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navbar />
|
||||||
|
<div className="space-y-24 py-24 max-w-4xl mx-auto px-4">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
|
||||||
|
About Me
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||||
|
A little bit about me...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AboutSection />
|
||||||
|
|
||||||
|
<Goals />
|
||||||
|
|
||||||
|
<section className="bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-sm">
|
||||||
|
<h3 className="text-2xl font-bold mb-4">Interests Outside of Coding</h3>
|
||||||
|
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="text-purple-400">✦</span> 3D Printing & Design
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="text-purple-400">✦</span> Graphical Design
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="text-purple-400">✦</span> Gaming & Hardware
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="text-purple-400">✦</span> Open Source Contribution
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
5
src/app/api/hello/route.ts
Normal file
5
src/app/api/hello/route.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
return NextResponse.json({ message: 'Hello World' });
|
||||||
|
}
|
||||||
48
src/app/contact/page.tsx
Normal file
48
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Contact as ContactSection } from "../../sections/Contact";
|
||||||
|
import { Navbar } from "../../components/Navbar";
|
||||||
|
import { Footer } from "../../sections/Footer";
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navbar />
|
||||||
|
<div className="flex flex-col items-center justify-center min-h-screen px-4 space-y-12 w-full max-w-4xl mx-auto pt-24 pb-20 text-white">
|
||||||
|
<div className="text-center space-y-4 w-full">
|
||||||
|
<h1 className="text-5xl md:text-6xl font-extrabold text-white">
|
||||||
|
Let's <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">Connect</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-400 text-xl max-w-xl mx-auto">
|
||||||
|
Whatever you've got in mind, I'm just a few clicks away.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full max-w-3xl">
|
||||||
|
<ContactSection />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full max-w-4xl text-center">
|
||||||
|
<div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-blue-500/30 transition-all duration-300">
|
||||||
|
<div className="text-3xl mb-4 group-hover:scale-110 transition-transform">📧</div>
|
||||||
|
<h3 className="font-bold mb-1">Email</h3>
|
||||||
|
<p className="text-sm text-gray-500 underline underline-offset-4 decoration-white/20 hover:decoration-blue-500 transition-colors">
|
||||||
|
space@reversed.dev
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-purple-500/30 transition-all duration-300">
|
||||||
|
<div className="text-3xl mb-4 group-hover:scale-110 transition-transform">👾</div>
|
||||||
|
<h3 className="font-bold mb-1">Discord</h3>
|
||||||
|
<p className="text-sm text-gray-500">@getspaced</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-pink-500/30 transition-all duration-300">
|
||||||
|
<div className="text-3xl mb-4 group-hover:scale-110 transition-transform">💻</div>
|
||||||
|
<h3 className="font-bold mb-1">GitHub</h3>
|
||||||
|
<p className="text-sm text-gray-500">github.com/Space-Banane</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
30
src/app/globals.css
Normal file
30
src/app/globals.css
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scale-in {
|
||||||
|
from { opacity: 0; transform: scale(0.9); }
|
||||||
|
to { opacity: 1; transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fade-in { animation: fade-in 0.2s ease-out; }
|
||||||
|
.animate-scale-in { animation: scale-in 0.3s ease-out; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #020205;
|
||||||
|
--foreground: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
45
src/app/layout.tsx
Normal file
45
src/app/layout.tsx
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
|
import "@/app/globals.css";
|
||||||
|
import { ClientProviders } from "../components/ClientProviders";
|
||||||
|
|
||||||
|
const geistSans = Geist({
|
||||||
|
variable: "--font-geist-sans",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
const geistMono = Geist_Mono({
|
||||||
|
variable: "--font-geist-mono",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Space's portfolio",
|
||||||
|
description: "A developer from Germany building things.",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body
|
||||||
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
|
>
|
||||||
|
<ClientProviders>
|
||||||
|
<div className="relative min-h-screen bg-[#020205] text-white selection:bg-blue-500/30 overflow-x-hidden">
|
||||||
|
<div className="fixed inset-0 z-0 pointer-events-none">
|
||||||
|
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-500/10 blur-[120px] rounded-full animate-pulse" />
|
||||||
|
<div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-500/10 blur-[120px] rounded-full animate-pulse" />
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</ClientProviders>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
133
src/app/page.tsx
Normal file
133
src/app/page.tsx
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useProfile } from "../context/ProfileContext";
|
||||||
|
import { Hero } from "../sections/Hero";
|
||||||
|
import { WorkExperience } from "../sections/WorkExperience";
|
||||||
|
import { ProjectCard } from "../components/ProjectCard";
|
||||||
|
import { MiniProjectCard } from "../components/MiniProjectCard";
|
||||||
|
import { ExperienceCard } from "../components/ExperienceCard";
|
||||||
|
import { ExperienceModal } from "../components/ExperienceModal";
|
||||||
|
import { MiniProjectModal } from "../components/MiniProjectModal";
|
||||||
|
import { Navbar } from "../components/Navbar";
|
||||||
|
import { Footer } from "../sections/Footer";
|
||||||
|
import { useState } from "react";
|
||||||
|
import type { Experience } from "../types";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const {
|
||||||
|
glowColor, borderStatus, displayMessage, statusMessage,
|
||||||
|
rotatingMessages,
|
||||||
|
projects, miniProjects, setSelectedMiniProject,
|
||||||
|
experiences, setSelectedExperience, realWork,
|
||||||
|
selectedMiniProject, selectedExperience
|
||||||
|
} = useProfile();
|
||||||
|
|
||||||
|
const [showOldNames, setShowOldNames] = useState(false);
|
||||||
|
const oldUsernames = [
|
||||||
|
"getspaced (ingame)",
|
||||||
|
"Space (alternative)",
|
||||||
|
"Space-Banane (2022-2024)",
|
||||||
|
];
|
||||||
|
|
||||||
|
const groupedExperiences = experiences.reduce(
|
||||||
|
(acc, exp) => {
|
||||||
|
if (!acc[exp.type]) acc[exp.type] = [];
|
||||||
|
acc[exp.type].push(exp);
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
{} as Record<string, Experience[]>,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navbar />
|
||||||
|
<div className="space-y-24 pb-20 pt-20">
|
||||||
|
<Hero
|
||||||
|
glowColor={glowColor}
|
||||||
|
borderStatus={borderStatus}
|
||||||
|
displayMessage={displayMessage}
|
||||||
|
rotatingMessages={rotatingMessages}
|
||||||
|
statusMessage={statusMessage}
|
||||||
|
showOldNames={showOldNames}
|
||||||
|
setShowOldNames={setShowOldNames}
|
||||||
|
oldUsernames={oldUsernames}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<WorkExperience realWork={realWork} />
|
||||||
|
|
||||||
|
<section className="w-full max-w-6xl mx-auto space-y-12 px-4">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
|
||||||
|
Featured Projects
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||||
|
A selection of my personal favorites. Many more on my GitHub.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{projects.map((project, index) => (
|
||||||
|
<ProjectCard key={index} project={project} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="w-full max-w-6xl mx-auto space-y-12 px-4">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<h2 className="text-3xl font-bold">More Projects</h2>
|
||||||
|
<p className="text-gray-400">Smaller projects or tools I've built.</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{miniProjects.map((project, index) => (
|
||||||
|
<MiniProjectCard
|
||||||
|
key={index}
|
||||||
|
project={project}
|
||||||
|
onClick={() => setSelectedMiniProject(project)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="w-full max-w-6xl mx-auto space-y-12 px-4 pb-20">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<h2 className="text-3xl font-bold">Skills & Experience</h2>
|
||||||
|
<p className="text-gray-400">Things I've worked with over the years.</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
|
{Object.entries(groupedExperiences).map(([type, items]) => (
|
||||||
|
<div key={type} className="space-y-6">
|
||||||
|
<h3 className="text-xl font-semibold border-l-4 border-blue-500 pl-4 capitalize">
|
||||||
|
{type}
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
{items.map((exp, index) => (
|
||||||
|
<ExperienceCard
|
||||||
|
key={index}
|
||||||
|
experience={exp}
|
||||||
|
onClick={() => setSelectedExperience(exp)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
|
{selectedMiniProject && (
|
||||||
|
<MiniProjectModal
|
||||||
|
project={selectedMiniProject}
|
||||||
|
onClose={() => setSelectedMiniProject(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{selectedExperience && (
|
||||||
|
<ExperienceModal
|
||||||
|
experience={selectedExperience}
|
||||||
|
onClose={() => setSelectedExperience(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
19
src/components/ClientProviders.tsx
Normal file
19
src/components/ClientProviders.tsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ProfileProvider } from "../context/ProfileContext";
|
||||||
|
import UmamiAnalytics from "@danielgtmn/umami-react";
|
||||||
|
|
||||||
|
export function ClientProviders({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<UmamiAnalytics
|
||||||
|
websiteId="7d28af45-d984-428e-af79-fb4dc7e91492"
|
||||||
|
url="https://not-a-tracker.reversed.dev"
|
||||||
|
/>
|
||||||
|
<ProfileProvider>
|
||||||
|
{children}
|
||||||
|
</ProfileProvider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import type { Experience } from "../types";
|
import type { Experience } from "../types";
|
||||||
import { getTypeColor, getTypeIcon } from "./utils";
|
import { getTypeColor, getTypeIcon } from "./utils";
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import type { Experience } from "../types";
|
import type { Experience } from "../types";
|
||||||
import { getTypeColor, getTypeIcon } from "./utils";
|
import { getTypeColor, getTypeIcon } from "./utils";
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import type { MiniProject } from "../types";
|
import type { MiniProject } from "../types";
|
||||||
|
|
||||||
export function MiniProjectCard({
|
export function MiniProjectCard({
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import type { MiniProject } from "../types";
|
import type { MiniProject } from "../types";
|
||||||
|
|
||||||
export function MiniProjectModal({
|
export function MiniProjectModal({
|
||||||
|
|||||||
@@ -1,8 +1,11 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import { useUmami } from "@danielgtmn/umami-react";
|
import { useUmami } from "@danielgtmn/umami-react";
|
||||||
import { Link, useLocation } from "react-router-dom";
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
export function Navbar() {
|
export function Navbar() {
|
||||||
const location = useLocation();
|
const pathname = usePathname();
|
||||||
const { track } = useUmami();
|
const { track } = useUmami();
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
@@ -12,7 +15,7 @@ export function Navbar() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
const handleSwitch = (path: string) => {
|
const handleSwitch = (path: string) => {
|
||||||
track("nav_to_" + path.replaceAll("/", "_"));
|
track("nav_to_" + path.replaceAll("/", "root"));
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -21,11 +24,11 @@ export function Navbar() {
|
|||||||
{navItems.map((item) => (
|
{navItems.map((item) => (
|
||||||
<Link
|
<Link
|
||||||
key={item.path}
|
key={item.path}
|
||||||
to={item.path}
|
href={item.path}
|
||||||
onClick={() => handleSwitch(item.path)}
|
onClick={() => handleSwitch(item.path)}
|
||||||
className={`text-sm font-semibold transition-all duration-300 px-4 py-2 rounded-full
|
className={`text-sm font-semibold transition-all duration-300 px-4 py-2 rounded-full
|
||||||
${
|
${
|
||||||
location.pathname === item.path
|
pathname === item.path
|
||||||
? "bg-white text-black scale-105 shadow-xl shadow-white/10"
|
? "bg-white text-black scale-105 shadow-xl shadow-white/10"
|
||||||
: "text-gray-400 hover:text-white"
|
: "text-gray-400 hover:text-white"
|
||||||
}`}
|
}`}
|
||||||
@@ -37,3 +40,4 @@ export function Navbar() {
|
|||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import type { Project } from "../types";
|
import type { Project } from "../types";
|
||||||
|
|
||||||
export function ProjectCard({ project }: { project: Project }) {
|
export function ProjectCard({ project }: { project: Project }) {
|
||||||
|
|||||||
157
src/context/ProfileContext.tsx
Normal file
157
src/context/ProfileContext.tsx
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { createContext, useContext, useEffect, useState, useMemo } from "react";
|
||||||
|
import type { Experience, MiniProject, Project, RealWork } from "../types";
|
||||||
|
|
||||||
|
interface ProfileContextType {
|
||||||
|
status: string;
|
||||||
|
statusMessage: string;
|
||||||
|
borderStatus: string;
|
||||||
|
glowColor: string;
|
||||||
|
displayMessage: string;
|
||||||
|
isScrambling: boolean;
|
||||||
|
rotatingMessages: string[];
|
||||||
|
projects: Project[];
|
||||||
|
miniProjects: MiniProject[];
|
||||||
|
experiences: Experience[];
|
||||||
|
realWork: RealWork[];
|
||||||
|
selectedMiniProject: MiniProject | null;
|
||||||
|
setSelectedMiniProject: (p: MiniProject | null) => void;
|
||||||
|
selectedExperience: Experience | null;
|
||||||
|
setSelectedExperience: (e: Experience | null) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProfileContext = createContext<ProfileContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
export function ProfileProvider({ children }: { children: React.ReactNode }) {
|
||||||
|
const [status, setStatus] = useState("");
|
||||||
|
const [borderStatus, setBorderStatus] = useState("border-gray-700");
|
||||||
|
const [glowColor, setGlowColor] = useState("rgba(55, 65, 81, 0.5)");
|
||||||
|
const [statusMessage, setStatusMessage] = useState("[??????]");
|
||||||
|
const [messageIndex, setMessageIndex] = useState(0);
|
||||||
|
const [displayMessage, setDisplayMessage] = useState("");
|
||||||
|
const [isScrambling, setIsScrambling] = useState(false);
|
||||||
|
|
||||||
|
const [selectedMiniProject, setSelectedMiniProject] = useState<MiniProject | null>(null);
|
||||||
|
const [selectedExperience, setSelectedExperience] = useState<Experience | null>(null);
|
||||||
|
|
||||||
|
const [projects, setProjects] = useState<Project[]>([]);
|
||||||
|
const [miniProjects, setMiniProjects] = useState<MiniProject[]>([]);
|
||||||
|
const [experiences, setExperiences] = useState<Experience[]>([]);
|
||||||
|
const [realWork, setRealWork] = useState<RealWork[]>([]);
|
||||||
|
|
||||||
|
const rotatingMessages = useMemo(
|
||||||
|
() => [
|
||||||
|
"Yelling at Claude",
|
||||||
|
"Shipping bugs",
|
||||||
|
"Compiling typescript files... Please wait.",
|
||||||
|
"Waiting for CI, this might take a while...",
|
||||||
|
"No debugger attached, but I'm sure it works ?",
|
||||||
|
"Seems fine, must be a problem with your machine lol",
|
||||||
|
"Waiting for pip, this might take a lifetime...",
|
||||||
|
"Collecting Spotify hours, this might take a while...",
|
||||||
|
"Fighting with go modules, i lost",
|
||||||
|
"Nuking Python for the 50th time, it's winning",
|
||||||
|
"Why is uv so cool?",
|
||||||
|
"Pulling 20-ish GB of node modules, see you next year",
|
||||||
|
],
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const characters =
|
||||||
|
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+[]{}|;:',.<>?/`~" +
|
||||||
|
"?????????????????????????";
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (status === "online") {
|
||||||
|
setBorderStatus("border-green-500");
|
||||||
|
setGlowColor("rgba(34, 197, 94, 0.5)");
|
||||||
|
setStatusMessage("Reachable");
|
||||||
|
} else if (status === "offline") {
|
||||||
|
setBorderStatus("border-gray-500");
|
||||||
|
setGlowColor("rgba(107, 114, 128, 0.5)");
|
||||||
|
setStatusMessage("Probably Away");
|
||||||
|
} else if (status === "dnd") {
|
||||||
|
setBorderStatus("border-red-600");
|
||||||
|
setGlowColor("rgba(220, 38, 38, 0.5)");
|
||||||
|
setStatusMessage("Not Reachable");
|
||||||
|
} else if (status === "idle") {
|
||||||
|
setBorderStatus("border-yellow-500");
|
||||||
|
setGlowColor("rgba(234, 179, 8, 0.5)");
|
||||||
|
setStatusMessage("Doing anything but work");
|
||||||
|
} else {
|
||||||
|
setBorderStatus("border-gray-700");
|
||||||
|
setGlowColor("rgba(55, 65, 81, 0.5)");
|
||||||
|
setStatusMessage("[??????]");
|
||||||
|
}
|
||||||
|
}, [status]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch("https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6")
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => setStatus(data.status))
|
||||||
|
.catch(() => setStatus("offline"));
|
||||||
|
|
||||||
|
const fetchRealWork = async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/real_work");
|
||||||
|
if (res.ok) setRealWork(await res.json());
|
||||||
|
} catch { setRealWork([]); }
|
||||||
|
};
|
||||||
|
|
||||||
|
fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/projects")
|
||||||
|
.then(res => res.json()).then(setProjects).catch(() => setProjects([]));
|
||||||
|
fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/mini_projects")
|
||||||
|
.then(res => res.json()).then(setMiniProjects).catch(() => setMiniProjects([]));
|
||||||
|
fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/experience")
|
||||||
|
.then(res => res.json()).then(setExperiences).catch(() => setExperiences([]));
|
||||||
|
|
||||||
|
fetchRealWork();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const targetMessage = rotatingMessages[messageIndex];
|
||||||
|
if (isScrambling) {
|
||||||
|
let iteration = 0;
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setDisplayMessage(targetMessage.split("").map((char, i) => {
|
||||||
|
if (i < iteration) return targetMessage[i];
|
||||||
|
if (char === " " || /[\u{1F000}-\u{1F9FF}]/u.test(char)) return char;
|
||||||
|
return characters[Math.floor(Math.random() * characters.length)];
|
||||||
|
}).join(""));
|
||||||
|
if (iteration >= targetMessage.length) {
|
||||||
|
clearInterval(interval);
|
||||||
|
setIsScrambling(false);
|
||||||
|
}
|
||||||
|
iteration += 1;
|
||||||
|
}, 15);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
} else {
|
||||||
|
setDisplayMessage(targetMessage);
|
||||||
|
}
|
||||||
|
}, [messageIndex, isScrambling, characters, rotatingMessages]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setIsScrambling(true);
|
||||||
|
setMessageIndex((prev) => (prev + 1) % rotatingMessages.length);
|
||||||
|
}, 7000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [rotatingMessages.length]);
|
||||||
|
|
||||||
|
const value = {
|
||||||
|
status, statusMessage, borderStatus, glowColor, displayMessage, isScrambling,
|
||||||
|
rotatingMessages,
|
||||||
|
projects, miniProjects, experiences, realWork,
|
||||||
|
selectedMiniProject, setSelectedMiniProject,
|
||||||
|
selectedExperience, setSelectedExperience
|
||||||
|
};
|
||||||
|
|
||||||
|
return <ProfileContext.Provider value={value}>{children}</ProfileContext.Provider>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useProfile() {
|
||||||
|
const context = useContext(ProfileContext);
|
||||||
|
if (context === undefined) throw new Error("useProfile must be used within a ProfileProvider");
|
||||||
|
return context;
|
||||||
|
}
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
@import "tailwindcss";
|
|
||||||
|
|
||||||
@keyframes fade-in {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scale-in {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.9);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-fade-in {
|
|
||||||
animation: fade-in 0.2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-scale-in {
|
|
||||||
animation: scale-in 0.3s ease-out;
|
|
||||||
}
|
|
||||||
10
src/main.tsx
10
src/main.tsx
@@ -1,10 +0,0 @@
|
|||||||
import { StrictMode } from 'react'
|
|
||||||
import { createRoot } from 'react-dom/client'
|
|
||||||
import './index.css'
|
|
||||||
import App from './App.tsx'
|
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
|
||||||
<StrictMode>
|
|
||||||
<App />
|
|
||||||
</StrictMode>,
|
|
||||||
)
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
import { About as AboutSection } from "../sections/About";
|
|
||||||
import { Goals } from "../sections/Goals";
|
|
||||||
|
|
||||||
export function About() {
|
|
||||||
return (
|
|
||||||
<div className="space-y-24 py-12 max-w-4xl mx-auto px-4">
|
|
||||||
<div className="text-center space-y-4">
|
|
||||||
<h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
|
|
||||||
About Me
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
|
||||||
A little bit about me...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AboutSection />
|
|
||||||
|
|
||||||
<Goals />
|
|
||||||
|
|
||||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-sm">
|
|
||||||
<h3 className="text-2xl font-bold mb-4">Interests Outside of Coding</h3>
|
|
||||||
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
|
|
||||||
<li className="flex items-center gap-2">
|
|
||||||
<span className="text-purple-400">✦</span> 3D Printing & Design
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center gap-2">
|
|
||||||
<span className="text-purple-400">✦</span> Graphical Design
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center gap-2">
|
|
||||||
<span className="text-purple-400">✦</span> Gaming & Hardware
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center gap-2">
|
|
||||||
<span className="text-purple-400">✦</span> Open Source Contribution
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
import { Contact as ContactSection } from "../sections/Contact";
|
|
||||||
|
|
||||||
export function Contact() {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center min-h-[70vh] px-4 space-y-12 w-full max-w-4xl mx-auto">
|
|
||||||
<div className="text-center space-y-4 w-full">
|
|
||||||
<h1 className="text-5xl md:text-6xl font-extrabold text-white">
|
|
||||||
Let's <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">Connect</span>
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-400 text-xl max-w-xl mx-auto">
|
|
||||||
Whatever you've got in mind, I'm just a few clicks away.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full max-w-3xl">
|
|
||||||
<ContactSection />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full max-w-4xl text-center">
|
|
||||||
<div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-blue-500/30 transition-all duration-300">
|
|
||||||
<div className="text-3xl mb-4 group-hover:scale-110 transition-transform">📧</div>
|
|
||||||
<h3 className="font-bold mb-1">Email</h3>
|
|
||||||
<p className="text-sm text-gray-500">space@reversed.dev</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-purple-500/30 transition-all duration-300">
|
|
||||||
<div className="text-3xl mb-4 group-hover:scale-110 transition-transform">👾</div>
|
|
||||||
<h3 className="font-bold mb-1">Discord</h3>
|
|
||||||
<p className="text-sm text-gray-500">@getspaced</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-pink-500/30 transition-all duration-300">
|
|
||||||
<div className="text-3xl mb-4 group-hover:scale-110 transition-transform">💻</div>
|
|
||||||
<h3 className="font-bold mb-1">GitHub</h3>
|
|
||||||
<p className="text-sm text-gray-500">github.com/Space-Banane</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,156 +0,0 @@
|
|||||||
import { Hero } from "../sections/Hero";
|
|
||||||
import { WorkExperience } from "../sections/WorkExperience";
|
|
||||||
import type { MiniProject, Experience, Project, RealWork } from "../types";
|
|
||||||
import { ProjectCard } from "../components/ProjectCard";
|
|
||||||
import { MiniProjectCard } from "../components/MiniProjectCard";
|
|
||||||
import { ExperienceCard } from "../components/ExperienceCard";
|
|
||||||
|
|
||||||
interface HomeProps {
|
|
||||||
glowColor: string;
|
|
||||||
borderStatus: string;
|
|
||||||
displayMessage: string;
|
|
||||||
rotatingMessages: string[];
|
|
||||||
statusMessage: string;
|
|
||||||
showOldNames: boolean;
|
|
||||||
setShowOldNames: (show: boolean) => void;
|
|
||||||
oldUsernames: string[];
|
|
||||||
projects: Project[];
|
|
||||||
miniProjects: MiniProject[];
|
|
||||||
setSelectedMiniProject: (p: MiniProject) => void;
|
|
||||||
experiences: Experience[];
|
|
||||||
setSelectedExperience: (e: Experience) => void;
|
|
||||||
realWork: RealWork[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Home({
|
|
||||||
glowColor,
|
|
||||||
borderStatus,
|
|
||||||
displayMessage,
|
|
||||||
rotatingMessages,
|
|
||||||
statusMessage,
|
|
||||||
showOldNames,
|
|
||||||
setShowOldNames,
|
|
||||||
oldUsernames,
|
|
||||||
projects,
|
|
||||||
miniProjects,
|
|
||||||
setSelectedMiniProject,
|
|
||||||
experiences,
|
|
||||||
setSelectedExperience,
|
|
||||||
realWork,
|
|
||||||
}: HomeProps) {
|
|
||||||
const groupedExperiences = experiences.reduce(
|
|
||||||
(acc, exp) => {
|
|
||||||
if (!acc[exp.type]) {
|
|
||||||
acc[exp.type] = [];
|
|
||||||
}
|
|
||||||
acc[exp.type].push(exp);
|
|
||||||
return acc;
|
|
||||||
},
|
|
||||||
{} as Record<string, Experience[]>,
|
|
||||||
);
|
|
||||||
|
|
||||||
const rewriteType = (type: string) => {
|
|
||||||
switch (type) {
|
|
||||||
case "languages":
|
|
||||||
return "Languages";
|
|
||||||
case "software":
|
|
||||||
return "Software";
|
|
||||||
case "plattforms":
|
|
||||||
return "Platforms";
|
|
||||||
case "experience":
|
|
||||||
return "Experience";
|
|
||||||
case "other":
|
|
||||||
return "Other";
|
|
||||||
default:
|
|
||||||
return type.charAt(0).toUpperCase() + type.slice(1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-24 pb-20">
|
|
||||||
<Hero
|
|
||||||
glowColor={glowColor}
|
|
||||||
borderStatus={borderStatus}
|
|
||||||
displayMessage={displayMessage}
|
|
||||||
rotatingMessages={rotatingMessages}
|
|
||||||
statusMessage={statusMessage}
|
|
||||||
showOldNames={showOldNames}
|
|
||||||
setShowOldNames={setShowOldNames}
|
|
||||||
oldUsernames={oldUsernames}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<WorkExperience realWork={realWork} />
|
|
||||||
|
|
||||||
<section className="w-full max-w-6xl space-y-12">
|
|
||||||
<div className="text-center space-y-4">
|
|
||||||
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
|
|
||||||
Featured Projects
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
|
||||||
A selection of my personal favorites. Many more on my GitHub.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4">
|
|
||||||
{projects.map((project, index) => (
|
|
||||||
<ProjectCard key={index} project={project} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="w-full max-w-6xl space-y-12">
|
|
||||||
<div className="text-center space-y-4">
|
|
||||||
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">
|
|
||||||
Mini Projects
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
|
||||||
Small tools, experiments, and fun little things I've built.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 px-4">
|
|
||||||
{miniProjects.map((mini, index) => (
|
|
||||||
<MiniProjectCard
|
|
||||||
key={index}
|
|
||||||
project={mini}
|
|
||||||
onClick={() => setSelectedMiniProject(mini)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="w-full max-w-6xl space-y-16">
|
|
||||||
<div className="text-center space-y-4">
|
|
||||||
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">
|
|
||||||
Experience
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
|
||||||
My journey through the tech world so far.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-12 px-4">
|
|
||||||
{Object.entries(groupedExperiences)
|
|
||||||
.sort(([typeA], [typeB]) => typeA.localeCompare(typeB))
|
|
||||||
.map(([type, items]) => (
|
|
||||||
<div key={type} className="space-y-6">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<h3 className="text-xl font-semibold text-gray-200 capitalize whitespace-nowrap">
|
|
||||||
{rewriteType(type)}
|
|
||||||
</h3>
|
|
||||||
<div className="h-px w-full bg-gradient-to-r from-gray-500/20 via-gray-500/10 to-transparent" />
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
{items.map((exp, index) => (
|
|
||||||
<ExperienceCard
|
|
||||||
key={index}
|
|
||||||
experience={exp}
|
|
||||||
onClick={() => setSelectedExperience(exp)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
export function About() {
|
export function About() {
|
||||||
return (
|
return (
|
||||||
<section className="w-full space-y-8">
|
<section className="w-full space-y-8">
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
export function Contact() {
|
export function Contact() {
|
||||||
return (
|
return (
|
||||||
<section className="w-full max-w-2xl text-center space-y-4 pb-8 mx-auto">
|
<section className="w-full max-w-2xl text-center space-y-4 pb-8 mx-auto">
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import { useUmami } from "@danielgtmn/umami-react";
|
import { useUmami } from "@danielgtmn/umami-react";
|
||||||
import { Github, Mail, MessageSquare } from "lucide-react";
|
import { Github, Mail, MessageSquare } from "lucide-react";
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
export function Goals() {
|
export function Goals() {
|
||||||
return (
|
return (
|
||||||
<section className="w-full space-y-8">
|
<section className="w-full space-y-8">
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
export function Hero({
|
export function Hero({
|
||||||
glowColor,
|
glowColor,
|
||||||
borderStatus,
|
borderStatus,
|
||||||
@@ -18,7 +20,7 @@ export function Hero({
|
|||||||
oldUsernames: string[];
|
oldUsernames: string[];
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<section className="flex flex-col items-center text-center space-y-8 animate-fade-in">
|
<section className="mt-20 flex flex-col items-center text-center space-y-8 animate-fade-in">
|
||||||
<div className="relative group">
|
<div className="relative group">
|
||||||
<div
|
<div
|
||||||
className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
|
className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import type { RealWork } from "../types";
|
import type { RealWork } from "../types";
|
||||||
|
|
||||||
interface WorkExperienceProps {
|
interface WorkExperienceProps {
|
||||||
|
|||||||
1
src/types.d.ts
vendored
Normal file
1
src/types.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
declare module "*.css";
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
|
||||||
"target": "ES2022",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"types": ["vite/client"],
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"erasableSyntaxOnly": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
|
||||||
},
|
|
||||||
"include": ["src"]
|
|
||||||
}
|
|
||||||
@@ -1,7 +1,35 @@
|
|||||||
{
|
{
|
||||||
"files": [],
|
"compilerOptions": {
|
||||||
"references": [
|
"target": "ES2017",
|
||||||
{ "path": "./tsconfig.app.json" },
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
{ "path": "./tsconfig.node.json" }
|
"allowJs": true,
|
||||||
]
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
"src/**/*.d.ts",
|
||||||
|
".next/types/**/*.ts",
|
||||||
|
".next/dev/types/**/*.ts",
|
||||||
|
"**/*.mts"
|
||||||
|
],
|
||||||
|
"exclude": ["node_modules", "old"]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
||||||
"target": "ES2023",
|
|
||||||
"lib": ["ES2023"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"types": ["node"],
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"erasableSyntaxOnly": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import { defineConfig } from "vite";
|
|
||||||
import react from "@vitejs/plugin-react";
|
|
||||||
import tailwindcss from "@tailwindcss/vite";
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react(), tailwindcss()],
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user