mirror of
https://github.com/NeonGamerBot-QK/saahild.com.git
synced 2025-06-24 18:54:21 +00:00
feat(tree-wide): init
This commit is contained in:
parent
c55d4ac9fc
commit
0dcd234614
GPG key ID:
8A8B64515254CFC6
93 changed files with 123 additions and 43291 deletions
37
.gitignore
vendored
37
.gitignore
vendored
|
|
@ -1,23 +1,24 @@
|
||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
# Nuxt dev/build outputs
|
||||||
|
.output
|
||||||
|
.data
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
dist
|
||||||
|
|
||||||
# dependencies
|
# Node dependencies
|
||||||
/node_modules
|
node_modules
|
||||||
/.pnp
|
|
||||||
.pnp.js
|
|
||||||
|
|
||||||
# testing
|
# Logs
|
||||||
/coverage
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
# production
|
# Misc
|
||||||
/build
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.env.local
|
.fleet
|
||||||
.env.development.local
|
.idea
|
||||||
.env.test.local
|
|
||||||
.env.production.local
|
|
||||||
|
|
||||||
npm-debug.log*
|
# Local env files
|
||||||
yarn-debug.log*
|
.env
|
||||||
yarn-error.log*
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
|
|
||||||
281
README.md
281
README.md
|
|
@ -1,236 +1,75 @@
|
||||||
<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->
|
# Nuxt Minimal Starter
|
||||||
<a name="readme-top"></a>
|
|
||||||
<!--
|
|
||||||
*** Thanks for checking out the Best-README-Template. If you have a suggestion
|
|
||||||
*** that would make this better, please fork the repo and create a pull request
|
|
||||||
*** or simply open an issue with the tag "enhancement".
|
|
||||||
*** Don't forget to give the project a star!
|
|
||||||
*** Thanks again! Now go create something AMAZING! :D
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
<!-- PROJECT SHIELDS -->
|
Make sure to install dependencies:
|
||||||
<!--
|
|
||||||
*** I'm using markdown "reference style" links for readability.
|
|
||||||
*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
|
|
||||||
*** See the bottom of this document for the declaration of the reference variables
|
|
||||||
*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
|
|
||||||
*** https://www.markdownguide.org/basic-syntax/#reference-style-links
|
|
||||||
-->
|
|
||||||
[![Contributors][contributors-shield]][contributors-url]
|
|
||||||
[![Forks][forks-shield]][forks-url]
|
|
||||||
[![Stargazers][stars-shield]][stars-url]
|
|
||||||
[![Issues][issues-shield]][issues-url]
|
|
||||||
[![MIT License][license-shield]][license-url]
|
|
||||||
[](https://wakatime.com/badge/user/018eed1d-6093-4f51-9fca-7863b7a1ac97/project/ef0a3841-b8cc-4944-92cb-44f8de438476)
|
|
||||||
|
|
||||||
|
```bash
|
||||||
<!-- PROJECT LOGO -->
|
# npm
|
||||||
<br />
|
|
||||||
<div align="center">
|
|
||||||
<a href="https://github.com/NeonGamerBot-QK/saahild.com">
|
|
||||||
<img src="public/favicon.png" alt="Logo" width="80" height="80">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<h3 align="center">saahild.com</h3>
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
My Site
|
|
||||||
<br />
|
|
||||||
<!-- <a href="https://github.com/NeonGamerBot-QK/saahild.com"><strong>Explore the docs »</strong></a> -->
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<a href="https://saahild.com">View Site</a>
|
|
||||||
·
|
|
||||||
<a href="https://github.com/NeonGamerBot-QK/saahild.com/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
|
|
||||||
·
|
|
||||||
<a href="https://github.com/NeonGamerBot-QK/saahild.com/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- TABLE OF CONTENTS -->
|
|
||||||
<details>
|
|
||||||
<summary>Table of Contents</summary>
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
<a href="#about-the-project">About The Project</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#built-with">Built With</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#getting-started">Getting Started</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#prerequisites">Prerequisites</a></li>
|
|
||||||
<li><a href="#installation">Installation</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="#usage">Usage</a></li>
|
|
||||||
<li><a href="#roadmap">Roadmap</a></li>
|
|
||||||
<li><a href="#contributing">Contributing</a></li>
|
|
||||||
<li><a href="#license">License</a></li>
|
|
||||||
<li><a href="#contact">Contact</a></li>
|
|
||||||
<li><a href="#acknowledgments">Acknowledgments</a></li>
|
|
||||||
</ol>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ABOUT THE PROJECT -->
|
|
||||||
## About The Project
|
|
||||||
|
|
||||||
[![Product Name Screen Shot][product-screenshot]](https://saahild.com)
|
|
||||||
|
|
||||||
This is my personal website
|
|
||||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Built With
|
|
||||||
|
|
||||||
<!-- * [![Next][Next.js]][Next-url] -->
|
|
||||||
* [![React][React.js]][React-url]
|
|
||||||
* 
|
|
||||||
* [](https://catppuccin.com/)
|
|
||||||
<!-- * [![Vue][Vue.js]][Vue-url] -->
|
|
||||||
<!-- * [![Angular][Angular.io]][Angular-url] -->
|
|
||||||
<!-- * [![Svelte][Svelte.dev]][Svelte-url] -->
|
|
||||||
<!-- * [![Laravel][Laravel.com]][Laravel-url] -->
|
|
||||||
<!-- * [![Bootstrap][Bootstrap.com]][Bootstrap-url] -->
|
|
||||||
<!-- * [![JQuery][JQuery.com]][JQuery-url] -->
|
|
||||||
|
|
||||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- GETTING STARTED -->
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
### Prerequisites
|
|
||||||
Install deps
|
|
||||||
* npm
|
|
||||||
```sh
|
|
||||||
npm install
|
npm install
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun install
|
||||||
```
|
```
|
||||||
|
|
||||||
### Installation
|
## Development Server
|
||||||
1. Clone the repo
|
|
||||||
```sh
|
Start the development server on `http://localhost:3000`:
|
||||||
git clone https://github.com/NeonGamerBot-QK/saahild.com.git
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm dev
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn dev
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run dev
|
||||||
```
|
```
|
||||||
2. Install NPM packages
|
|
||||||
```sh
|
## Production
|
||||||
npm install
|
|
||||||
|
Build the application for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm build
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run build
|
||||||
```
|
```
|
||||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
|
||||||
|
|
||||||
|
Locally preview production build:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run preview
|
||||||
|
|
||||||
<!-- USAGE EXAMPLES
|
# pnpm
|
||||||
## Usage
|
pnpm preview
|
||||||
|
|
||||||
Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
|
# yarn
|
||||||
|
yarn preview
|
||||||
|
|
||||||
<!-- _For more examples, please refer to the [Documentation](https://example.com)_
|
# bun
|
||||||
|
bun run preview
|
||||||
|
```
|
||||||
|
|
||||||
<p align="right">(<a href="#readme-top">back to top</a>)</p> -->
|
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ROADMAP -->
|
|
||||||
<!-- ## Roadmap
|
|
||||||
|
|
||||||
- [ ] Feature 1
|
|
||||||
- [ ] Feature 2
|
|
||||||
- [ ] Feature 3
|
|
||||||
- [ ] Nested Feature -->
|
|
||||||
|
|
||||||
See the [open issues](https://github.com/NeonGamerBot-QK/saahild.com/issues) for a full list of proposed features (and known issues).
|
|
||||||
|
|
||||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CONTRIBUTING -->
|
|
||||||
## Contributing
|
|
||||||
|
|
||||||
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
|
|
||||||
|
|
||||||
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
|
|
||||||
Don't forget to give the project a star! Thanks again!
|
|
||||||
|
|
||||||
1. Fork the Project
|
|
||||||
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
|
|
||||||
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
|
|
||||||
4. Push to the Branch (`git push origin feature/AmazingFeature`)
|
|
||||||
5. Open a Pull Request
|
|
||||||
|
|
||||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- LICENSE -->
|
|
||||||
## License
|
|
||||||
|
|
||||||
Distributed under the MIT License. See `LICENSE.txt` for more information.
|
|
||||||
|
|
||||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CONTACT -->
|
|
||||||
## Contact
|
|
||||||
|
|
||||||
Neon - - git@saahild.com
|
|
||||||
|
|
||||||
Project Link: [https://github.com/NeonGamerBot-QK/saahild.com](https://github.com/NeonGamerBot-QK/saahild.com)
|
|
||||||
|
|
||||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
|
||||||
|
|
||||||
|
|
||||||
<!--
|
|
||||||
<!-- ACKNOWLEDGMENTS
|
|
||||||
## Acknowledgments
|
|
||||||
|
|
||||||
* []()
|
|
||||||
* []()
|
|
||||||
* []() -->
|
|
||||||
|
|
||||||
<!-- <p align="right">(<a href="#readme-top">back to top</a>)</p> -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- MARKDOWN LINKS & IMAGES -->
|
|
||||||
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
|
|
||||||
[contributors-shield]: https://img.shields.io/github/contributors/NeonGamerBot-QK/saahild.com.svg?style=for-the-badge
|
|
||||||
[contributors-url]: https://github.com/NeonGamerBot-QK/saahild.com/graphs/contributors
|
|
||||||
[forks-shield]: https://img.shields.io/github/forks/NeonGamerBot-QK/saahild.com.svg?style=for-the-badge
|
|
||||||
[forks-url]: https://github.com/NeonGamerBot-QK/saahild.com/network/members
|
|
||||||
[stars-shield]: https://img.shields.io/github/stars/NeonGamerBot-QK/saahild.com.svg?style=for-the-badge
|
|
||||||
[stars-url]: https://github.com/NeonGamerBot-QK/saahild.com/stargazers
|
|
||||||
[issues-shield]: https://img.shields.io/github/issues/NeonGamerBot-QK/saahild.com.svg?style=for-the-badge
|
|
||||||
[issues-url]: https://github.com/NeonGamerBot-QK/saahild.com/issues
|
|
||||||
[license-shield]: https://img.shields.io/github/license/NeonGamerBot-QK/saahild.com.svg?style=for-the-badge
|
|
||||||
[license-url]: https://github.com/NeonGamerBot-QK/saahild.com/blob/master/LICENSE.txt
|
|
||||||
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
|
|
||||||
[linkedin-url]: https://linkedin.com/in/linkedin_username
|
|
||||||
[product-screenshot]: public/screenshot.png
|
|
||||||
[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
|
|
||||||
[Next-url]: https://nextjs.org/
|
|
||||||
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
|
|
||||||
[React-url]: https://reactjs.org/
|
|
||||||
[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D
|
|
||||||
[Vue-url]: https://vuejs.org/
|
|
||||||
[Angular.io]: https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white
|
|
||||||
[Angular-url]: https://angular.io/
|
|
||||||
[Svelte.dev]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00
|
|
||||||
[Svelte-url]: https://svelte.dev/
|
|
||||||
[Laravel.com]: https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white
|
|
||||||
[Laravel-url]: https://laravel.com
|
|
||||||
[Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
|
|
||||||
[Bootstrap-url]: https://getbootstrap.com
|
|
||||||
[JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
|
|
||||||
[JQuery-url]: https://jquery.com
|
|
||||||
|
|
|
||||||
6
app.vue
Normal file
6
app.vue
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<NuxtRouteAnnouncer />
|
||||||
|
<NuxtWelcome />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
6
eslint.config.mjs
Normal file
6
eslint.config.mjs
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
// @ts-check
|
||||||
|
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||||
|
|
||||||
|
export default withNuxt(
|
||||||
|
// Your custom configs here
|
||||||
|
)
|
||||||
18
nuxt.config.ts
Normal file
18
nuxt.config.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
compatibilityDate: '2025-05-15',
|
||||||
|
devtools: { enabled: true },
|
||||||
|
target: 'static',
|
||||||
|
// make static output
|
||||||
|
ssr: false,
|
||||||
|
nitro: {
|
||||||
|
preset: 'static'
|
||||||
|
},
|
||||||
|
modules: [
|
||||||
|
'@nuxt/content',
|
||||||
|
'@nuxt/eslint',
|
||||||
|
'@nuxt/fonts',
|
||||||
|
'@nuxt/icon',
|
||||||
|
'@nuxt/image'
|
||||||
|
]
|
||||||
|
})
|
||||||
18100
package-lock.json
generated
18100
package-lock.json
generated
File diff suppressed because it is too large
Load diff
70
package.json
70
package.json
|
|
@ -1,58 +1,24 @@
|
||||||
{
|
{
|
||||||
"name": "saahild.com",
|
"name": "nuxt-app",
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"type": "module",
|
||||||
"@mdi/js": "^7.4.47",
|
|
||||||
"@mdi/react": "^1.6.1",
|
|
||||||
"@testing-library/jest-dom": "^5.17.0",
|
|
||||||
"@testing-library/react": "^13.4.0",
|
|
||||||
"@testing-library/user-event": "^13.5.0",
|
|
||||||
"@types/jest": "^27.5.2",
|
|
||||||
"@types/node": "^16.18.98",
|
|
||||||
"@types/react": "^18.3.3",
|
|
||||||
"@types/react-dom": "^18.3.0",
|
|
||||||
"ackee-tracker": "^5.1.0",
|
|
||||||
"animate.css": "^4.1.1",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"react-animate-on-scroll": "^2.1.9",
|
|
||||||
"react-dom": "^18.2.0",
|
|
||||||
"react-icons": "^5.2.1",
|
|
||||||
"react-parallax-tilt": "^1.7.224",
|
|
||||||
"react-scripts": "5.0.1",
|
|
||||||
"typescript": "^4.9.5",
|
|
||||||
"typewriter-effect": "^2.21.0",
|
|
||||||
"web-vitals": "^2.1.4"
|
|
||||||
},
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"build": "nuxt build",
|
||||||
"build:react": "react-scripts build",
|
"dev": "nuxt dev",
|
||||||
"build": "bun run scripts/build.ts",
|
"generate": "nuxt generate",
|
||||||
"test": "react-scripts test",
|
"preview": "nuxt preview",
|
||||||
"eject": "react-scripts eject"
|
"postinstall": "nuxt prepare"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"dependencies": {
|
||||||
"extends": [
|
"@nuxt/content": "3.6.0",
|
||||||
"react-app",
|
"@nuxt/eslint": "1.4.1",
|
||||||
"react-app/jest"
|
"@nuxt/fonts": "0.11.4",
|
||||||
]
|
"@nuxt/icon": "1.13.0",
|
||||||
},
|
"@nuxt/image": "1.10.0",
|
||||||
"browserslist": {
|
"better-sqlite3": "^11.10.0",
|
||||||
"production": [
|
"eslint": "^9.0.0",
|
||||||
">0.2%",
|
"nuxt": "^3.17.5",
|
||||||
"not dead",
|
"vue": "^3.5.16",
|
||||||
"not op_mini all"
|
"vue-router": "^4.5.1"
|
||||||
],
|
|
||||||
"development": [
|
|
||||||
"last 1 chrome version",
|
|
||||||
"last 1 firefox version",
|
|
||||||
"last 1 safari version"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/ackee-tracker": "^5.0.4",
|
|
||||||
"@types/react-animate-on-scroll": "^2.1.8",
|
|
||||||
"daisyui": "^4.12.2",
|
|
||||||
"tailwindcss": "^3.4.4"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
12112
pnpm-lock.yaml
generated
12112
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,207 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<meta name="theme-color" content="#cba6f7" class="theme-color" />
|
|
||||||
<meta http-equiv="onion-location" content="http://ohdhie7qka42mvxcl2lb5bcxw6jumwn6lbqdmpli3xxhktvyqg2gtryd.onion/">
|
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="My site saahild.com"
|
|
||||||
/>
|
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
||||||
<title>Loading...</title>
|
|
||||||
<!-- Google / Search Engine Tags -->
|
|
||||||
<meta itemprop="name" content="Saahil" />
|
|
||||||
<meta
|
|
||||||
itemprop="image"
|
|
||||||
content="screenshot.png"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Facebook Meta Tags -->
|
|
||||||
<meta property="og:url" content="https://saahild.com" />
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:title" content="Saahil" />
|
|
||||||
<meta
|
|
||||||
property="og:image"
|
|
||||||
content="screenshot.png"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Twitter Meta Tags -->
|
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
|
||||||
<meta name="twitter:title" content="Saahil" />
|
|
||||||
<meta
|
|
||||||
name="twitter:description"
|
|
||||||
content="My site saahild.com"
|
|
||||||
/>
|
|
||||||
<meta
|
|
||||||
name="twitter:image"
|
|
||||||
content="screenshot.png"
|
|
||||||
/>
|
|
||||||
<!-- <script async src="https://ackee.saahild.com/tracker.js" data-ackee-server="https://ackee.saahild.com" data-ackee-domain-id="c082bd15-f9d8-414f-aa10-926e1d66a5d6" data-ackee-opts='{ "ignoreOwnVisits": false, "detailed": true }'></script> -->
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<noscript>
|
|
||||||
<META HTTP-EQUIV="refresh" CONTENT="15">
|
|
||||||
<style>
|
|
||||||
/* body {font-family: Arial, Helvetica, sans-serif;} */
|
|
||||||
/* The Modal (background) */
|
|
||||||
.my-modal {
|
|
||||||
display: none;
|
|
||||||
position: fixed; /* Stay in place */
|
|
||||||
z-index: 1;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%; /* Full width */
|
|
||||||
height: 100%; /* Full height */
|
|
||||||
overflow: auto; /* Enable scroll if needed */
|
|
||||||
background-color: #1e1e2e; /* Fallback color */
|
|
||||||
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
|
|
||||||
-webkit-animation-name: fadeIn; /* Fade in the background */
|
|
||||||
-webkit-animation-duration: 0.4s;
|
|
||||||
animation-name: fadeIn;
|
|
||||||
animation-duration: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modal Content */
|
|
||||||
.my-modal-content {
|
|
||||||
position: fixed;
|
|
||||||
color: #cdd6f4;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: #313244;
|
|
||||||
width: 100%;
|
|
||||||
-webkit-animation-name: slideIn;
|
|
||||||
-webkit-animation-duration: 0.4s;
|
|
||||||
animation-name: slideIn;
|
|
||||||
animation-duration: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The Close Button */
|
|
||||||
.my-close {
|
|
||||||
color: #cba6f7;
|
|
||||||
float: right;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-close:hover,
|
|
||||||
.my-close:focus {
|
|
||||||
color: #f5c2e7;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-modal-header {
|
|
||||||
padding: 2px 16px;
|
|
||||||
background-image: linear-gradient(
|
|
||||||
to left,
|
|
||||||
#1e1e2e,
|
|
||||||
#11111b
|
|
||||||
);
|
|
||||||
/*#5cb85c */;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-modal-body {
|
|
||||||
padding: 2px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-modal-footer {
|
|
||||||
padding: 2px 16px;
|
|
||||||
/* bottom: 0; */
|
|
||||||
/* position: absolute; */
|
|
||||||
/* right: 50%; */
|
|
||||||
/* background-color: #5cb85c; */
|
|
||||||
background-repeat: repeat-x;
|
|
||||||
background-image: linear-gradient(
|
|
||||||
to left,
|
|
||||||
#1e1e2e,
|
|
||||||
#11111b
|
|
||||||
);
|
|
||||||
color: #cdd6f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add Animation */
|
|
||||||
@-webkit-keyframes slideIn {
|
|
||||||
from {
|
|
||||||
bottom: -300px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
bottom: 0;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideIn {
|
|
||||||
from {
|
|
||||||
bottom: -300px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
bottom: 0;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #89b4fa;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #b4befe;
|
|
||||||
}
|
|
||||||
a:visited {
|
|
||||||
color: #cba6f7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="my-modal-content" style="height: 100vh;">
|
|
||||||
<div class="my-modal-header">
|
|
||||||
<span class="my-close"><a href="/">×</a> </span>
|
|
||||||
<h2>Please enable javascript</h2>
|
|
||||||
</div>
|
|
||||||
<div class="my-modal-body" style="height: 85vh;">
|
|
||||||
<p>You need to enable JavaScript to run this app.</p>
|
|
||||||
</div>
|
|
||||||
<div class="my-modal-footer">
|
|
||||||
<h3>Reload page once you have enabled javascript or click <a href="/">here</a></h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</noscript>
|
|
||||||
<!--
|
|
||||||
|
|
||||||
|
|
||||||
_________ _____ _____ ___ ___ .___.____ ________ _________ ________ _____
|
|
||||||
/ _____/ / _ \ / _ \ / | \| | | \______ \ \_ ___ \ \_____ \ / \
|
|
||||||
\_____ \ / /_\ \ / /_\ \/ ~ \ | | | | \ / \ \/ / | \ / \ / \
|
|
||||||
/ \/ | \/ | \ Y / | |___ | ` \ \ \____/ | \/ Y \
|
|
||||||
/_______ /\____|__ /\____|__ /\___|_ /|___|_______ \/_______ / /\ \______ /\_______ /\____|__ /
|
|
||||||
\/ \/ \/ \/ \/ \/ \/ \/ \/ \/
|
|
||||||
|
|
||||||
|
|
||||||
-->
|
|
||||||
<div id="root"></div>
|
|
||||||
<!-- Masadon verification -->
|
|
||||||
<a rel="me" href="https://mastodon.social/@neongamerbot" style="display: none;">Mastodon</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,3 +1,2 @@
|
||||||
# https://www.robotstxt.org/robotstxt.html
|
User-Agent: *
|
||||||
User-agent: *
|
|
||||||
Disallow:
|
Disallow:
|
||||||
|
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import fs from 'fs'
|
|
||||||
import path from 'path'
|
|
||||||
const reactOutput = Bun.spawnSync({
|
|
||||||
cmd: ['bun', 'build:react']
|
|
||||||
})
|
|
||||||
console.log(reactOutput.stdout.toString())
|
|
||||||
console.log(`Built react app`)
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
// Enable latest features
|
|
||||||
"lib": ["ESNext", "DOM"],
|
|
||||||
"target": "ESNext",
|
|
||||||
"module": "ESNext",
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
"allowJs": true,
|
|
||||||
|
|
||||||
// Bundler mode
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
// Best practices
|
|
||||||
"strict": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
|
|
||||||
// Some stricter flags (disabled by default)
|
|
||||||
"noUnusedLocals": false,
|
|
||||||
"noUnusedParameters": false,
|
|
||||||
"noPropertyAccessFromIndexSignature": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
3
server/tsconfig.json
Normal file
3
server/tsconfig.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "../.nuxt/tsconfig.server.json"
|
||||||
|
}
|
||||||
69
src/Ackee.ts
69
src/Ackee.ts
|
|
@ -1,69 +0,0 @@
|
||||||
//@ts-ignore
|
|
||||||
import * as ackeeTracker from 'ackee-tracker'
|
|
||||||
const doNotTrack = navigator.doNotTrack == "1" || localStorage.doNotTrack || sessionStorage.doNotTrack || false;
|
|
||||||
const isDev = process.env.NODE_ENV !== "production"
|
|
||||||
export enum Actions {
|
|
||||||
LCP="05296971-2faa-431b-ae01-e7d68e5d6ec4",
|
|
||||||
CONTACT_FORM="e49da181-1b12-4db4-8296-35ec26a8f1a9"
|
|
||||||
}
|
|
||||||
export default class Ackee {
|
|
||||||
client: ackeeTracker.AckeeInstance
|
|
||||||
domainId: string
|
|
||||||
constructor({
|
|
||||||
server_url, id
|
|
||||||
}: {
|
|
||||||
server_url: string,
|
|
||||||
id: string
|
|
||||||
} = {
|
|
||||||
server_url: "https://ackee.saahild.com",
|
|
||||||
id: ""
|
|
||||||
}) {
|
|
||||||
this.client = ackeeTracker.create(server_url, {
|
|
||||||
detailed: doNotTrack ? false : true,
|
|
||||||
ignoreLocalhost: !isDev,
|
|
||||||
ignoreOwnVisits: false,
|
|
||||||
})
|
|
||||||
this.domainId = id
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
init() {
|
|
||||||
this.client.record(this.domainId)
|
|
||||||
}
|
|
||||||
getDeviceInfo() {
|
|
||||||
const nav = /** @type {null | (Navigator & { deviceMemory: number, connection: NetworkInformation })} */ (typeof navigator ===
|
|
||||||
'undefined'
|
|
||||||
? null
|
|
||||||
: navigator)
|
|
||||||
return {
|
|
||||||
url: window.location ? window.location.href : null,
|
|
||||||
referrer: document ? document.referrer : null,
|
|
||||||
userAgent: nav ? nav.userAgent : null,
|
|
||||||
cpus: nav ? nav.hardwareConcurrency : undefined,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleWebVitals = () =>(d: any) => {
|
|
||||||
if(isDev) console.log(d)
|
|
||||||
let idThing = d.name
|
|
||||||
switch(idThing) {
|
|
||||||
|
|
||||||
case "LCP":
|
|
||||||
d.entries.forEach((e: any) =>{
|
|
||||||
this.client.action(Actions.LCP, {
|
|
||||||
key: e.id || d.id,
|
|
||||||
value: e.loadTime + e.renderTime
|
|
||||||
})
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
if(isDev) console.log(`I have NO idea what the rest is!`)
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
contactPage(email: string) {
|
|
||||||
return this.client.action(Actions.CONTACT_FORM, {
|
|
||||||
key: email,
|
|
||||||
value: 1
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
34
src/App.tsx
34
src/App.tsx
|
|
@ -1,34 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import Main from './components/main'
|
|
||||||
import Navbar from './components/navbar'
|
|
||||||
import InfogramBelowMain from './components/infobelowmain'
|
|
||||||
import { HashRouter } from './components/HashRouter'
|
|
||||||
import Route from './components/HashRouter/Route'
|
|
||||||
import AboutPage from './components/AboutPage'
|
|
||||||
import SkillSet from './components/AboutPage/SkillSet'
|
|
||||||
import GithubStats from './components/AboutPage/Github'
|
|
||||||
import Projects from './components/Projects'
|
|
||||||
import Page404 from './components/static/404'
|
|
||||||
import ContactPage from './components/ContactPage'
|
|
||||||
|
|
||||||
function App ({ analytics }: any) {
|
|
||||||
return (
|
|
||||||
<HashRouter>
|
|
||||||
<Route path={'#/'} index component={<div style={{ zIndex: 9999 }}>
|
|
||||||
<Main />
|
|
||||||
<InfogramBelowMain />
|
|
||||||
<br />
|
|
||||||
</div>} />
|
|
||||||
<Route path='#/about' component={<>
|
|
||||||
<AboutPage />
|
|
||||||
<SkillSet />
|
|
||||||
<GithubStats />
|
|
||||||
</>} />
|
|
||||||
<Route path='#/projects' component={<Projects />} />
|
|
||||||
<Route path='#/contact' component={<ContactPage analytics={analytics} />} />
|
|
||||||
<Route path='*' component={<Page404 />} />
|
|
||||||
</HashRouter>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 229 KiB |
|
|
@ -1,7 +0,0 @@
|
||||||
<svg width='368' height='337' viewBox='0 0 368 337' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
||||||
<path d='M34.469 187.163L129.625 261.633C148.656 276.529 158.172 283.977 169.148 286.767C178.805 289.222 189.195 289.222 198.851 286.767C209.828 283.977 219.344 276.529 238.375 261.633L333.531 187.163L333.671 187.069L333.742 187.019L333.859 186.927C352.656 172.188 362.101 164.774 365.648 156.231C367.218 152.454 367.999 148.531 367.999 144.608V192.608C367.999 196.531 367.218 200.454 365.648 204.231C362.085 212.81 352.578 220.252 333.601 235.116L333.531 235.163L238.375 309.633C219.344 324.529 209.828 331.976 198.851 334.767C189.195 337.222 178.805 337.222 169.148 334.767C158.172 331.976 148.656 324.529 129.625 309.633L34.469 235.163L34.3987 235.116C15.4222 220.252 5.91442 212.81 2.35192 204.231C0.781616 200.454 0.000367613 196.531 0.000367613 192.607V144.608C0.000367613 148.531 0.781616 152.454 2.35192 156.231C5.89879 164.774 15.3441 172.188 34.1409 186.927L34.2581 187.019L34.3284 187.069L34.469 187.163Z' fill='#DBDBDB' />
|
|
||||||
<path d='M34.469 187.163C15.4359 172.267 5.91752 164.819 2.35192 156.231C-0.784465 148.677 -0.78373 140.54 2.35266 132.985C5.91826 124.397 15.4348 116.949 34.4679 102.054L129.625 27.5833C148.658 12.6878 158.174 5.24003 169.148 2.44957C178.801 -0.00499868 189.199 -0.00499868 198.852 2.44957C209.825 5.24003 219.342 12.6878 238.375 27.5833L333.532 102.054C352.565 116.949 362.082 124.397 365.647 132.985C368.784 140.54 368.784 148.677 365.648 156.231C362.082 164.819 352.564 172.267 333.531 187.163L238.375 261.633C219.344 276.529 209.828 283.977 198.851 286.767C189.195 289.222 178.805 289.222 169.148 286.767C158.172 283.977 148.656 276.529 129.625 261.633L34.469 187.163Z' fill='white' />
|
|
||||||
<path d='M143.218 94.9613C133.702 87.5136 128.944 83.7897 127.161 79.4956C125.593 75.7184 125.593 71.6497 127.161 67.8725C128.944 63.5784 133.702 59.8545 143.218 52.4067L156.812 41.7681C166.329 34.3204 171.087 30.5965 176.574 29.2013C181.4 27.974 186.599 27.974 191.426 29.2013C196.913 30.5965 201.671 34.3204 211.188 41.7681L224.781 52.4067C234.298 59.8545 239.056 63.5784 240.839 67.8725C242.407 71.6497 242.407 75.7184 240.839 79.4956C239.056 83.7897 234.298 87.5136 224.781 94.9613L211.188 105.6C201.671 113.048 196.913 116.772 191.426 118.167C186.599 119.394 181.4 119.394 176.574 118.167C171.087 116.772 166.329 113.048 156.812 105.6L143.218 94.9613Z' fill='#FF8686' />
|
|
||||||
<path d='M233.844 165.886C224.327 158.438 219.569 154.714 217.786 150.42C216.218 146.643 216.218 142.574 217.786 138.797C219.569 134.503 224.327 130.779 233.844 123.331L247.438 112.692C256.954 105.245 261.713 101.521 267.199 100.126C272.026 98.8982 277.225 98.8982 282.051 100.126C287.538 101.521 292.296 105.245 301.813 112.692L315.407 123.331C324.923 130.779 329.682 134.503 331.464 138.797C333.033 142.574 333.033 146.643 331.464 150.42C329.682 154.714 324.923 158.438 315.407 165.886L301.813 176.524C292.296 183.972 287.538 187.696 282.051 189.091C277.225 190.318 272.026 190.318 267.199 189.091C261.713 187.696 256.954 183.972 247.438 176.524L233.844 165.886Z' fill='#5AFF88' />
|
|
||||||
<path d='M52.593 165.886C43.0765 158.438 38.3182 154.714 36.5354 150.42C34.9672 146.643 34.9672 142.574 36.5354 138.797C38.3182 134.503 43.0765 130.779 52.593 123.331L66.1868 112.692C75.7034 105.245 80.4617 101.521 85.9486 100.126C90.775 98.8982 95.974 98.8982 100.8 100.126C106.287 101.521 111.046 105.245 120.562 112.692L224.781 194.255C234.298 201.703 239.056 205.427 240.839 209.721C242.407 213.498 242.407 217.567 240.839 221.344C239.056 225.638 234.298 229.362 224.781 236.81L211.188 247.448C201.671 254.896 196.913 258.62 191.426 260.015C186.599 261.243 181.4 261.243 176.574 260.015C171.087 258.62 166.329 254.896 156.812 247.448L52.593 165.886Z' fill='#768CFF' />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.7 KiB |
|
|
@ -1,7 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke="#a6e3a1" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M2 15.5c-.7 0-1.5-.8-1.5-1.5V5c0-.7.8-1.5 1.5-1.5h9c.7 0 1.5.8 1.5 1.5v9c0 .7-.8 1.5-1.5 1.5z" />
|
|
||||||
<path d="m1.2 3.8 3.04-2.5S5.17.5 5.7.5h8.4c.66 0 1.4.73 1.4 1.4v7.73a2.7 2.7 0 01-.7 1.75l-2.68 3.51" />
|
|
||||||
<path d="M6 8.75c0-.69-.54-1.25-1.2-1.25h-.6c-.66 0-1.2.56-1.2 1.25S3.54 10 4.2 10h.6c.66 0 1.2.56 1.2 1.25s-.54 1.25-1.2 1.25h-.6c-.66 0-1.2-.56-1.2-1.25M4.5 6.5v1m0 5v1" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 572 B |
|
|
@ -1,7 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path stroke="#f5e0dc" d="M.5 8.51c0 5.25 5.5 6 7.5 6s7.5-.75 7.5-6c0-4-4.5-6-7.5-7-3 1-7.5 3-7.5 7z" />
|
|
||||||
<path stroke="#eba0ac" d="M6.5 10.51h3c-.33.67-.83 1-1.5 1s-1.17-.33-1.5-1" />
|
|
||||||
<path stroke="#cdd6f4" d="M5 8.51a.5.5 0 100-1 .5.5 0 000 1zm6 0a.5.5 0 100-1 .5.5 0 000 1z" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 447 B |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke="#fab387" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M14.5 7c-.5 2.5-2 5.5-3 6.5s-2 1-3 1-2 0-3.02-1C4.45 12.5 3 9.5 2.5 7c3 2 9 2 12 0m-12-2c3 2 9 2 12 0" />
|
|
||||||
<path d="M2.5 8.4c-1.73 1.6-1.26 4.17 2 4.1M7 2c-.75-.36-1.5.18-1.5.74-.01.56.94.78 1.5.75.6-.03.97-.7 1.5-.96C8.98 2.3 9.41 2 10 2c.56 0 1.52.25 1.5 1-.01.61-1.12.8-1.5.49" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 474 B |
|
|
@ -1,4 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#89b4fa" stroke-linecap="round" stroke-linejoin="round" d="m 2.5559121,12.951629 c 2.7459832,2.734744 7.1981158,2.734744 9.9441189,0 l -1.789955,-1.782586 c -1.7574201,1.750224 -4.606788,1.750224 -6.3642295,0 -1.7574416,-1.7502236 -1.7574416,-4.587893 0,-6.338097 1.7574415,-1.750224 4.6068094,-1.750224 6.3642295,0 l 0.894977,-0.8912929 0.894978,-0.891293 c -2.7460031,-2.73472867 -7.198136,-2.73472867 -9.9441191,0 -2.74598585,2.7347089 -2.74598585,7.1685599 2e-7,9.9032689 z" clip-rule="evenodd" />
|
|
||||||
<path fill="none" stroke="#89b4fa" stroke-linecap="round" stroke-linejoin="round" d="M7.5 6v4M5.513524 7.9999996H9.51304M13.486476 5.9999996v4M11.5 7.9999992h3.999516" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 792 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#89b4fa" d="m 6.665625,1.0107144 c 0.54375,0.090628 0.9125,0.6062693 0.821875,1.1500367 L 7.18125,3.9983098 h 2.971875 L 10.5125,1.8326156 c 0.09063,-0.5437673 0.60625,-0.9125291 1.15,-0.8219012 0.54375,0.090628 0.9125,0.6062693 0.821875,1.1500367 L 12.18125,3.9983098 H 14 c 0.553125,0 1,0.4468892 1,1.0000319 0,0.5531426 -0.446875,1.0000319 -1,1.0000319 H 11.846875 L 11.18125,9.9985013 H 13 c 0.553125,0 1,0.4468897 1,1.0000317 0,0.553143 -0.446875,1.000032 -1,1.000032 H 10.846875 L 10.4875,14.164259 c -0.09063,0.543768 -0.60625,0.912529 -1.15,0.821902 -0.54375,-0.09063 -0.9125,-0.60627 -0.821875,-1.150037 l 0.30625,-1.834434 h -2.975 L 5.4875,14.167384 c -0.090625,0.543768 -0.60625,0.91253 -1.15,0.821902 C 3.79375,14.898658 3.425,14.383016 3.515625,13.839249 L 3.81875,11.998565 H 2 c -0.553125,0 -1,-0.446889 -1,-1.000032 C 1,10.445391 1.446875,9.9985013 2,9.9985013 H 4.153125 L 4.81875,5.9983736 H 3 c -0.553125,0 -1,-0.4468893 -1,-1.0000319 C 2,4.445199 2.446875,3.9983098 3,3.9983098 H 5.153125 L 5.5125,1.8326156 C 5.603125,1.2888483 6.11875,0.9200865 6.6625,1.0107144 Z M 6.846875,5.9983736 6.18125,9.9985013 H 9.153125 L 9.81875,5.9983736 Z" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>
|
|
||||||
<g fill='none' stroke-linecap='round' stroke-linejoin='round'>
|
|
||||||
<path stroke='#89b4fa' d='M1.5 1.5h13L13 13l-5 2-5-2z' />
|
|
||||||
<path stroke='#cdd6f4' d='M5 4.5h6l-.5 6-2.5 1-2.5-1-.08-1m1.08-2h4' />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 301 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#89b4fa" stroke-linecap="round" stroke-linejoin="round" d="M.5 8.5H11l.75-.5a5.35 5.35 0 010-3.5c1 .6 1 1.88 1.74 2 .77-.09 1.23.01 2 .52 0 0-.97 1.77-2.5 1.98-1.93 3.65-4.5 5.5-6.98 5.5C0 14.5.5 8.5.5 8.5m1 0v-2m0 0h8m-6 2v-4m0 0h4m-2-2h2m-2 6v-6m2 6v-6m2 6v-2" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 384 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#a6e3a1" stroke-linecap="round" stroke-linejoin="round" d="M5.5 13.5.5 8l5-5.5m2.99 11 6.01-11M9 5.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3m5 8a1.5 1.5 0 100-3 1.5 1.5 0 000 3" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 291 B |
|
|
@ -1,9 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path stroke="#a6e3a1" d="M7.5 11.5h-2a2 2 0 102 2z" />
|
|
||||||
<path stroke="#cba6f7" d="M7.5 10.5v-4h-2a2 2 0 100 4z" />
|
|
||||||
<path stroke="#f38ba8" d="M7.5 5.5v-4h-2a2 2 0 100 4z" />
|
|
||||||
<path stroke="#fab387" d="M10.5 5.5a2 2 0 100-4h-2v4z" />
|
|
||||||
<path stroke="#89dceb" d="M12.5 8.5a2 2 0 01-2 2 2 2 0 01-2-2 2 2 0 012-2 2 2 0 012 2" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 492 B |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>
|
|
||||||
<g fill='none' stroke-linecap='round' stroke-linejoin='round'>
|
|
||||||
<path stroke='#cdd6f4' d='M4.5 4.5H12c.83 0 1.5.67 1.5 1.5v.5m-7.5 7H2A1.5 1.5 0 01.5 12V3.5a1 1 0 011-1h5a1 1 0 011 1v1' />
|
|
||||||
<path stroke='#89dceb' d='M7.5 12.429c0-1.142.834-2.068 1.863-2.068.157-.813.717-1.477 1.47-1.741a2.15 2.15 0 012.177.461c.596.55.865 1.388.708 2.2h.396c.766 0 1.386.72 1.386 1.61 0 .888-.62 1.608-1.386 1.608H9.363c-1.029-.002-1.863-.928-1.863-2.07' />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 549 B |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>
|
|
||||||
<g fill='none' stroke-linecap='round' stroke-linejoin='round'>
|
|
||||||
<path stroke='#cdd6f4' d='m1.87 8 .7-2.74a1 1 0 01.96-.76h10.94a1 1 0 01.97 1.24l-.219.875M6 13.5H2A1.5 1.5 0 01.5 12V3.5a1 1 0 011-1h5a1 1 0 011 1v1' />
|
|
||||||
<path stroke='#89dceb' d='M7.5 12.429c0-1.142.834-2.068 1.863-2.068.157-.813.717-1.477 1.47-1.741a2.15 2.15 0 012.177.461c.596.55.865 1.388.708 2.2h.396c.766 0 1.386.72 1.386 1.61 0 .888-.62 1.608-1.386 1.608H9.363c-1.029-.002-1.863-.928-1.863-2.07' />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 578 B |
|
|
@ -1,14 +0,0 @@
|
||||||
// once again a lazy soul
|
|
||||||
const fs = require('fs')
|
|
||||||
const files = fs.readdirSync(__dirname).filter(e=>e.endsWith('.svg'))
|
|
||||||
console.log(`
|
|
||||||
// template: import cssIcon from "../../assets/icons/css.svg"
|
|
||||||
// autogenerated script fyi
|
|
||||||
${files.map(f => {
|
|
||||||
return `import ${f.replace('.svg', 'Icon')} from "../../assets/icons/${f}"`
|
|
||||||
}).join('\n')}
|
|
||||||
|
|
||||||
${files.map(f => {
|
|
||||||
return `export const ${f.replace('.svg', '')} = ${f.replace('.svg', 'Icon')};`
|
|
||||||
}).join('\n')}
|
|
||||||
`)
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path stroke="#cdd6f4" d="M8.5 10.5a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1m0-6a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1m3 3a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1m-4-2v4m-1-6-1-1m4 4-1-1" />
|
|
||||||
<path stroke="#fab387" d="m9.06 1.06 5.88 5.88a1.5 1.5 0 010 2.12l-5.88 5.88a1.5 1.5 0 01-2.12 0L1.06 9.06a1.5 1.5 0 010-2.12l5.88-5.88a1.5 1.5 0 012.12 0" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 546 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#f5c2e7" stroke-linecap="round" stroke-linejoin="round" d="M9 1.5a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1m-5.5 3a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1m0 7a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1m11 0a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1m-5.5 3a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1m5.5-10a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1m-12 1v5m11-5v5m-10 1h9m-6 2.5-3-1.5m6 1.5 3-1.5m-9-2 4-8m5 8-4-8m-5 1 3-1.5m3 0 3 1.5" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 604 B |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path stroke="#fab387" d="M1.5 1.5h13L13 13l-5 2-5-2z" />
|
|
||||||
<path stroke="#cdd6f4" d="M11 4.5H5l.25 3h5.5l-.25 3-2.5 1-2.5-1-.08-1" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 298 B |
|
|
@ -1,12 +0,0 @@
|
||||||
// yes i made a script
|
|
||||||
const fs = require('fs')
|
|
||||||
const names = process.argv.slice(2)
|
|
||||||
if(names.length == 0) return console.log(`No names..`)
|
|
||||||
names.forEach((n) => {
|
|
||||||
let s = Date.now()
|
|
||||||
console.log(`Downloading ${n}`)
|
|
||||||
fetch(`https://github.com/catppuccin/vscode-icons/blob/main/icons/mocha/${n}.svg?raw=true`).then(r=>r.arrayBuffer()).then(e => {
|
|
||||||
fs.writeFileSync(`${n}.svg`, Buffer.from(e))
|
|
||||||
console.log(`Written ${n} in ${Date.now() - s}ms`)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>
|
|
||||||
<g fill='none' stroke='#f9e2af' stroke-linecap='round' stroke-linejoin='round'>
|
|
||||||
<path d='M4.5 11c0 .828427.6715729 1.5 1.5 1.5.8284271 0 1.5-.671573 1.5-1.5V7.5M12.5 8.75C12.5 8.05964406 11.9627417 7.5 11.3 7.5L10.7 7.5C10.0372583 7.5 9.5 8.05964406 9.5 8.75 9.5 9.44035594 10.0372583 10 10.7 10L11.3 10C11.9627417 10 12.5 10.5596441 12.5 11.25 12.5 11.9403559 11.9627417 12.5 11.3 12.5L10.7 12.5C10.0372583 12.5 9.5 11.9403559 9.5 11.25' />
|
|
||||||
<path d='m 4,1.5 h 8 c 1.385,0 2.5,1.115 2.5,2.5 v 8 c 0,1.385 -1.115,2.5 -2.5,2.5 H 4 C 2.615,14.5 1.5,13.385 1.5,12 V 4 C 1.5,2.615 2.615,1.5 4,1.5 Z' />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 706 B |
|
|
@ -1,8 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke="#89dceb" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M8 10.8c4.14 0 7.5-1.25 7.5-2.8S12.14 5.2 8 5.2.5 6.45.5 8s3.36 2.8 7.5 2.8" />
|
|
||||||
<path d="M5.52 9.4c2.07 3.5 4.86 5.72 6.23 4.95 1.37-.78.8-4.24-1.27-7.75C8.41 3.1 5.62.88 4.25 1.65c-1.37.78-.8 4.24 1.27 7.75" />
|
|
||||||
<path d="M5.52 6.6c-2.07 3.5-2.64 6.97-1.27 7.75 1.37.77 4.16-1.45 6.23-4.95s2.64-6.97 1.27-7.75C10.38.88 7.59 3.1 5.52 6.6" />
|
|
||||||
<path d="M8.5 8a.5.5 0 01-.5.5.5.5 0 01-.5-.5.5.5 0 01.5-.5.5.5 0 01.5.5" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 612 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#f9e2af" stroke-linecap="round" stroke-linejoin="round" d="M4.5 2.5H4c-.75 0-1.5.75-1.5 1.5v2c0 1.1-1 2-1.83 2 .83 0 1.83.9 1.83 2v2c0 .75.75 1.5 1.5 1.5h.5m7-11h.5c.75 0 1.5.75 1.5 1.5v2c0 1.1 1 2 1.83 2-.83 0-1.83.9-1.83 2v2c0 .74-.75 1.5-1.5 1.5h-.5m-6.5-3a.5.5 0 100-1 .5.5 0 000 1m3 0a.5.5 0 100-1 .5.5 0 000 1m3 0a.5.5 0 100-1 .5.5 0 000 1" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 468 B |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke="#cdd6f4" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M12.33 12.85a6.5 6.5 0 111.55-2.08" />
|
|
||||||
<path d="M12.33 12.85 5.5 4.5v7m5-7v3" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 272 B |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<!-- <path stroke="#cdd6f4" d="M 4.5,4.5 H 12 c 0.828427,0 1.5,0.6715729 1.5,1.5 V 6.5 M 6,13.5 H 2 C 1.1715729,13.5 0.5,12.828427 0.5,12 V 3.5 c 0,-0.5522847 0.44771525,-1 1,-1 h 5 c 0.5522847,0 1,0.4477153 1,1 v 1" /> -->
|
|
||||||
<path stroke="#a6e3a1" d="M12.5,8.57587555 L15.5,10.2901613 L15.5,13.7098387 L12.5,15.4241244 L9.5,13.7098387 L9.5,10.2901613 L12.5,8.57587555 Z" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 537 B |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path stroke="#f38ba8" d="M2.45 1.5a.95.95 0 00-.95.95v11.1a.95.95 0 00.95.95h11.1a.95.95 0 00.95-.95V2.45a.95.95 0 00-.95-.95z" />
|
|
||||||
<path stroke="#cdd6f4" d="M4.5 4.5h7v7h-2v-5h-2v5h-3z" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 355 B |
|
|
@ -1,8 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path stroke="#fab387" d="M6 2v4" />
|
|
||||||
<path stroke="#cdd6f4" d="M10 9.5V14M6 6v8" />
|
|
||||||
<path stroke="#fab387" d="M10 2v7.5m4 .5V2H2v4h12" />
|
|
||||||
<path stroke="#cdd6f4" d="M2 10v4h12v-4z" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 352 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#94e2d5" stroke-linecap="round" stroke-linejoin="round" d="m8 .5 6.5 12.05-10 2.95-3-5zm-3.5 15L8 .5" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 223 B |
|
|
@ -1,5 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#7f849c" stroke-linecap="round" stroke-linejoin="round" d="m12 2 .5 6M4 2 3.5 8" />
|
|
||||||
<path fill="none" stroke="#cdd6f4" stroke-linecap="round" stroke-linejoin="round" d="M 3,10 H 13 M 4,8 h 8 c 0.554,0 1,0.446 1,1 v 5.5 c 0,0.554 -0.446,1 -1,1 H 4 c -0.554,0 -1,-0.446 -1,-1 V 9 C 3,8.446 3.446,8 4,8 Z" />
|
|
||||||
<path fill="none" stroke="#94e2d5" stroke-linecap="round" stroke-linejoin="round" d="M 6.5,3 3,4.5 V 5 L 4.5,5.5 8,4 11.5,5.5 13,5 V 4.5 L 9.5,3 13,1.5 V 1 L 11.5,0.5 8,2 4.5,0.5 3.0000348,1 3,1.5 Z" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 629 B |
|
|
@ -1,8 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path stroke="#89b4fa" d="M8.5 5.5h-3m6 0V3c0-.8-.7-1.5-1.5-1.5H7c-.8 0-1.5.7-1.5 1.5v2.5H3c-.8 0-1.5.7-1.5 1.5v2c0 .8.7 1.5 1.48 1.5" />
|
|
||||||
<path stroke="#f9e2af" d="M10.5 10.5h-3m-3 0V13c0 .8.7 1.5 1.5 1.5h3c.8 0 1.5-.7 1.5-1.5v-2.5H13c.8 0 1.5-.7 1.5-1.5V7c0-.8-.7-1.5-1.48-1.5H11.5c0 1.5 0 2-1 2h-2" />
|
|
||||||
<path stroke="#89b4fa" d="M2.98 10.5H4.5c0-1.5 0-2 1-2h2M7.5 3.5v0" />
|
|
||||||
<path stroke="#f9e2af" d="m 8.5,12.5 v 0" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 589 B |
|
|
@ -1,8 +0,0 @@
|
||||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>
|
|
||||||
<g fill='none' stroke='#89dceb' stroke-linecap='round' stroke-linejoin='round'>
|
|
||||||
<path d='M8 10.8c4.14 0 7.5-1.25 7.5-2.8S12.14 5.2 8 5.2.5 6.45.5 8s3.36 2.8 7.5 2.8' />
|
|
||||||
<path d='M5.52 9.4c2.07 3.5 4.86 5.72 6.23 4.95 1.37-.78.8-4.24-1.27-7.75C8.41 3.1 5.62.88 4.25 1.65c-1.37.78-.8 4.24 1.27 7.75' />
|
|
||||||
<path d='M5.52 6.6c-2.07 3.5-2.64 6.97-1.27 7.75 1.37.77 4.16-1.45 6.23-4.95s2.64-6.97 1.27-7.75C10.38.88 7.59 3.1 5.52 6.6' />
|
|
||||||
<path d='M8.5 8a.5.5 0 01-.5.5.5.5 0 01-.5-.5.5.5 0 01.5-.5.5.5 0 01.5.5' />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 622 B |
|
|
@ -1,27 +0,0 @@
|
||||||
import icons from https://github.com/catppuccin/vscode-icons/tree/main/icons/mocha
|
|
||||||
next
|
|
||||||
npm
|
|
||||||
prisma
|
|
||||||
puppeteer
|
|
||||||
sass
|
|
||||||
vscode
|
|
||||||
git
|
|
||||||
tailwind
|
|
||||||
bash
|
|
||||||
bun
|
|
||||||
cpp
|
|
||||||
docker
|
|
||||||
figma
|
|
||||||
graphql
|
|
||||||
html
|
|
||||||
javascript-react - installed
|
|
||||||
python
|
|
||||||
robots
|
|
||||||
csharp
|
|
||||||
coffeescript
|
|
||||||
json
|
|
||||||
yarn
|
|
||||||
ejs
|
|
||||||
vercel
|
|
||||||
visual-studio
|
|
||||||
pnpm
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" stroke="#cba6f7" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M3.5 5.5h9a1 1 0 011 1v7a1 1 0 01-1 1h-9a1 1 0 01-1-1v-7a1 1 0 011-1" />
|
|
||||||
<path d="M6.5 9a.5.5 0 01-.5.5.5.5 0 01-.5-.5.5.5 0 01.5-.5.5.5 0 01.5.5m4 0a.5.5 0 01-.5.5.5.5 0 01-.5-.5.5.5 0 01.5-.5.5.5 0 01.5.5M8 5.5v-2m-7.5 5v3m15-3v3M9 2.5a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1m-2.5 10h3" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 493 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#f5c2e7" stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.38c1.85 1.07 3.35.74 4.83-.2 1.5-.95 2.7-2.78 1.3-4.15-.7-.68-3.25-.8-5.62.19-2.36.99-4.59 3.02-4.74 4.11-.31 2.19 3.15 2.88 3.64 4.23s.28 1.98-.2 2.83c-.5.85-1.96 1.62-2.8.68-.83-.95 1.67-2.75 2.98-3.25 1.3-.5 3.1-.4 3.69.25.58.64-.07 1.79-.03 1.79" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 439 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#74c7ec" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5q-3 0-3.75 3.33C5 4.73 5.88 4.31 6.87 4.58c.58.16.98.62 1.43 1.13.74.83 1.6 1.79 3.45 1.79q3 0 3.75-3.33c-.75 1.1-1.63 1.52-2.63 1.25-.57-.16-.97-.62-1.42-1.13C10.7 3.46 9.85 2.5 8 2.5m-3.75 6q-3 0-3.75 3.33c.75-1.1 1.63-1.52 2.63-1.25.57.16.97.62 1.42 1.13.74.83 1.6 1.79 3.45 1.79q3 0 3.75-3.33c-.75 1.1-1.63 1.52-2.62 1.25-.58-.16-.98-.62-1.43-1.13-.74-.83-1.6-1.79-3.45-1.79" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 566 B |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>
|
|
||||||
<g fill='none' stroke='#89b4fa' stroke-linecap='round' stroke-linejoin='round'>
|
|
||||||
<path d='M4 1.5h8A2.5 2.5 0 0114.5 4v8a2.5 2.5 0 01-2.5 2.5H4A2.5 2.5 0 011.5 12V4A2.5 2.5 0 014 1.5' />
|
|
||||||
<path d='M12.5 8.75c0-.69-.54-1.25-1.2-1.25h-.6c-.66 0-1.2.56-1.2 1.25S10.04 10 10.7 10h.6c.66 0 1.2.56 1.2 1.25s-.54 1.25-1.2 1.25h-.6c-.66 0-1.2-.56-1.2-1.25m-3-3.75v5M5 7.5h3' />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 475 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#cdd6f4" stroke-linecap="round" stroke-linejoin="round" d="M1.5 13.5h13L8 2z" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 199 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#cba6f7" stroke-linecap="round" stroke-linejoin="round" d="M10.5 11 3 4.5h-.5l-1 1V6l9 8.5 4-2v-9l-4-2v13m0-13L5.3 6.41M3.53 8.08 1.5 10v.5l.98 1.1.52-.1 2.17-1.88m1.91-1.66L10.5 5" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 303 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<path fill="none" stroke="#89b4fa" stroke-linecap="round" stroke-linejoin="round" d="M10.5 11 3 4.5h-.5l-1 1V6l9 8.5 4-2v-9l-4-2v13m0-13L5.3 6.41M3.53 8.08 1.5 10v.5l.98 1.1.52-.1 2.17-1.88m1.91-1.66L10.5 5" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 303 B |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<g fill="none" fill-rule="evenodd" stroke="#cba6f7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" stroke-width="6.22" transform="matrix(.1608 0 0 .16076 -.053 -.054)">
|
|
||||||
<path d="m 11.9,65.033 c 0,0 -1.241,-16.91 11.549,-24.936 0,0 -8.286,-12.228 0,-19.036 8.286,-6.808 12.645,-9.145 18.736,-8.634 0,0 7.247,-20.251 14.643,0 0,0 9.061,-7.776 7.844,17.247 -0.323,6.646 -4.717,16.289 -7.844,20.326 0,0 8.881,6.323 8.881,25.924 0,0 14.526,-7.698 18.663,-8.162 4.136,-0.463 7.724,-0.011 8.572,2.799 0.848,2.81 1.245,4.744 -1.062,6.558 -2.308,1.813 -10.589,4.258 -19.484,10.194 -8.894,5.936 -11.77,4.105 -14.208,5.576 -2.438,1.472 -16.058,7.342 -33.033,0.927 0,0 -15.323,4.247 -14.195,-6.503 0,0 -10.684,-12.422 0.938,-22.28 z" />
|
|
||||||
<path d="m 27.469,94.285 c -1.525,-1.407 0.321,-8.703 0.321,-8.703 0,0 -1.252,4.723 -3.116,7.525" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 952 B |
|
|
@ -1,31 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="16px" height="16px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<defs>
|
|
||||||
<linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
|
|
||||||
<stop stop-color="#420C5D" offset="0%"></stop>
|
|
||||||
<stop stop-color="#951AD1" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<path d="M25,29 C152.577777,29 256,131.974508 256,259 C256,386.025492 152.577777,489 25,489 L25,29 Z" id="path-2"></path>
|
|
||||||
<filter x="-18.2%" y="-7.4%" width="129.4%" height="114.8%" filterUnits="objectBoundingBox" id="filter-3">
|
|
||||||
<feOffset dx="-8" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
|
||||||
<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
|
||||||
<feColorMatrix values="0 0 0 0 0.250980392 0 0 0 0 0.250980392 0 0 0 0 0.250980392 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
<g id="tor-browser-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="icon_512x512">
|
|
||||||
<g id="Group">
|
|
||||||
<g id="tb_icon/Stable">
|
|
||||||
<g id="Stable">
|
|
||||||
<circle id="background" fill="#F2E4FF" fill-rule="nonzero" cx="256" cy="256" r="246"></circle>
|
|
||||||
<path d="M256.525143,465.439707 L256.525143,434.406609 C354.826191,434.122748 434.420802,354.364917 434.420802,255.992903 C434.420802,157.627987 354.826191,77.8701558 256.525143,77.5862948 L256.525143,46.5531962 C371.964296,46.8441537 465.446804,140.489882 465.446804,255.992903 C465.446804,371.503022 371.964296,465.155846 256.525143,465.439707 Z M256.525143,356.820314 C311.970283,356.529356 356.8487,311.516106 356.8487,255.992903 C356.8487,200.476798 311.970283,155.463547 256.525143,155.17259 L256.525143,124.146588 C329.115485,124.430449 387.881799,183.338693 387.881799,255.992903 C387.881799,328.654211 329.115485,387.562455 256.525143,387.846316 L256.525143,356.820314 Z M256.525143,201.718689 C286.266674,202.00255 310.3026,226.180407 310.3026,255.992903 C310.3026,285.812497 286.266674,309.990353 256.525143,310.274214 L256.525143,201.718689 Z M0,255.992903 C0,397.384044 114.60886,512 256,512 C397.384044,512 512,397.384044 512,255.992903 C512,114.60886 397.384044,0 256,0 C114.60886,0 0,114.60886 0,255.992903 Z" id="center" fill="url(#linearGradient-1)"></path>
|
|
||||||
<g id="half" transform="translate(140.500000, 259.000000) scale(-1, 1) translate(-140.500000, -259.000000) ">
|
|
||||||
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
|
|
||||||
<use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB |
|
|
@ -1,32 +0,0 @@
|
||||||
import { useEffect, useRef } from 'react'
|
|
||||||
import './style.css'
|
|
||||||
|
|
||||||
export default function Background () {
|
|
||||||
const domRef = useRef(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const inter = setInterval(() => {
|
|
||||||
if (document.hasFocus() && domRef.current) {
|
|
||||||
// @ts-expect-error
|
|
||||||
domRef.current.style.filter = 'blur(10px)'
|
|
||||||
} else {
|
|
||||||
// @ts-ignore
|
|
||||||
domRef.current.style.filter = ''
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
clearInterval(inter)
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ filter: 'blur(10px)' }} ref={domRef}>
|
|
||||||
<ul className='max-h-screen background'>
|
|
||||||
{new Array(49).join('.').split('.').map((_, i) => {
|
|
||||||
return <li key={i} className={i % 2 === 0 ? 'bg-effect' : ''} />
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
427
src/bg/style.css
427
src/bg/style.css
|
|
@ -1,427 +0,0 @@
|
||||||
@keyframes animate {
|
|
||||||
0%{
|
|
||||||
transform: translateY(0) rotate(0deg);
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
transform: translateY(-1000px) rotate(720deg);
|
|
||||||
opacity: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes animate-inverse {
|
|
||||||
0%{
|
|
||||||
transform: translateY(0) rotate(720deg);
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
transform: translateY(-1000px) rotate(0deg);
|
|
||||||
opacity: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bg-effect {
|
|
||||||
/* transform: scale3d(100.1, 1, 100.1); */
|
|
||||||
animation: animate 20s linear infinite;
|
|
||||||
}
|
|
||||||
.background {
|
|
||||||
position: fixed;
|
|
||||||
width: 100vw;
|
|
||||||
height: 120vh;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
/* @apply bg-base-300; */
|
|
||||||
/* @apply bg-gradient-to-b from-ctp-mantle to-ctp-crust; */
|
|
||||||
/* BG CURNHBF */
|
|
||||||
/* background: linear-gradient( var(--mantle), var(--crust)); */
|
|
||||||
/* backdrop-filter: blur(10px); */
|
|
||||||
/* background: linear-gradient(300deg,#222,var(--crust)); */
|
|
||||||
/* background-size: 180% 180%; */
|
|
||||||
/* animation: gradient-animation 18s ease infinite; */
|
|
||||||
}
|
|
||||||
html,body {
|
|
||||||
background: linear-gradient(300deg,#222,var(--crust));
|
|
||||||
background-size: 180% 180%;
|
|
||||||
animation: gradient-animation 18s ease infinite;
|
|
||||||
}
|
|
||||||
@keyframes gradient-animation {
|
|
||||||
0% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 100% 50%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.background li {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
list-style: none;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
/* background: rgba(255, 255, 255, 0.1); */
|
|
||||||
background: rgba(203, 166, 247, 0.15);
|
|
||||||
animation: animate 24s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.background li:nth-child(0) {
|
|
||||||
left: 12%;
|
|
||||||
width: 85px;
|
|
||||||
height: 85px;
|
|
||||||
bottom: -85px;
|
|
||||||
animation-delay: 1s;
|
|
||||||
background: var(--zeon-bonus-color-lighter) !important;
|
|
||||||
}
|
|
||||||
.background li:nth-child(1) {
|
|
||||||
left: 49%;
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
bottom: -34px;
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(2) {
|
|
||||||
left: 61%;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
bottom: -30px;
|
|
||||||
animation-delay: 9s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(3) {
|
|
||||||
left: 54%;
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
bottom: -96px;
|
|
||||||
animation-delay: 8s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(4) {
|
|
||||||
left: 3%;
|
|
||||||
width: 57px;
|
|
||||||
height: 57px;
|
|
||||||
bottom: -57px;
|
|
||||||
animation-delay: 12s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(5) {
|
|
||||||
left: 8%;
|
|
||||||
width: 45px;
|
|
||||||
height: 45px;
|
|
||||||
bottom: -45px;
|
|
||||||
animation-delay: 23s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(6) {
|
|
||||||
left: 3%;
|
|
||||||
width: 82px;
|
|
||||||
height: 82px;
|
|
||||||
bottom: -82px;
|
|
||||||
animation-delay: 5s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(7) {
|
|
||||||
left: 63%;
|
|
||||||
width: 87px;
|
|
||||||
height: 87px;
|
|
||||||
bottom: -87px;
|
|
||||||
animation-delay: 10s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(8) {
|
|
||||||
left: 86%;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
bottom: -30px;
|
|
||||||
animation-delay: 14s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(9) {
|
|
||||||
left: 23%;
|
|
||||||
width: 56px;
|
|
||||||
height: 56px;
|
|
||||||
bottom: -56px;
|
|
||||||
animation-delay: 17s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(10) {
|
|
||||||
left: 16%;
|
|
||||||
width: 97px;
|
|
||||||
height: 97px;
|
|
||||||
bottom: -97px;
|
|
||||||
animation-delay: 31s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(11) {
|
|
||||||
left: 43%;
|
|
||||||
width: 82px;
|
|
||||||
height: 82px;
|
|
||||||
bottom: -82px;
|
|
||||||
animation-delay: 21s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(12) {
|
|
||||||
left: 74%;
|
|
||||||
width: 31px;
|
|
||||||
height: 31px;
|
|
||||||
bottom: -31px;
|
|
||||||
animation-delay: 35s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(13) {
|
|
||||||
left: 19%;
|
|
||||||
width: 97px;
|
|
||||||
height: 97px;
|
|
||||||
bottom: -97px;
|
|
||||||
animation-delay: 57s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(14) {
|
|
||||||
left: 48%;
|
|
||||||
width: 21px;
|
|
||||||
height: 21px;
|
|
||||||
bottom: -21px;
|
|
||||||
animation-delay: 65s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(15) {
|
|
||||||
left: 34%;
|
|
||||||
width: 69px;
|
|
||||||
height: 69px;
|
|
||||||
bottom: -69px;
|
|
||||||
animation-delay: 18s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(16) {
|
|
||||||
left: 74%;
|
|
||||||
width: 31px;
|
|
||||||
height: 31px;
|
|
||||||
bottom: -31px;
|
|
||||||
animation-delay: 68s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(17) {
|
|
||||||
left: 13%;
|
|
||||||
width: 41px;
|
|
||||||
height: 41px;
|
|
||||||
bottom: -41px;
|
|
||||||
animation-delay: 81s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(18) {
|
|
||||||
left: 30%;
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
bottom: -64px;
|
|
||||||
animation-delay: 27s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(19) {
|
|
||||||
left: 56%;
|
|
||||||
width: 59px;
|
|
||||||
height: 59px;
|
|
||||||
bottom: -59px;
|
|
||||||
animation-delay: 79s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(20) {
|
|
||||||
left: 0%;
|
|
||||||
width: 53px;
|
|
||||||
height: 53px;
|
|
||||||
bottom: -53px;
|
|
||||||
animation-delay: 55s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(21) {
|
|
||||||
left: 30%;
|
|
||||||
width: 82px;
|
|
||||||
height: 82px;
|
|
||||||
bottom: -82px;
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(22) {
|
|
||||||
left: 25%;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
bottom: -2px;
|
|
||||||
animation-delay: 15s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(23) {
|
|
||||||
left: 11%;
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
bottom: -34px;
|
|
||||||
animation-delay: 88s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(24) {
|
|
||||||
left: 88%;
|
|
||||||
width: 88px;
|
|
||||||
height: 88px;
|
|
||||||
bottom: -88px;
|
|
||||||
animation-delay: 113s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(25) {
|
|
||||||
left: 42%;
|
|
||||||
width: 61px;
|
|
||||||
height: 61px;
|
|
||||||
bottom: -61px;
|
|
||||||
animation-delay: 24s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(26) {
|
|
||||||
left: 48%;
|
|
||||||
width: 98px;
|
|
||||||
height: 98px;
|
|
||||||
bottom: -98px;
|
|
||||||
animation-delay: 14s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(27) {
|
|
||||||
left: 81%;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
bottom: -20px;
|
|
||||||
animation-delay: 4s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(28) {
|
|
||||||
left: 36%;
|
|
||||||
width: 68px;
|
|
||||||
height: 68px;
|
|
||||||
bottom: -68px;
|
|
||||||
animation-delay: 31s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(29) {
|
|
||||||
left: 80%;
|
|
||||||
width: 81px;
|
|
||||||
height: 81px;
|
|
||||||
bottom: -81px;
|
|
||||||
animation-delay: 72s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(30) {
|
|
||||||
left: 86%;
|
|
||||||
width: 78px;
|
|
||||||
height: 78px;
|
|
||||||
bottom: -78px;
|
|
||||||
animation-delay: 114s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(31) {
|
|
||||||
left: 31%;
|
|
||||||
width: 68px;
|
|
||||||
height: 68px;
|
|
||||||
bottom: -68px;
|
|
||||||
animation-delay: 141s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(32) {
|
|
||||||
left: 24%;
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
bottom: -15px;
|
|
||||||
animation-delay: 129s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(33) {
|
|
||||||
left: 60%;
|
|
||||||
width: 98px;
|
|
||||||
height: 98px;
|
|
||||||
bottom: -98px;
|
|
||||||
animation-delay: 101s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(34) {
|
|
||||||
left: 71%;
|
|
||||||
width: 19px;
|
|
||||||
height: 19px;
|
|
||||||
bottom: -19px;
|
|
||||||
animation-delay: 78s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(35) {
|
|
||||||
left: 31%;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
bottom: -32px;
|
|
||||||
animation-delay: 23s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(36) {
|
|
||||||
left: 7%;
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
bottom: -70px;
|
|
||||||
animation-delay: 169s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(37) {
|
|
||||||
left: 3%;
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
bottom: -26px;
|
|
||||||
animation-delay: 98s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(38) {
|
|
||||||
left: 4%;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
bottom: -50px;
|
|
||||||
animation-delay: 124s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(39) {
|
|
||||||
left: 34%;
|
|
||||||
width: 51px;
|
|
||||||
height: 51px;
|
|
||||||
bottom: -51px;
|
|
||||||
animation-delay: 30s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(40) {
|
|
||||||
left: 61%;
|
|
||||||
width: 59px;
|
|
||||||
height: 59px;
|
|
||||||
bottom: -59px;
|
|
||||||
animation-delay: 49s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(41) {
|
|
||||||
left: 78%;
|
|
||||||
width: 45px;
|
|
||||||
height: 45px;
|
|
||||||
bottom: -45px;
|
|
||||||
animation-delay: 184s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(42) {
|
|
||||||
left: 25%;
|
|
||||||
width: 58px;
|
|
||||||
height: 58px;
|
|
||||||
bottom: -58px;
|
|
||||||
animation-delay: 152s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(43) {
|
|
||||||
left: 20%;
|
|
||||||
width: 76px;
|
|
||||||
height: 76px;
|
|
||||||
bottom: -76px;
|
|
||||||
animation-delay: 157s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(44) {
|
|
||||||
left: 44%;
|
|
||||||
width: 59px;
|
|
||||||
height: 59px;
|
|
||||||
bottom: -59px;
|
|
||||||
animation-delay: 5s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(45) {
|
|
||||||
left: 36%;
|
|
||||||
width: 88px;
|
|
||||||
height: 88px;
|
|
||||||
bottom: -88px;
|
|
||||||
animation-delay: 217s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(46) {
|
|
||||||
left: 78%;
|
|
||||||
width: 43px;
|
|
||||||
height: 43px;
|
|
||||||
bottom: -43px;
|
|
||||||
animation-delay: 185s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(47) {
|
|
||||||
left: 59%;
|
|
||||||
width: 58px;
|
|
||||||
height: 58px;
|
|
||||||
bottom: -58px;
|
|
||||||
animation-delay: 91s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(48) {
|
|
||||||
left: 87%;
|
|
||||||
width: 73px;
|
|
||||||
height: 73px;
|
|
||||||
bottom: -73px;
|
|
||||||
animation-delay: 226s;
|
|
||||||
}
|
|
||||||
.background li:nth-child(49) {
|
|
||||||
left: 43%;
|
|
||||||
width: 79px;
|
|
||||||
height: 79px;
|
|
||||||
bottom: -79px;
|
|
||||||
animation-delay: 84s;
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import './skillset.css'
|
|
||||||
export default function GithubStats () {
|
|
||||||
return <div className='text-center items-center'>
|
|
||||||
<h1 className='project-heading font-bold text-2xl' style={{ paddingBottom: '20px' }}>
|
|
||||||
Days I <strong className='text-highlight'>Code</strong>
|
|
||||||
</h1>
|
|
||||||
{/* <GitHubCalendar
|
|
||||||
username={config.github_username}
|
|
||||||
blockSize={15}
|
|
||||||
blockMargin={5}
|
|
||||||
color="#c084f5"
|
|
||||||
fontSize={16}
|
|
||||||
/> */}
|
|
||||||
{/* svg from git, updated every 3 hours */}
|
|
||||||
<img src='https://raw.githubusercontent.com/NeonGamerBot-QK/NeonGamerBot-QK/output/github-contribution-grid-snake.svg' className='ms-auto me-auto'/>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
@ -1,288 +0,0 @@
|
||||||
import { json } from "stream/consumers";
|
|
||||||
import Icon from "../static/Icons";
|
|
||||||
import MIcon from "@mdi/react";
|
|
||||||
import {
|
|
||||||
bash,
|
|
||||||
bun,
|
|
||||||
coffeescript,
|
|
||||||
cpp,
|
|
||||||
csharp,
|
|
||||||
docker,
|
|
||||||
graphql,
|
|
||||||
html,
|
|
||||||
javascriptReact,
|
|
||||||
next,
|
|
||||||
npm,
|
|
||||||
prisma,
|
|
||||||
puppeteer,
|
|
||||||
python,
|
|
||||||
sass,
|
|
||||||
tailwind,
|
|
||||||
yarn,
|
|
||||||
ejs,
|
|
||||||
pnpm,
|
|
||||||
vscode,
|
|
||||||
git,
|
|
||||||
figma,
|
|
||||||
robots,
|
|
||||||
vercel,
|
|
||||||
visualStudio,
|
|
||||||
} from "../static/icons_list";
|
|
||||||
import "./skillset.css";
|
|
||||||
import { SiKalilinux, SiPostman } from "react-icons/si";
|
|
||||||
import { mdiArch, mdiConsole, mdiLinux, mdiUbuntu } from "@mdi/js";
|
|
||||||
export function SkillSet() {
|
|
||||||
return (
|
|
||||||
<div className="items-center text-center place-items-center">
|
|
||||||
<h1 className="project-heading">
|
|
||||||
Professional <strong className="texthighlight">Skillset </strong>
|
|
||||||
</h1>
|
|
||||||
<div className="flex inline-flex grid ">
|
|
||||||
<div
|
|
||||||
style={{}}
|
|
||||||
className="flex-1 max-w-5xl text-center min-w-sm ms-auto me-auto"
|
|
||||||
>
|
|
||||||
<div className="inline-flex">
|
|
||||||
<a
|
|
||||||
href="https://www.w3schools.com/w3css/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon="css" className="w-40" width={2000} height={2000} />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.w3schools.com/js/DEFAULT.asp"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon="javascript" className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.typescriptlang.org/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon="typescript" className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://nextjs.org/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={next} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.npmjs.com/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={npm} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.prisma.io/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={prisma} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://pptr.dev/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={puppeteer} className="w-40" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex">
|
|
||||||
<a
|
|
||||||
href="https://sass-lang.com/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={sass} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://tailwindcss.com/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={tailwind} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<div className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={bash} className="w-40" />
|
|
||||||
</div>
|
|
||||||
<a href="https://bun.sh/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={bun} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://cplusplus.com/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={cpp} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.docker.com/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={docker} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://graphql.org/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={graphql} className="w-40" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex">
|
|
||||||
<a
|
|
||||||
href="https://www.w3schools.com/html/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={html} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://react.dev/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={javascriptReact} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.python.org/"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={python} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://dotnet.microsoft.com/en-us/languages/csharp"
|
|
||||||
className={"tech-icons inline-flex"}
|
|
||||||
>
|
|
||||||
<Icon icon={csharp} className="w-40" />
|
|
||||||
</a>
|
|
||||||
{/* for the sake of css coffeescript is out! */}
|
|
||||||
{/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */}
|
|
||||||
<a href="https://yarnpkg.com/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={yarn} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://ejs.co/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={ejs} className="w-40" />
|
|
||||||
</a>
|
|
||||||
<a href="https://pnpm.io/" className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={pnpm} className="w-40" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{/*
|
|
||||||
|
|
||||||
*/}
|
|
||||||
</div>
|
|
||||||
{/* <br />
|
|
||||||
<div style={{ justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'>
|
|
||||||
<div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
export function TechStack() {
|
|
||||||
return (
|
|
||||||
<div className="items-center text-center place-items-center">
|
|
||||||
<h1 className="project-heading">
|
|
||||||
<strong className="text-highlight">Tools</strong> I use
|
|
||||||
</h1>
|
|
||||||
<div className="flex inline-flex grid">
|
|
||||||
<div
|
|
||||||
style={{}}
|
|
||||||
className="content-center flex-1 max-w-5xl ms-auto me-auto min-w-sm"
|
|
||||||
>
|
|
||||||
<div className="inline-flex max-w-5xl min-w-sm">
|
|
||||||
<div className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={vscode} className="w-40" width={2000} height={2000} />
|
|
||||||
</div>
|
|
||||||
<div className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={git} className="w-40" width={2000} height={2000} />
|
|
||||||
</div>
|
|
||||||
<div className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={docker} className="w-40" width={2000} height={2000} />
|
|
||||||
</div>
|
|
||||||
<div className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={figma} className="w-40" width={2000} height={2000} />
|
|
||||||
</div>
|
|
||||||
<div className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={robots} className="w-40" width={2000} height={2000} />
|
|
||||||
</div>
|
|
||||||
<div className={"tech-icons inline-flex"}>
|
|
||||||
<Icon icon={vercel} className="w-40" width={2000} height={2000} />
|
|
||||||
</div>
|
|
||||||
<div className={"tech-icons inline-flex"}>
|
|
||||||
<Icon
|
|
||||||
icon={visualStudio}
|
|
||||||
className="w-40"
|
|
||||||
width={2000}
|
|
||||||
height={2000}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/* <div className={"tech-icons inline-flex"}><Icon icon=' className='w-40' /></div> */}
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
<div className="inline-flex">
|
|
||||||
{/* <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-40' width={2000} height={2000}/></div> */}
|
|
||||||
<div
|
|
||||||
className={"tech-icons inline-flex mauve"}
|
|
||||||
style={{ color: "var(--mauve)" }}
|
|
||||||
>
|
|
||||||
<MIcon
|
|
||||||
path={mdiLinux}
|
|
||||||
size={2}
|
|
||||||
className="m-0 md:m-5 lg:w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={"tech-icons inline-flex mauve"}
|
|
||||||
style={{ color: "var(--mauve)" }}
|
|
||||||
>
|
|
||||||
<MIcon
|
|
||||||
path={mdiConsole}
|
|
||||||
size={2}
|
|
||||||
className="m-0 md:m-5 lg:w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={"tech-icons inline-flex mauve"}
|
|
||||||
style={{ color: "var(--mauve)" }}
|
|
||||||
>
|
|
||||||
<MIcon
|
|
||||||
path={mdiUbuntu}
|
|
||||||
size={2}
|
|
||||||
className="m-0 md:m-5 lg:w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={"tech-icons inline-flex mauve"}
|
|
||||||
style={{ color: "var(--mauve)" }}
|
|
||||||
>
|
|
||||||
<MIcon path={mdiArch} size={2} className="m-0 md:m-5 lg:w-full" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={"tech-icons inline-flex mauve"}
|
|
||||||
style={{ color: "var(--mauve)" }}
|
|
||||||
>
|
|
||||||
<SiPostman />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={"tech-icons inline-flex mauve"}
|
|
||||||
style={{ color: "var(--mauve)" }}
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
<SiKalilinux />
|
|
||||||
</div>
|
|
||||||
{/* <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiKaliLinux} size={2} className='w-full m-5' /></div> */}
|
|
||||||
</div>
|
|
||||||
{/* <div className='inline-flex'>
|
|
||||||
<div className={"tech-icons inline-flex"}><Icon icon={html} className='w-40' /></div>
|
|
||||||
<div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-40' /></div>
|
|
||||||
<div className={"tech-icons inline-flex"}><Icon icon={python} className='w-40' /></div>
|
|
||||||
<div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-40' /></div> */}
|
|
||||||
{/* for the sake of css coffeescript is out! */}
|
|
||||||
{/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */}
|
|
||||||
{/* <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-40' /></div>
|
|
||||||
<div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-40' /></div>
|
|
||||||
<div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-40' /></div>
|
|
||||||
</div> */}
|
|
||||||
{/*
|
|
||||||
|
|
||||||
*/}
|
|
||||||
</div>
|
|
||||||
{/* <br />
|
|
||||||
<div style={{ justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'>
|
|
||||||
<div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
export default function () {
|
|
||||||
return (
|
|
||||||
<div className="-mt-20">
|
|
||||||
<SkillSet />
|
|
||||||
<TechStack />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
import { mdiBullet } from "@mdi/js";
|
|
||||||
import Icon from "@mdi/react";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
export default function AboutPage() {
|
|
||||||
const [currentGrade, setCurrentGrade] = useState<string>("0th");
|
|
||||||
useEffect(() => {
|
|
||||||
let year: number = new Date().getFullYear();
|
|
||||||
if (year > 2027) {
|
|
||||||
let result = year - 2027;
|
|
||||||
switch (result) {
|
|
||||||
case 0:
|
|
||||||
setCurrentGrade(`12th`);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
setCurrentGrade(`Collage Student`);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setCurrentGrade(`${Math.abs(2027 - 2024 - 13)}th`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return (
|
|
||||||
<div className={"hero min-h-screen md:ml-0 ml-2"}>
|
|
||||||
<div className="container">
|
|
||||||
<h1 className="text-3xl font-bold">
|
|
||||||
Some info about <span className="text-highlight">me</span>
|
|
||||||
</h1>
|
|
||||||
<div>
|
|
||||||
<blockquote className="mb-0 blockquote">
|
|
||||||
<p style={{ textAlign: "justify" }}>
|
|
||||||
Hi Everyone, I am{" "}
|
|
||||||
<span className="text-highlight ">Saahil dutta, </span>
|
|
||||||
from <span className="text-highlight "> USA </span>
|
|
||||||
<br />I am a {currentGrade} grader in KCD.
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
Apart from coding, some other activities that I love to do!
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li className="about-activity">
|
|
||||||
<Icon path={mdiBullet} className="inline-block" size={1} />{" "}
|
|
||||||
Playing Games
|
|
||||||
</li>
|
|
||||||
<li className="about-activity">
|
|
||||||
<Icon path={mdiBullet} className="inline-block" size={1} />{" "}
|
|
||||||
Eating different types of food
|
|
||||||
</li>
|
|
||||||
{/* <li className="about-activity">
|
|
||||||
<ImPointRight className="inline-block"/> Traveling
|
|
||||||
</li> */}
|
|
||||||
<li className="about-activity">
|
|
||||||
<Icon path={mdiBullet} className="inline-block" size={1} />{" "}
|
|
||||||
Swimming
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<blockquote
|
|
||||||
className="ml-10 text-xl italic font-semibold text-gray-900 dark:text-white"
|
|
||||||
style={{ color: "var(--text)" }}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-8 h-8 mb-4 text-gray-400 dark:text-gray-600"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 18 14"
|
|
||||||
>
|
|
||||||
<path d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z" />
|
|
||||||
</svg>
|
|
||||||
<p className="ml-5 duration-700 ease-linear hover:text-fuchsia-600 text-fuchsia-500 first-letter:font-2xl">
|
|
||||||
"It has become appallingly obvious that our technology has
|
|
||||||
exceeded our humanity."{" "}
|
|
||||||
</p>
|
|
||||||
<footer
|
|
||||||
className="ml-8 blockquote-footer "
|
|
||||||
style={{ color: "var(--subtext0)" }}
|
|
||||||
>
|
|
||||||
- Albert Einstein
|
|
||||||
</footer>
|
|
||||||
</blockquote>
|
|
||||||
</blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
.tech-icons {
|
|
||||||
font-size: 4.5em !important;
|
|
||||||
margin: 15px !important;
|
|
||||||
padding: 10px !important;
|
|
||||||
opacity: 0.93 !important;
|
|
||||||
/* rgba(200, 137, 230, 0.637) */
|
|
||||||
border: 1.7px solid rgba(203, 166, 247, 0.637) !important;
|
|
||||||
vertical-align: middle !important;
|
|
||||||
text-align: center !important;
|
|
||||||
border-radius: 5px !important;
|
|
||||||
display: table !important;
|
|
||||||
/* rgba(89, 4, 168, 0.137) */
|
|
||||||
box-shadow: 4px 5px 4px 3px rgba(49, 50, 68, 0.137) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
transition: all 0.4s ease 0s !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.tech-icons {
|
|
||||||
margin: 5px !important;
|
|
||||||
padding: 5px !important;
|
|
||||||
font-size: 2.5em !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-icons:hover {
|
|
||||||
transform: scale(1.05) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
/* rgba(197, 115, 230, 0.883) */
|
|
||||||
border: 2.2px solid rgba(203, 166, 247, 0.883) !important;
|
|
||||||
}
|
|
||||||
.tech-icon-images {
|
|
||||||
padding: 20px !important;
|
|
||||||
line-height: 1.6 !important;
|
|
||||||
}
|
|
||||||
.project-heading {
|
|
||||||
color: var(--text) !important;
|
|
||||||
font-size: 2.3em !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
padding-top: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
@ -1,100 +0,0 @@
|
||||||
import { useState } from "react"
|
|
||||||
|
|
||||||
const isDev = process.env.NODE_ENV !== 'production'
|
|
||||||
export default function ContactPage({ analytics }: any) {
|
|
||||||
const [done, setDone] = useState(false)
|
|
||||||
const [error, setError] = useState<string | null>(null)
|
|
||||||
const [email, setEmail] = useState("")
|
|
||||||
const [message, setMessage] = useState("")
|
|
||||||
const [nameOfPerson, setName] = useState("")
|
|
||||||
const onSubmit = (e: any) => {
|
|
||||||
analytics.contactPage(email)
|
|
||||||
if(isDev) {
|
|
||||||
// dev mode dosent have php backend so i have to run it do ABSOULTLEY NOTHING!
|
|
||||||
// just pretend it works
|
|
||||||
console.log(`
|
|
||||||
To: ${nameOfPerson} (${email})
|
|
||||||
${message}
|
|
||||||
`)
|
|
||||||
if(Math.random() > .5) {
|
|
||||||
setDone(true)
|
|
||||||
} else {
|
|
||||||
setError(`Math.random was NOT higher then .5`)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const form = new FormData(e.target)
|
|
||||||
fetch('/contact_form.php', {
|
|
||||||
body: form,
|
|
||||||
method: "POST"
|
|
||||||
}).then(e => {
|
|
||||||
return e.text()
|
|
||||||
}).then(text => {
|
|
||||||
if(text == "OK") {
|
|
||||||
setDone (true)
|
|
||||||
} else {
|
|
||||||
setError (text as string)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
const ui = (f: any) => (e: any) => f(e.target.value)
|
|
||||||
return <div className="min-h-screen hero ">
|
|
||||||
<div className="text-center" >
|
|
||||||
<div className="max-w-md" >
|
|
||||||
<h1 className="mt-10 text-5xl font-bold text-highlight" >Contact Form</h1>
|
|
||||||
{/* <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p> */}
|
|
||||||
{(error || done) ? <FormResults error={error} email={email} done={done} /> : <ContactForm onSubmit={onSubmit}
|
|
||||||
email={email} uiE={ui(setEmail)}
|
|
||||||
message={message} uiM={ui(setMessage)}
|
|
||||||
nameOfPerson={nameOfPerson} uiN={ui(setName)}
|
|
||||||
|
|
||||||
/>}
|
|
||||||
{/* <button className="btn btn-primary">Get Started</button> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
export function FormResults({ error, email, done } : {
|
|
||||||
error: string | null,
|
|
||||||
email: string,
|
|
||||||
done: Boolean
|
|
||||||
}) {
|
|
||||||
if(done) return <div>
|
|
||||||
<p> Thank you for your message! you will eventually recive a response at {email}</p>
|
|
||||||
</div>
|
|
||||||
if(error) {
|
|
||||||
return <p style={{ color: "var(--red)"}} className="font-bold">{error}</p>
|
|
||||||
}
|
|
||||||
return <p>idk</p>
|
|
||||||
}
|
|
||||||
export function ContactForm({ onSubmit,
|
|
||||||
nameOfPerson, message, email,
|
|
||||||
uiE,uiN,uiM
|
|
||||||
}: any) {
|
|
||||||
return <form onSubmit={onSubmit} className="mt-5" style={{ zIndex: 5 }}>
|
|
||||||
<label className="flex items-center mb-2 input input-bordered">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="var(--mauve)" className="w-4 h-4 opacity-70"><path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" /><path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" /></svg>
|
|
||||||
<input style={{ zIndex: 5 }} required type="email" className="grow" placeholder="Email" value={email} onChange={uiE} />
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center mb-2 input input-bordered">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="var(--mauve)" className="w-4 h-4 opacity-70"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" /></svg>
|
|
||||||
<input style={{ zIndex: 5 }} required type="text" className="grow" placeholder="Name" value={nameOfPerson} onChange={uiN} />
|
|
||||||
</label>
|
|
||||||
<label className="form-control">
|
|
||||||
<div className="label">
|
|
||||||
<span className="label-text">Message</span>
|
|
||||||
</div>
|
|
||||||
<textarea required value={message} onChange={uiM} className="h-24 textarea textarea-bordered" placeholder="Hi there neon..." style={{ borderColor: "var(--mauve)", zIndex: 5 }}></textarea>
|
|
||||||
<div className="label">
|
|
||||||
{/* <span className="label-text-alt">Your bio</span>
|
|
||||||
<span className="label-text-alt">Alt label</span> */}
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<div style={{ zIndex: 5, overflow: "hidden" }}>
|
|
||||||
<button type="submit" className="btn mauve" style={{ background: "var(--surface0)", zIndex: 5 }}>Submit</button>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
</form>
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
export default function Route({ path, component, index }:{
|
|
||||||
path: string,
|
|
||||||
component: any,
|
|
||||||
index?: Boolean,
|
|
||||||
}) {
|
|
||||||
|
|
||||||
return <></>;
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
// writing my own hashRouter
|
|
||||||
|
|
||||||
import { useEffect, useState } from "react"
|
|
||||||
|
|
||||||
export function HashRouter({ children }: any) {
|
|
||||||
const [hash, setHash] = useState(window.location.hash)
|
|
||||||
if(process.env.NODE_ENV !== "production") console.log(children)
|
|
||||||
if(!Array.isArray(children)) children = [children]
|
|
||||||
useEffect(() => {
|
|
||||||
const ev = () => {
|
|
||||||
setHash(window.location.hash)
|
|
||||||
}
|
|
||||||
window.addEventListener('hashchange', ev)
|
|
||||||
return () => window.removeEventListener('hashchange', ev)
|
|
||||||
})
|
|
||||||
// debugger;
|
|
||||||
const child = children.find((child:any) => {
|
|
||||||
if(process.env.NODE_ENV !== "production") console.log('script', child.props, window.location.hash, child.props.route == hash, (hash.length < 2 && child.props.index))
|
|
||||||
return child.props.path == hash || (hash.length < 2 && child.props.index) || child.props.path == "*"
|
|
||||||
})
|
|
||||||
if(child) return child.props.component;
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
export * from "./Route"
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
import React, { useEffect, useState } from "react"
|
|
||||||
import "./style.css"
|
|
||||||
import { LuGitFork, LuGlobe } from "react-icons/lu"
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param param0
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function Card({ title, description, image,alt, Badges, svn_link, is_fork} : {
|
|
||||||
title: string ,
|
|
||||||
description: string,
|
|
||||||
image?: string,
|
|
||||||
alt?: string,
|
|
||||||
Badges?: any,
|
|
||||||
svn_link: string,
|
|
||||||
is_fork: Boolean
|
|
||||||
}) {
|
|
||||||
return <div style={{ background: "var(--surface0)"}}className="shadow-xl card md:w-80">
|
|
||||||
{image ?
|
|
||||||
<figure><img src={image} alt={alt || "No Alt"} /></figure>: null}
|
|
||||||
<div className="card-body">
|
|
||||||
<h2 className="text-center card-title text-highlight">{is_fork ? <LuGitFork /> : null}
|
|
||||||
<a href={svn_link}>{title}</a>
|
|
||||||
{/* <div className="badge badge-secondary">NEW</div> */}
|
|
||||||
</h2>
|
|
||||||
<p>{description}</p>
|
|
||||||
<div className="justify-end card-actions">
|
|
||||||
{/* <div className="badge badge-outline">Fashion</div>
|
|
||||||
<div className="badge badge-outline">Products</div> */}
|
|
||||||
{Badges ? Badges : ""}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
// oh boy i cannot WAIT for myself to add projects in via git
|
|
||||||
export default function Projects() {
|
|
||||||
// most projects should be loaded via github
|
|
||||||
// otherwise they will all be concacted with the github.json file
|
|
||||||
const [githubData, setGithubData] = useState ([])
|
|
||||||
const [translateY, setTranslateY] = useState(0)
|
|
||||||
|
|
||||||
const fetchData = () => {
|
|
||||||
return Promise.all([fetch(`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100`)
|
|
||||||
.then((response) => response.json()),fetch(`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100?page=2`)
|
|
||||||
.then((response) => response.json())])
|
|
||||||
|
|
||||||
.then((data) =>
|
|
||||||
{
|
|
||||||
if(process.env.NODE_ENV !== "production") console.log(data[0], data[1])
|
|
||||||
const idsThatAreFound:any = {}
|
|
||||||
const items = [...data[0], ...data[1]]
|
|
||||||
.filter(e => e.topics.includes('github-include-on-site'))
|
|
||||||
.filter(function(item, pos, self) {
|
|
||||||
if(idsThatAreFound[item.id]) return false;
|
|
||||||
idsThatAreFound[item.id] = true
|
|
||||||
return true;
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log()
|
|
||||||
if(process.env.NODE_ENV !== "production") console.log(items)
|
|
||||||
//@ts-ignore
|
|
||||||
setGithubData(items)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
useEffect (() => {
|
|
||||||
fetchData()
|
|
||||||
}, [])
|
|
||||||
return <>
|
|
||||||
<div className="min-h-screen hero">
|
|
||||||
<div className="flex-col text-center duration-1000 hero-content lg:flex-row" style={{ transform: `translateY(${translateY}%)`}}>
|
|
||||||
{/* <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg" className="max-w-sm rounded-lg shadow-2xl" /> */}
|
|
||||||
<div>
|
|
||||||
<h1 className="text-5xl font-bold text-highlight lg:mt-20">Projects</h1>
|
|
||||||
{/* <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
|
|
||||||
<button className="btn btn-primary">Get Started</button> */}
|
|
||||||
<div className="flex grid grid-cols-2 gap-2 mt-5 text-center duration-1000 md:gap-6" style={{ transform: `translateY(${-translateY}%)` }}>
|
|
||||||
{githubData.length > 0 ? githubData.map((d: any) => {
|
|
||||||
return <Card title={d.name} description={d.description} key={d.id} svn_link={d.html_url} is_fork={d.fork}Badges={<>
|
|
||||||
<div className="inline-flex">
|
|
||||||
|
|
||||||
<a target="_blank" href={d.html_url + '/fork'} style={{ background: "var(--mantle)", borderRadius: "50%" }} className="rounded-full btn btn-change mauve"><LuGitFork /></a>
|
|
||||||
{d.homepage ?
|
|
||||||
<a target="_blank" href={d.homepage} style={{ background: "var(--mantle)", borderRadius: "50%" }} className="rounded-full btn btn-change mauve"><LuGlobe /></a>
|
|
||||||
: null}
|
|
||||||
</div>
|
|
||||||
<div className="hidden grid-cols-3 max-w-60 lg:inline-flex" >
|
|
||||||
{d.topics.filter((e:string) => !e.includes('github-include-on-site')).map((topic:string,i:number) => {
|
|
||||||
return <div className="truncate badge badge-outline" key={i}><span className="truncate">{topic}</span></div>
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</>}/>
|
|
||||||
|
|
||||||
}) : <div>
|
|
||||||
<span className="loading loading-bars loading-lg mauve font-5xl"></span>
|
|
||||||
</div>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
.cool-up-animation {
|
|
||||||
animation: up 1.5s ease-in-out .1s 1;
|
|
||||||
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
|
|
||||||
}
|
|
||||||
@keyframes up {
|
|
||||||
0% {
|
|
||||||
transform: translateY(20%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateY(-80%);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
.orange {
|
|
||||||
color: var(--maroon);
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,67 +0,0 @@
|
||||||
@keyframes float {
|
|
||||||
0% {
|
|
||||||
/* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
|
|
||||||
transform: translatey(0px);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
/* box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); */
|
|
||||||
transform: translatey(-20px);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
/* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
|
|
||||||
transform: translatey(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.avatar {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
box-sizing: border-box; /* Not needed */
|
|
||||||
/*
|
|
||||||
border: 5px white solid;
|
|
||||||
border-radius: 50%;
|
|
||||||
*/
|
|
||||||
background: transparent;
|
|
||||||
overflow: hidden;
|
|
||||||
/* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
|
|
||||||
transform: translatey(0px);
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.avatar img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.wave {
|
|
||||||
animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
|
|
||||||
animation-duration: 2.5s; /* Change to speed up or slow down */
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes wave-animation {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
10% {
|
|
||||||
transform: rotate(14deg);
|
|
||||||
} /* The following five values can be played with to make the waving more or less extreme */
|
|
||||||
20% {
|
|
||||||
transform: rotate(-8deg);
|
|
||||||
}
|
|
||||||
30% {
|
|
||||||
transform: rotate(14deg);
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
transform: rotate(-4deg);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: rotate(10deg);
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
} /* Reset for the last half to pause */
|
|
||||||
100% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
import './avatar.css'
|
|
||||||
import avatar from '../../assets/avatar.png'
|
|
||||||
import ScrollAnimation from 'react-animate-on-scroll'
|
|
||||||
import Tilt from 'react-parallax-tilt'
|
|
||||||
import Typewriter from './type'
|
|
||||||
import { useEffect, useRef } from 'react'
|
|
||||||
export default function Main () {
|
|
||||||
const mainEl = useRef(null)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={'hero min-h-screen'} ref={mainEl}>
|
|
||||||
<div style={{ animation: 'fadeInDown', animationDuration: '1.5s', zIndex: 5 }} className={'animate__animated animate__fadeIn'} >
|
|
||||||
<div className='hero-content flex-col lg:flex-row max-w-xl' style={{ zIndex: 5 }}>
|
|
||||||
<div className='avatar'>
|
|
||||||
<Tilt glareEnable glareColor={'#f9e2af'}>
|
|
||||||
<img src={avatar} />
|
|
||||||
</Tilt>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ zIndex: 9999 }}>
|
|
||||||
|
|
||||||
<h1 className='text-5xl font-bold'><span className={'wave'}><svg className='h-9 w-9 lg:h-10 lg:w-10 xl:h-12 xl:w-12 inline-block align-bottom mauve' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><rect width='256' height='256' fill='none' /><path d='M98,64.31a20,20,0,0,1,34.64-20l28,48.5' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' /><path d='M71.35,98.17l-16-27.71A20,20,0,0,1,90,50.46l34,58.89' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' /><path d='M156,164.77a40,40,0,0,1,14.64-54.64l-10-17.32a20,20,0,0,1,34.64-20l18,31.18A80,80,0,0,1,74.7,184l-38-65.82a20,20,0,0,1,34.65-20l22,38.1' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' /><path d='M192,32a52.12,52.12,0,0,1,32,24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' /><path d='M74.62,232c-11-8.69-19.39-19.48-26.62-32' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' /></svg></span> Hi im <span className='text-highlight'>Saahil</span></h1>
|
|
||||||
<p>Welcome to my site.</p>
|
|
||||||
<Typewriter />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import Typewriter from 'typewriter-effect'
|
|
||||||
export default function typewriter () {
|
|
||||||
return <Typewriter
|
|
||||||
options={{
|
|
||||||
strings: ['Developer', 'Gamer', 'Builder'],
|
|
||||||
autoStart: true,
|
|
||||||
loop: true,
|
|
||||||
deleteSpeed: 100,
|
|
||||||
wrapperClassName: 'text-highlight',
|
|
||||||
cursor: ' |',
|
|
||||||
devMode: process.env.NODE_ENV !== 'production'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
import "./nav.css"
|
|
||||||
import Icon from '@mdi/react';
|
|
||||||
import CustomIcon from "../static/Icons"
|
|
||||||
import { mdiAccountCircle, mdiAccountBox } from '@mdi/js';
|
|
||||||
function NavLinks() {
|
|
||||||
return <>
|
|
||||||
<li><a href="#/about"><Icon path={mdiAccountCircle} size={1} color={"var(--mauve)"}/> About</a></li>
|
|
||||||
<li><a href="#/projects"><CustomIcon icon={window.location.hash === "#/projects" ? "CloudFolderOpen" : "CloudFolder" }/> Projects</a></li>
|
|
||||||
<li><a href="#/contact"><Icon path={mdiAccountBox} size={1} color={"var(--mauve)"}/> Contact</a></li>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
export default function Navbar() {
|
|
||||||
return <div className="navbar" style={{ zIndex: 9999, background: "var(--base)", position: "fixed", }}>
|
|
||||||
<div className="navbar-start">
|
|
||||||
<div className="dropdown">
|
|
||||||
<div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
|
|
||||||
</div>
|
|
||||||
<ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 nav-links">
|
|
||||||
<NavLinks />
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<a className="btn btn-ghost text-xl " href="#"><span className="nav-text-gradient">saahild.com</span></a>
|
|
||||||
|
|
||||||
<div className="navbar-center hidden lg:flex">
|
|
||||||
<ul className="menu menu-horizontal px-1 nav-links">
|
|
||||||
<NavLinks />
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="navbar-end">
|
|
||||||
{/* <a className="btn">Button</a> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
.nav-links {
|
|
||||||
font-size:medium;
|
|
||||||
@apply font-bold;
|
|
||||||
}
|
|
||||||
.nav-text-gradient {
|
|
||||||
background: linear-gradient(var(--mauve), var(--mauve));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
animation: gradient-animation222 infinite 20s linear;
|
|
||||||
}
|
|
||||||
@keyframes gradient-animation222 {
|
|
||||||
0% {
|
|
||||||
background: linear-gradient(var(--mauve), var(--blue));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
background: linear-gradient(var(--blue), var(--red));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
background: linear-gradient(var(--red), var(--pink));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
background: linear-gradient(var(--pink), var(--rosewater));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
background: linear-gradient(var(--rosewater), var(--flamingo));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background: linear-gradient(var(--mauve), var(--pink));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
.animate-404 {
|
|
||||||
animation: App-logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
@keyframes App-logo-spin {
|
|
||||||
|
|
||||||
from {
|
|
||||||
|
|
||||||
transform: rotate(0deg);
|
|
||||||
/* transform: translate3d(0px,0px,0px); */
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
|
|
||||||
transform: rotate(360deg);
|
|
||||||
/* transform: translate3d(10px, 10px, 10px); */
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
import Icon from './Icons'
|
|
||||||
import { javascriptReact } from './icons_list'
|
|
||||||
import './404.css'
|
|
||||||
import ReactParallaxTilt from 'react-parallax-tilt'
|
|
||||||
export default function Page404 () {
|
|
||||||
return <div className='hero min-h-screen'>
|
|
||||||
<div className='hero-content text-center'>
|
|
||||||
<div className='max-w-md'>
|
|
||||||
<ReactParallaxTilt>
|
|
||||||
<Icon icon={javascriptReact} className='w-60 p-2 animate-404' noScale />
|
|
||||||
</ReactParallaxTilt>
|
|
||||||
<h1 className='text-5xl font-bold text-highlight' >404?</h1>
|
|
||||||
<p className='py-6'>Seems you are on the wrong page.</p>
|
|
||||||
<div>
|
|
||||||
<button className='btn mauve mr-2' style={{ background: 'var(--surface0)'}} onClick={() => {
|
|
||||||
window.history.back()
|
|
||||||
}}>Go back</button>
|
|
||||||
<button className='btn mauve' style={{ background: 'var(--surface0)'}} onClick={() => {
|
|
||||||
window.location.hash = '#'
|
|
||||||
}}>Go Home</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
|
|
||||||
import * as Icons from "./icons_list"
|
|
||||||
const icons:any = {
|
|
||||||
// pre set names so they dont break
|
|
||||||
CloudFolder: Icons.folder_cloud,
|
|
||||||
CloudFolderOpen: Icons.folder_cloud_open,
|
|
||||||
...Icons
|
|
||||||
}
|
|
||||||
export default function Icon({ icon, inject, className,width,height,noScale }: { icon: string, className?: string,width?:number,height?:number, inject?:boolean, noScale?:boolean }) {
|
|
||||||
return inject ? <svg xmlns="http://www.w3.org/2000/svg" fill="var(--mauve)" className={"inline-flex hover:scale-125 duration-500 linear " + (className ?? "")}> <path d={icon}></path></svg>: <img src={icons[icon] ? icons[icon] : icon} className={`inline-flex ${!noScale ? "hover:scale-125" : ""} duration-500 linear ` + (className ?? "")} width={width} height={height} />
|
|
||||||
}
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
|
|
||||||
// template: import cssIcon from "../../assets/icons/css.svg"
|
|
||||||
// autogenerated script fyi
|
|
||||||
import bashIcon from "../../assets/icons/bash.svg"
|
|
||||||
import bunIcon from "../../assets/icons/bun.svg"
|
|
||||||
import coffeescriptIcon from "../../assets/icons/coffeescript.svg"
|
|
||||||
import cppIcon from "../../assets/icons/cpp.svg"
|
|
||||||
import csharpIcon from "../../assets/icons/csharp.svg"
|
|
||||||
import cssIcon from "../../assets/icons/css.svg"
|
|
||||||
import dockerIcon from "../../assets/icons/docker.svg"
|
|
||||||
import ejsIcon from "../../assets/icons/ejs.svg"
|
|
||||||
import figmaIcon from "../../assets/icons/figma.svg"
|
|
||||||
import folder_cloudIcon from "../../assets/icons/folder_cloud.svg"
|
|
||||||
import folder_cloud_openIcon from "../../assets/icons/folder_cloud_open.svg"
|
|
||||||
import gitIcon from "../../assets/icons/git.svg"
|
|
||||||
import graphqlIcon from "../../assets/icons/graphql.svg"
|
|
||||||
import htmlIcon from "../../assets/icons/html.svg"
|
|
||||||
import javascriptIcon from "../../assets/icons/javascript.svg"
|
|
||||||
import javascriptReactIcon from "../../assets/icons/javascriptReact.svg"
|
|
||||||
import jsonIcon from "../../assets/icons/json.svg"
|
|
||||||
import nextIcon from "../../assets/icons/next.svg"
|
|
||||||
import nodejsIcon from "../../assets/icons/nodejs.svg"
|
|
||||||
import npmIcon from "../../assets/icons/npm.svg"
|
|
||||||
import pnpmIcon from "../../assets/icons/pnpm.svg"
|
|
||||||
import prismaIcon from "../../assets/icons/prisma.svg"
|
|
||||||
import puppeteerIcon from "../../assets/icons/puppeteer.svg"
|
|
||||||
import pythonIcon from "../../assets/icons/python.svg"
|
|
||||||
import reactjsIcon from "../../assets/icons/reactjs.svg"
|
|
||||||
import robotsIcon from "../../assets/icons/robots.svg"
|
|
||||||
import sassIcon from "../../assets/icons/sass.svg"
|
|
||||||
import tailwindIcon from "../../assets/icons/tailwind.svg"
|
|
||||||
import typescriptIcon from "../../assets/icons/typescript.svg"
|
|
||||||
import vercelIcon from "../../assets/icons/vercel.svg"
|
|
||||||
import visualStudioIcon from "../../assets/icons/visualStudio.svg"
|
|
||||||
import vscodeIcon from "../../assets/icons/vscode.svg"
|
|
||||||
import yarnIcon from "../../assets/icons/yarn.svg"
|
|
||||||
|
|
||||||
export const bash = bashIcon;
|
|
||||||
export const bun = bunIcon;
|
|
||||||
export const coffeescript = coffeescriptIcon;
|
|
||||||
export const cpp = cppIcon;
|
|
||||||
export const csharp = csharpIcon;
|
|
||||||
export const css = cssIcon;
|
|
||||||
export const docker = dockerIcon;
|
|
||||||
export const ejs = ejsIcon;
|
|
||||||
export const figma = figmaIcon;
|
|
||||||
export const folder_cloud = folder_cloudIcon;
|
|
||||||
export const folder_cloud_open = folder_cloud_openIcon;
|
|
||||||
export const git = gitIcon;
|
|
||||||
export const graphql = graphqlIcon;
|
|
||||||
export const html = htmlIcon;
|
|
||||||
export const javascript = javascriptIcon;
|
|
||||||
export const javascriptReact = javascriptReactIcon;
|
|
||||||
export const json = jsonIcon;
|
|
||||||
export const next = nextIcon;
|
|
||||||
export const nodejs = nodejsIcon;
|
|
||||||
export const npm = npmIcon;
|
|
||||||
export const pnpm = pnpmIcon;
|
|
||||||
export const prisma = prismaIcon;
|
|
||||||
export const puppeteer = puppeteerIcon;
|
|
||||||
export const python = pythonIcon;
|
|
||||||
export const reactjs = reactjsIcon;
|
|
||||||
export const robots = robotsIcon;
|
|
||||||
export const sass = sassIcon;
|
|
||||||
export const tailwind = tailwindIcon;
|
|
||||||
export const typescript = typescriptIcon;
|
|
||||||
export const vercel = vercelIcon;
|
|
||||||
export const visualStudio = visualStudioIcon;
|
|
||||||
export const vscode = vscodeIcon;
|
|
||||||
export const yarn = yarnIcon;
|
|
||||||
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
/* tailwind root */
|
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--rosewater: #f5e0dc;
|
|
||||||
--flamingo: #f2cdcd;
|
|
||||||
--pink: #f5c2e7;
|
|
||||||
--mauve: #cba6f7;
|
|
||||||
--red: #f38ba8;
|
|
||||||
--maroon: #eba0ac;
|
|
||||||
--peach: #fab387;
|
|
||||||
--yellow: #f9e2af;
|
|
||||||
--green: #a6e3a1;
|
|
||||||
--teal: #94e2d5;
|
|
||||||
--sky: #89dceb;
|
|
||||||
--sapphire: #74c7ec;
|
|
||||||
--blue: #89b4fa;
|
|
||||||
--lavender: #b4befe;
|
|
||||||
--text: #cdd6f4;
|
|
||||||
--subtext1: #bac2de;
|
|
||||||
--subtext0: #a6adc8;
|
|
||||||
--overlay2: #9399b2;
|
|
||||||
--overlay1: #7f849c;
|
|
||||||
--overlay0: #6c7086;
|
|
||||||
--surface2: #585b70;
|
|
||||||
--surface1: #45475a;
|
|
||||||
--surface0: #313244;
|
|
||||||
--base: #1e1e2e;
|
|
||||||
--mantle: #181825;
|
|
||||||
--crust: #11111b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mauve {
|
|
||||||
color: var(--mauve);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-highlight {
|
|
||||||
color: var(--mauve);
|
|
||||||
/* color: linear-gradient(var(--mauve), var(--mantle); */
|
|
||||||
/* -webkit-background-clip: text; */
|
|
||||||
/* -webkit-text-fill-color: transparent; */
|
|
||||||
@apply ease-in duration-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-highlight:hover {
|
|
||||||
background: linear-gradient(var(--mauve), var(--yellow));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
|
||||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
||||||
sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
|
||||||
monospace;
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import './index.css';
|
|
||||||
import "animate.css/animate.compat.css";
|
|
||||||
import ReactDOM from 'react-dom/client';
|
|
||||||
import App from './App';
|
|
||||||
import reportWebVitals from './reportWebVitals';
|
|
||||||
import Background from './bg/main';
|
|
||||||
import { injectOneko } from './scripts/oneko';
|
|
||||||
import Navbar from './components/navbar';
|
|
||||||
import { runTitle } from './scripts/title';
|
|
||||||
import { listenForEasterEgg } from './scripts/oneko_easteregg';
|
|
||||||
import Footer from './components/footer';
|
|
||||||
import Ackee from './Ackee';
|
|
||||||
const analytics = new Ackee({
|
|
||||||
server_url: process.env.REACT_APP_SERVER_URL || "https://ackee.saahild.com",
|
|
||||||
id: `c082bd15-f9d8-414f-aa10-926e1d66a5d6`
|
|
||||||
})
|
|
||||||
const root = ReactDOM.createRoot(
|
|
||||||
document.getElementById('root') as HTMLElement
|
|
||||||
);
|
|
||||||
document.title = "Saahild.com"
|
|
||||||
injectOneko();
|
|
||||||
runTitle()
|
|
||||||
listenForEasterEgg()
|
|
||||||
document.title = 'React App';
|
|
||||||
root.render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<Background />
|
|
||||||
<Navbar />
|
|
||||||
<App analytics={analytics} />
|
|
||||||
<Footer />
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
|
||||||
// to log results (for example: reportWebVitals(console.log))
|
|
||||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
|
||||||
reportWebVitals(analytics.handleWebVitals());
|
|
||||||
1
src/react-app-env.d.ts
vendored
1
src/react-app-env.d.ts
vendored
|
|
@ -1 +0,0 @@
|
||||||
/// <reference types="react-scripts" />
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import { ReportHandler } from 'web-vitals';
|
|
||||||
|
|
||||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
|
||||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
|
||||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
|
||||||
getCLS(onPerfEntry);
|
|
||||||
getFID(onPerfEntry);
|
|
||||||
getFCP(onPerfEntry);
|
|
||||||
getLCP(onPerfEntry);
|
|
||||||
getTTFB(onPerfEntry);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default reportWebVitals;
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
.easter-egg {
|
|
||||||
color:red;
|
|
||||||
pointer-events: none;
|
|
||||||
position: fixed;
|
|
||||||
/* top: 40vh; */
|
|
||||||
/* left: 20vw; */
|
|
||||||
object-fit: cover;
|
|
||||||
background-size: cover!important;
|
|
||||||
width: 10vw;
|
|
||||||
height: 10vw;
|
|
||||||
animation: Toast--spinner infinite linear 60s, Overlay--motion-slideInLeft infinite alternate 1.06s, Overlay--motion-slideUp infinite alternate 2.2s; background: url('https://github.com/NeonGamerBot-QK/NeonGamerBot-QK/blob/main/com--unscreen.gif?raw=true');
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
/* https://github.com/primer/css/blob/main/src/toasts/toasts.scss#L119-#L127 */
|
|
||||||
@keyframes Toast--spinner {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* https://github.com/primer/view_components/blob/main/app/components/primer/alpha/dialog.pcss */
|
|
||||||
|
|
||||||
@keyframes Overlay--motion-slideDown {
|
|
||||||
from {
|
|
||||||
transform: translateY(-100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes Overlay--motion-slideUp {
|
|
||||||
from {
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes Overlay--motion-slideInRight {
|
|
||||||
from {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes Overlay--motion-slideInLeft {
|
|
||||||
from {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default function startingLog():void {
|
|
||||||
const isDev = process.env.NODE_ENV !== 'production'
|
|
||||||
console.log(
|
|
||||||
`%c What's up?`,
|
|
||||||
`font-size: 120px;
|
|
||||||
font-family: "Poppins", sans-serif;
|
|
||||||
background-size: 1000% 1000%;
|
|
||||||
animation: gradient 1s ease infinite;
|
|
||||||
`
|
|
||||||
)
|
|
||||||
console.log(
|
|
||||||
`%c Thanks for visting this site you can dontate me at https://ko-fi.com/saahil\n Try to find the easter egg in this site🥚\n HINT: to use it you must use the console it is a very VERY hard one`,
|
|
||||||
`font-size: 15px;`
|
|
||||||
)
|
|
||||||
if (isDev) {
|
|
||||||
console.debug(
|
|
||||||
'This message will show during production build. & development build'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,287 +0,0 @@
|
||||||
// oneko.js: https://github.com/tylxr59/oneko.js/blob/main/oneko.js
|
|
||||||
// modified by @NeonGamerBot-QK
|
|
||||||
// oneko.js: https://github.com/adryd325/oneko.js
|
|
||||||
|
|
||||||
export function injectOneko() {
|
|
||||||
const isReducedMotion = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
|
|
||||||
|
|
||||||
if (isReducedMotion) return;
|
|
||||||
|
|
||||||
const nekoEl = document.createElement("div");
|
|
||||||
|
|
||||||
let nekoPosX = 32;
|
|
||||||
let nekoPosY = 32;
|
|
||||||
|
|
||||||
let mousePosX = 0;
|
|
||||||
let mousePosY = 0;
|
|
||||||
|
|
||||||
let frameCount = 0;
|
|
||||||
let idleTime = 0;
|
|
||||||
let idleAnimation:any = null;
|
|
||||||
let idleAnimationFrame = 0;
|
|
||||||
|
|
||||||
const nekoSpeed = 10;
|
|
||||||
const spriteSets = {
|
|
||||||
idle: [[-3, -3]],
|
|
||||||
alert: [[-7, -3]],
|
|
||||||
scratchSelf: [
|
|
||||||
[-5, 0],
|
|
||||||
[-6, 0],
|
|
||||||
[-7, 0],
|
|
||||||
],
|
|
||||||
scratchWallN: [
|
|
||||||
[0, 0],
|
|
||||||
[0, -1],
|
|
||||||
],
|
|
||||||
scratchWallS: [
|
|
||||||
[-7, -1],
|
|
||||||
[-6, -2],
|
|
||||||
],
|
|
||||||
scratchWallE: [
|
|
||||||
[-2, -2],
|
|
||||||
[-2, -3],
|
|
||||||
],
|
|
||||||
scratchWallW: [
|
|
||||||
[-4, 0],
|
|
||||||
[-4, -1],
|
|
||||||
],
|
|
||||||
tired: [[-3, -2]],
|
|
||||||
sleeping: [
|
|
||||||
[-2, 0],
|
|
||||||
[-2, -1],
|
|
||||||
],
|
|
||||||
N: [
|
|
||||||
[-1, -2],
|
|
||||||
[-1, -3],
|
|
||||||
],
|
|
||||||
NE: [
|
|
||||||
[0, -2],
|
|
||||||
[0, -3],
|
|
||||||
],
|
|
||||||
E: [
|
|
||||||
[-3, 0],
|
|
||||||
[-3, -1],
|
|
||||||
],
|
|
||||||
SE: [
|
|
||||||
[-5, -1],
|
|
||||||
[-5, -2],
|
|
||||||
],
|
|
||||||
S: [
|
|
||||||
[-6, -3],
|
|
||||||
[-7, -2],
|
|
||||||
],
|
|
||||||
SW: [
|
|
||||||
[-5, -3],
|
|
||||||
[-6, -1],
|
|
||||||
],
|
|
||||||
W: [
|
|
||||||
[-4, -2],
|
|
||||||
[-4, -3],
|
|
||||||
],
|
|
||||||
NW: [
|
|
||||||
[-1, 0],
|
|
||||||
[-1, -1],
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
nekoEl.id = "oneko";
|
|
||||||
nekoEl.ariaHidden = "true";
|
|
||||||
nekoEl.style.width = "32px";
|
|
||||||
nekoEl.style.height = "32px";
|
|
||||||
nekoEl.style.position = "fixed";
|
|
||||||
nekoEl.style.pointerEvents = "auto";
|
|
||||||
nekoEl.style.imageRendering = "pixelated";
|
|
||||||
nekoEl.style.left = `${nekoPosX - 16}px`;
|
|
||||||
nekoEl.style.top = `${nekoPosY - 16}px`;
|
|
||||||
nekoEl.style.zIndex = "99999999";
|
|
||||||
|
|
||||||
let nekoFile = "https://saahild.com/oneko.gif"
|
|
||||||
const curScript = document.currentScript
|
|
||||||
if (curScript && curScript.dataset.cat) {
|
|
||||||
nekoFile = curScript.dataset.cat
|
|
||||||
}
|
|
||||||
nekoEl.style.backgroundImage = `url(${nekoFile})`;
|
|
||||||
|
|
||||||
document.body.appendChild(nekoEl);
|
|
||||||
|
|
||||||
document.addEventListener("mousemove", function (event) {
|
|
||||||
mousePosX = event.clientX;
|
|
||||||
mousePosY = event.clientY;
|
|
||||||
});
|
|
||||||
|
|
||||||
window.requestAnimationFrame(onAnimationFrame);
|
|
||||||
}
|
|
||||||
|
|
||||||
let lastFrameTimestamp: any ;
|
|
||||||
|
|
||||||
function onAnimationFrame(timestamp: any) {
|
|
||||||
// Stops execution if the neko element is removed from DOM
|
|
||||||
if (!nekoEl.isConnected) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!lastFrameTimestamp) {
|
|
||||||
lastFrameTimestamp = timestamp;
|
|
||||||
}
|
|
||||||
if (timestamp - lastFrameTimestamp > 100) {
|
|
||||||
lastFrameTimestamp = timestamp
|
|
||||||
frame()
|
|
||||||
}
|
|
||||||
window.requestAnimationFrame(onAnimationFrame);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setSprite(name: any, frame: any) {
|
|
||||||
//@ts-ignore
|
|
||||||
const sprite = spriteSets[name][frame % spriteSets[name].length];
|
|
||||||
nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetIdleAnimation() {
|
|
||||||
idleAnimation = null;
|
|
||||||
idleAnimationFrame = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
function idle() {
|
|
||||||
idleTime += 1;
|
|
||||||
|
|
||||||
// every ~ 20 seconds
|
|
||||||
if (
|
|
||||||
idleTime > 10 &&
|
|
||||||
Math.floor(Math.random() * 200) == 0 &&
|
|
||||||
idleAnimation == null
|
|
||||||
) {
|
|
||||||
let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
|
|
||||||
if (nekoPosX < 32) {
|
|
||||||
avalibleIdleAnimations.push("scratchWallW");
|
|
||||||
}
|
|
||||||
if (nekoPosY < 32) {
|
|
||||||
avalibleIdleAnimations.push("scratchWallN");
|
|
||||||
}
|
|
||||||
if (nekoPosX > window.innerWidth - 32) {
|
|
||||||
avalibleIdleAnimations.push("scratchWallE");
|
|
||||||
}
|
|
||||||
if (nekoPosY > window.innerHeight - 32) {
|
|
||||||
avalibleIdleAnimations.push("scratchWallS");
|
|
||||||
}
|
|
||||||
idleAnimation =
|
|
||||||
avalibleIdleAnimations[
|
|
||||||
Math.floor(Math.random() * avalibleIdleAnimations.length)
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (idleAnimation) {
|
|
||||||
case "sleeping":
|
|
||||||
if (idleAnimationFrame < 8) {
|
|
||||||
setSprite("tired", 0);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
|
|
||||||
if (idleAnimationFrame > 192) {
|
|
||||||
resetIdleAnimation();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "scratchWallN":
|
|
||||||
case "scratchWallS":
|
|
||||||
case "scratchWallE":
|
|
||||||
case "scratchWallW":
|
|
||||||
case "scratchSelf":
|
|
||||||
setSprite(idleAnimation, idleAnimationFrame);
|
|
||||||
if (idleAnimationFrame > 9) {
|
|
||||||
resetIdleAnimation();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
setSprite("idle", 0);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
idleAnimationFrame += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
function explodeHearts() {
|
|
||||||
const parent = nekoEl.parentElement;
|
|
||||||
const rect = nekoEl.getBoundingClientRect();
|
|
||||||
const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
|
|
||||||
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
|
||||||
const centerX = rect.left + rect.width / 2 + scrollLeft;
|
|
||||||
const centerY = rect.top + rect.height / 2 + scrollTop;
|
|
||||||
|
|
||||||
for (let i = 0; i < 10; i++) {
|
|
||||||
const heart = document.createElement('div');
|
|
||||||
heart.className = 'heart';
|
|
||||||
heart.textContent = '❤';
|
|
||||||
const offsetX = (Math.random() - 0.5) * 50;
|
|
||||||
const offsetY = (Math.random() - 0.5) * 50;
|
|
||||||
heart.style.left = `${centerX + offsetX - 16}px`;
|
|
||||||
heart.style.top = `${centerY + offsetY - 16}px`;
|
|
||||||
heart.style.transform = `translate(-50%, -50%) rotate(${Math.random() * 360}deg)`;
|
|
||||||
parent?.appendChild(heart);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
parent?.removeChild(heart);
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const style = document.createElement('style');
|
|
||||||
style.innerHTML = `
|
|
||||||
@keyframes heartBurst {
|
|
||||||
0% { transform: scale(0); opacity: 1; }
|
|
||||||
100% { transform: scale(1); opacity: 0; }
|
|
||||||
}
|
|
||||||
.heart {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 2em;
|
|
||||||
animation: heartBurst 1s ease-out;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
color: var(--mauve);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
document.head.appendChild(style);
|
|
||||||
nekoEl.addEventListener('click', explodeHearts);
|
|
||||||
|
|
||||||
function frame() {
|
|
||||||
frameCount += 1;
|
|
||||||
const diffX = nekoPosX - mousePosX;
|
|
||||||
const diffY = nekoPosY - mousePosY;
|
|
||||||
const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
|
|
||||||
|
|
||||||
if (distance < nekoSpeed || distance < 48) {
|
|
||||||
idle();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
idleAnimation = null;
|
|
||||||
idleAnimationFrame = 0;
|
|
||||||
|
|
||||||
if (idleTime > 1) {
|
|
||||||
setSprite("alert", 0);
|
|
||||||
// count down after being alerted before moving
|
|
||||||
idleTime = Math.min(idleTime, 7);
|
|
||||||
idleTime -= 1;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let direction;
|
|
||||||
direction = diffY / distance > 0.5 ? "N" : "";
|
|
||||||
direction += diffY / distance < -0.5 ? "S" : "";
|
|
||||||
direction += diffX / distance > 0.5 ? "W" : "";
|
|
||||||
direction += diffX / distance < -0.5 ? "E" : "";
|
|
||||||
setSprite(direction, frameCount);
|
|
||||||
|
|
||||||
nekoPosX -= (diffX / distance) * nekoSpeed;
|
|
||||||
nekoPosY -= (diffY / distance) * nekoSpeed;
|
|
||||||
|
|
||||||
nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16);
|
|
||||||
nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16);
|
|
||||||
|
|
||||||
nekoEl.style.left = `${nekoPosX - 16}px`;
|
|
||||||
nekoEl.style.top = `${nekoPosY - 16}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
init();
|
|
||||||
}
|
|
||||||
|
|
||||||
export function stopOneko() {
|
|
||||||
return document.getElementById('oneko')?.remove()
|
|
||||||
}
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
import './easteregg.css'
|
|
||||||
export function startEasterEgg () {
|
|
||||||
const el = document.createElement('div')
|
|
||||||
el.innerHTML = ''
|
|
||||||
el.className = `easter-egg hidden`
|
|
||||||
document.body.append(el)
|
|
||||||
return {
|
|
||||||
destroy: () => {
|
|
||||||
el.remove()
|
|
||||||
},
|
|
||||||
toggle: () => el.classList.toggle('hidden')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export function listenForEasterEgg () {
|
|
||||||
const oneko2 = startEasterEgg()
|
|
||||||
window.addEventListener('keydown', (k) => {
|
|
||||||
if (k.shiftKey && k.altKey) oneko2.toggle()
|
|
||||||
})
|
|
||||||
window.addEventListener('keyup', (k) => {
|
|
||||||
if (k.shiftKey && k.altKey) oneko2.toggle()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// expose to window
|
|
||||||
// LATER: there is a way to type this im just lazy atm
|
|
||||||
// @ts-ignore
|
|
||||||
window.easter_egg = startEasterEgg
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
let title0: null | string = null
|
|
||||||
let interId: any = null
|
|
||||||
const isDev = process.env.NODE_ENV !== 'production'
|
|
||||||
|
|
||||||
export function runTitle() {
|
|
||||||
if(interId) clearInterval(interId)
|
|
||||||
interId = setInterval(() => {
|
|
||||||
if(document.title !== 'Come Back :(') {
|
|
||||||
title0 = document.title
|
|
||||||
}
|
|
||||||
window.document.documentElement.className = "duration-500 ease-in-out "
|
|
||||||
if (document.hasFocus()) {
|
|
||||||
|
|
||||||
document.title = title0?.toLowerCase() === "react app" ? "Saahild.com" : (title0 ?? "Saahild.com")
|
|
||||||
window.document.documentElement.style.filter = ""
|
|
||||||
} else {
|
|
||||||
document.title = 'Come Back :('
|
|
||||||
if(!isDev) window.document.documentElement.style.filter = "blur(30px)"
|
|
||||||
}
|
|
||||||
}, 200)
|
|
||||||
|
|
||||||
}
|
|
||||||
export function stopTitle() {
|
|
||||||
if(!interId) return false;
|
|
||||||
return clearInterval(interId)
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
|
||||||
// allows you to do things like:
|
|
||||||
// expect(element).toHaveTextContent(/react/i)
|
|
||||||
// learn more: https://github.com/testing-library/jest-dom
|
|
||||||
import '@testing-library/jest-dom';
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: [
|
|
||||||
'./src/**/*.tsx'
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [require('daisyui')],
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,26 +1,4 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
// https://nuxt.com/docs/guide/concepts/typescript
|
||||||
"target": "es5",
|
"extends": "./.nuxt/tsconfig.json"
|
||||||
"lib": [
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"esnext"
|
|
||||||
],
|
|
||||||
"allowJs": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"strict": true,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"module": "esnext",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react-jsx"
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"src"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue