mirror of
https://github.com/NeonGamerBot-QK/saahild.com.git
synced 2025-07-29 09:36:06 +00:00
Compare commits
48 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
7b83366c8b | ||
| f4c01e7e82 | |||
|
|
063f553540 | ||
|
|
2ffab1c29d | ||
| aae809af97 | |||
|
|
4efce63394 | ||
|
|
1cf1e86b26 | ||
|
|
b04031c36f | ||
|
|
4b13c358e5 | ||
|
|
2ea1f1f5aa | ||
|
|
ce58e174c6 | ||
|
|
c99c4367ea | ||
|
|
f1117ff90e | ||
|
|
a45710c1b4 | ||
|
|
57ad77a7b5 | ||
|
|
e51e8c8d0f | ||
|
|
7a45e7da96 | ||
|
|
4a13aec640 | ||
|
|
1d62e4dd7f | ||
|
|
aab327ccbb | ||
|
|
32bb1f2f99 | ||
|
|
b7a6ab5803 | ||
|
|
3a38aebc37 | ||
|
|
451f08a188 | ||
|
|
d7839820d7 | ||
|
|
6d4af164ae | ||
|
|
6eecb2c2a7 | ||
|
|
947a5c5e4b | ||
|
|
c7dfa4c920 | ||
|
|
8b4ebe47c4 | ||
|
|
1c892c60e2 | ||
|
|
017990f799 | ||
| 7667b2c714 | |||
|
|
08d6ff6c84 | ||
| d52a0e9cca | |||
|
|
48188ad208 | ||
| 66f727e669 | |||
|
|
2c22a27a65 | ||
| c1d2bb7c56 | |||
|
|
27a09424ef | ||
| 2f0fa2294e | |||
|
|
1432916a44 | ||
| 768cc7e600 | |||
|
|
5dd40519f7 | ||
| 4cdc45eb88 | |||
|
|
9712bdcb51 | ||
|
|
179ffbe730 | ||
| a9e74f983e |
118 changed files with 1455 additions and 43060 deletions
7
.github/workflows/deploy.yml
vendored
7
.github/workflows/deploy.yml
vendored
|
|
@ -7,7 +7,9 @@ on:
|
|||
paths:
|
||||
# on code related change
|
||||
- ".github/workflows/deploy.yml"
|
||||
- "src/**"
|
||||
- "pages/**"
|
||||
- "components/**"
|
||||
- "lib/**"
|
||||
- "public/**"
|
||||
workflow_dispatch:
|
||||
|
||||
|
|
@ -35,7 +37,4 @@ jobs:
|
|||
port: ${{ secrets.PORT }}
|
||||
script: |
|
||||
cd /${{ secrets.USERNAME }}
|
||||
export REACT_APP_BUILD_SHA=${{ steps.short_sha.outputs.short_sha }}
|
||||
export REACT_APP_BUILD_ID=${{ github.run_id }}
|
||||
export REACT_APP_BUILD_NUM=${{ github.run_number }}
|
||||
bash ./deploy.sh ${{ github.event.repository.name }}
|
||||
|
|
|
|||
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_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
# Misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
|
|
|||
14
Dockerfile
14
Dockerfile
|
|
@ -1,14 +0,0 @@
|
|||
FROM node:20-alpine as builder
|
||||
WORKDIR /app
|
||||
COPY package*.json .
|
||||
COPY yarn*.lock .
|
||||
RUN yarn install
|
||||
COPY . .
|
||||
RUN yarn build:react
|
||||
|
||||
#Stage 2
|
||||
FROM nginx:1.19.0
|
||||
WORKDIR /usr/share/nginx/html
|
||||
RUN rm -rf ./*
|
||||
COPY --from=builder /app/build .
|
||||
ENTRYPOINT ["nginx", "-g", "daemon off;"]
|
||||
261
README.md
261
README.md
|
|
@ -1,236 +1,77 @@
|
|||
<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->
|
||||
<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
|
||||
-->
|
||||
|
||||
|
||||
## My portfolio
|
||||
|
||||
This is my website portfolio made in nuxt + vue + daisyui!
|
||||
|
||||
<!-- PROJECT SHIELDS -->
|
||||
<!--
|
||||
*** 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)
|
||||
## Setup
|
||||
|
||||
Make sure to install dependencies:
|
||||
|
||||
<!-- PROJECT LOGO -->
|
||||
<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>
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
<h3 align="center">saahild.com</h3>
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
<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>
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
<!-- 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>
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm dev
|
||||
|
||||
<!-- ABOUT THE PROJECT -->
|
||||
## About The Project
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
[![Product Name Screen Shot][product-screenshot]](https://saahild.com)
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
This is my personal website
|
||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
### Built With
|
||||
# pnpm
|
||||
pnpm build
|
||||
|
||||
<!-- * [![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] -->
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
<!-- GETTING STARTED -->
|
||||
## Getting Started
|
||||
# pnpm
|
||||
pnpm preview
|
||||
|
||||
### Prerequisites
|
||||
Install deps
|
||||
* npm
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
### Installation
|
||||
1. Clone the repo
|
||||
```sh
|
||||
git clone https://github.com/NeonGamerBot-QK/saahild.com.git
|
||||
```
|
||||
2. Install NPM packages
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
|
||||
|
||||
<!-- USAGE EXAMPLES
|
||||
## Usage
|
||||
|
||||
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.
|
||||
|
||||
<!-- _For more examples, please refer to the [Documentation](https://example.com)_
|
||||
|
||||
<p align="right">(<a href="#readme-top">back to top</a>)</p> -->
|
||||
|
||||
|
||||
|
||||
<!-- 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
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
|
|
|
|||
103
app.vue
Normal file
103
app.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<script setup>
|
||||
import Backdrop from "./components/Backdrop.vue";
|
||||
import Footer from "./components/Footer.vue";
|
||||
import Navbar from "./components/Navbar.vue";
|
||||
import "./lib/jsscripts/index.ts";
|
||||
useHead({
|
||||
title: "Saahils Site",
|
||||
meta: [
|
||||
{
|
||||
name: "viewport",
|
||||
content: "width=device-width, initial-scale=1.0",
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"Saahil's personal website, showcasing his projects, blog, and more.",
|
||||
},
|
||||
{
|
||||
name: "robots",
|
||||
content: "noindex, nofollow",
|
||||
},
|
||||
{
|
||||
name: "author",
|
||||
content: "Neon",
|
||||
},
|
||||
{
|
||||
name: "charset",
|
||||
content: "UTF-8",
|
||||
},
|
||||
{
|
||||
name: "keywords",
|
||||
content: "neon, saahil, portfolio",
|
||||
},
|
||||
{
|
||||
name: "color-scheme",
|
||||
content: "dark",
|
||||
},
|
||||
],
|
||||
link: [
|
||||
{
|
||||
rel: "preload",
|
||||
href: "https://saahild.com/buttons/",
|
||||
},
|
||||
{
|
||||
rel: "me",
|
||||
href: "https://mastodon.social/@neongamerbot",
|
||||
},
|
||||
{
|
||||
rel: "icon",
|
||||
type: "image/x-icon",
|
||||
href: "/neonspfp.png",
|
||||
},
|
||||
],
|
||||
noscript: [
|
||||
{
|
||||
children: `
|
||||
<meta http-equiv="refresh" content="0; url=https://saahild.com/retro" />
|
||||
`,
|
||||
},
|
||||
],
|
||||
});
|
||||
umTrackEvent("app-load");
|
||||
if (process.client) {
|
||||
umTrackView(
|
||||
location.pathname,
|
||||
new URLSearchParams(location.search).get("r") || "none",
|
||||
);
|
||||
|
||||
umIdentify({
|
||||
semi_perm_id: localStorage.getItem("semi_perm_id")
|
||||
? localStorage.getItem("semi_perm_id")
|
||||
: (localStorage.semi_perm_id =
|
||||
Math.random().toString(36).substring(2, 15) +
|
||||
Math.random().toString(36).substring(2, 15)),
|
||||
temp_id: Date.now() + Math.random().toString(36).substring(2, 15),
|
||||
user_agent: navigator.userAgent,
|
||||
});
|
||||
// alert("ts")
|
||||
}
|
||||
</script>
|
||||
<!-- <script
|
||||
defer
|
||||
src="https://cloud.umami.is/script.js"
|
||||
data-website-id=""
|
||||
></script> -->
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
font-family: "Poppins";
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<Navbar />
|
||||
<Backdrop />
|
||||
<div class="flex-grow">
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
2
assets/app.css
Normal file
2
assets/app.css
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "tailwindcss";
|
||||
@plugin "daisyui";
|
||||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
62
components/AboutMe.vue
Normal file
62
components/AboutMe.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<script setup>
|
||||
import AgeCounter from "./AgeCounter.vue";
|
||||
const options = "highschool|collage|j*b|retirment|greatbeyond".split("|");
|
||||
const calculateAge = (b) => {
|
||||
const now = Date.now();
|
||||
const age = (now - b) / (1000 * 60 * 60 * 24 * 365.25);
|
||||
return age;
|
||||
};
|
||||
const borth = 1208058960000;
|
||||
// console.log(, 'borth')
|
||||
function calcOption() {
|
||||
const age = Math.floor(calculateAge(borth));
|
||||
if (age < 19) return options[0];
|
||||
if (age < 25) return options[1];
|
||||
if (age < 60) return options[2];
|
||||
if (age <= 70) return options[3];
|
||||
return options[4];
|
||||
}
|
||||
let currentOption = calcOption();
|
||||
</script>
|
||||
<template>
|
||||
<div class="sm:-mt-10 mt-10 ml-2 sm:ml-10">
|
||||
<h1 class="font-bold text-3xl">About me:</h1>
|
||||
<br />
|
||||
<ul>
|
||||
<li>
|
||||
I am currently
|
||||
<AgeCounter
|
||||
:birthTimestamp="borth"
|
||||
:width="107"
|
||||
:height="18"
|
||||
fontSize="16"
|
||||
textColor="#cba6f7"
|
||||
/>
|
||||
years old
|
||||
</li>
|
||||
<li>Im currently in {{ currentOption }} (this is just a guess)</li>
|
||||
<li>
|
||||
I program in
|
||||
<span>
|
||||
<Icon name="catppuccin:typescript" />
|
||||
Typescript</span
|
||||
>,
|
||||
<span>
|
||||
<Icon name="catppuccin:ruby" />
|
||||
Ruby</span
|
||||
>
|
||||
and
|
||||
<span>
|
||||
<Icon name="catppuccin:nuxt" />
|
||||
Nuxt</span
|
||||
>
|
||||
usually
|
||||
</li>
|
||||
<li>
|
||||
i like mostly coding in my freetime, messing with bugs, watching anime
|
||||
and sleeping
|
||||
</li>
|
||||
<li>i also like eating lots of food and playing video games!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
99
components/AgeCounter.vue
Normal file
99
components/AgeCounter.vue
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
birthTimestamp: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 14,
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default:
|
||||
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: "#fff",
|
||||
},
|
||||
});
|
||||
|
||||
const canvasRef = ref(null);
|
||||
let animationFrame = null;
|
||||
let ctx = null;
|
||||
|
||||
const calculateAge = () => {
|
||||
const now = Date.now();
|
||||
const age = (now - props.birthTimestamp) / (1000 * 60 * 60 * 24 * 365.25);
|
||||
return age;
|
||||
};
|
||||
|
||||
const draw = () => {
|
||||
if (!ctx) return;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, props.width, props.height);
|
||||
|
||||
// Calculate current age
|
||||
const age = calculateAge();
|
||||
|
||||
// Draw text
|
||||
ctx.font = `${props.fontSize}px ${props.fontFamily}`;
|
||||
ctx.fillStyle = props.textColor;
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
|
||||
// Format age to 8 decimal places with smooth animation
|
||||
const formattedAge = age.toFixed(8);
|
||||
|
||||
// Draw the age in the center of the canvas
|
||||
ctx.fillText(formattedAge, props.width / 2, props.height / 2);
|
||||
|
||||
// Request next frame
|
||||
animationFrame = requestAnimationFrame(draw);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const canvas = canvasRef.value;
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
// Set canvas resolution for retina displays
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = props.width * dpr;
|
||||
canvas.height = props.height * dpr;
|
||||
|
||||
// Scale the context to match the device pixel ratio
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
// Start animation
|
||||
draw();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (animationFrame) {
|
||||
cancelAnimationFrame(animationFrame);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
class="inline"
|
||||
:style="{
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
176
components/Backdrop.vue
Normal file
176
components/Backdrop.vue
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
|
||||
const canvas = ref(null);
|
||||
const cursor = ref({ x: 0, y: 0 });
|
||||
let ctx = null;
|
||||
let animationFrame = null;
|
||||
let chars = [];
|
||||
|
||||
class Char {
|
||||
constructor(x, y, char) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.char = char;
|
||||
this.speed = 0.02 + Math.random() * 0.8;
|
||||
this.opacity = 0.05 + Math.random() * 0.15;
|
||||
this.actualY = y;
|
||||
}
|
||||
|
||||
draw() {
|
||||
const distToCursor = Math.hypot(
|
||||
this.x - cursor.value.x,
|
||||
this.y - cursor.value.y,
|
||||
);
|
||||
|
||||
const highlight = Math.max(0, 0.5 - distToCursor / 250);
|
||||
ctx.fillStyle = `rgba(203, 166, 247, ${this.opacity + highlight})`;
|
||||
ctx.fillText(this.char, this.x, this.y);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.actualY += this.speed;
|
||||
this.y = this.actualY % window.innerHeight;
|
||||
|
||||
if (this.y < this.speed) {
|
||||
this.char = String.fromCharCode(0x2729 + Math.floor(Math.random() * 706));
|
||||
this.opacity = 0.05 + Math.random() * 0.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const calculateFontSize = () => {
|
||||
const baseSize = 16;
|
||||
const screenWidth = window.innerWidth;
|
||||
|
||||
// For smaller screens
|
||||
if (screenWidth < 768) {
|
||||
return Math.max(18, baseSize * (screenWidth / 768));
|
||||
}
|
||||
|
||||
// For larger screens
|
||||
return Math.min(22, Math.max(18, baseSize * (screenWidth / 1920)));
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
if (!canvas.value) return;
|
||||
|
||||
ctx = canvas.value.getContext("2d", { alpha: false });
|
||||
canvas.value.width = window.innerWidth;
|
||||
canvas.value.height = window.innerHeight;
|
||||
|
||||
const fontSize = calculateFontSize();
|
||||
const columnSpacing = fontSize * 1.5;
|
||||
|
||||
// Adjust number of columns based on screen size
|
||||
const minColumns = 15; // Ensure at least this many columns on mobile
|
||||
const columns = Math.max(
|
||||
minColumns,
|
||||
Math.floor(window.innerWidth / columnSpacing),
|
||||
);
|
||||
|
||||
// Adjust rows based on screen height
|
||||
const rowSpacing = fontSize * 2;
|
||||
const minRows = 15; // Ensure at least this many rows on small screens
|
||||
const maxRows = 25; // Cap for performance on large screens
|
||||
const rows = Math.min(
|
||||
maxRows,
|
||||
Math.max(minRows, Math.floor(window.innerHeight / rowSpacing)),
|
||||
);
|
||||
|
||||
chars = [];
|
||||
for (let i = 0; i < columns; i++) {
|
||||
for (let j = 0; j < rows; j++) {
|
||||
const x = i * (window.innerWidth / columns); // Evenly distribute columns
|
||||
const y = j * rowSpacing - Math.random() * window.innerHeight;
|
||||
const char = String.fromCharCode(
|
||||
0x2729 + Math.floor(Math.random() * 706),
|
||||
);
|
||||
chars.push(new Char(x, y, char));
|
||||
}
|
||||
}
|
||||
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
};
|
||||
|
||||
const animate = () => {
|
||||
ctx.fillStyle = "rgb(17, 17, 20)";
|
||||
ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);
|
||||
|
||||
chars.forEach((char) => {
|
||||
char.draw();
|
||||
char.update();
|
||||
});
|
||||
|
||||
animationFrame = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
cursor.value = {
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
};
|
||||
};
|
||||
|
||||
let resizeTimeout;
|
||||
const handleResize = () => {
|
||||
if (resizeTimeout) {
|
||||
clearTimeout(resizeTimeout);
|
||||
}
|
||||
|
||||
resizeTimeout = setTimeout(() => {
|
||||
if (canvas.value) {
|
||||
canvas.value.width = window.innerWidth;
|
||||
canvas.value.height = window.innerHeight;
|
||||
init();
|
||||
}
|
||||
}, 250);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
animate();
|
||||
// if im holding down shift how can i make it go faster? code it
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Shift") {
|
||||
chars.forEach((char) => {
|
||||
char.speed *= 10; // Double the speed when Shift is pressed
|
||||
});
|
||||
}
|
||||
if (e.ctrlKey) {
|
||||
chars.forEach((char) => {
|
||||
char.speed *= 1.1; // Halve the speed when Ctrl is pressed
|
||||
});
|
||||
}
|
||||
if (e.altKey) {
|
||||
chars.forEach((char) => {
|
||||
char.speed *= 0.9; // Halve the speed when Alt is pressed
|
||||
});
|
||||
}
|
||||
});
|
||||
window.addEventListener("keyup", (e) => {
|
||||
if (e.key === "Shift") {
|
||||
chars.forEach((char) => {
|
||||
char.speed /= 10; // Reset the speed when Shift is released
|
||||
});
|
||||
}
|
||||
});
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
window.addEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (animationFrame) {
|
||||
cancelAnimationFrame(animationFrame);
|
||||
}
|
||||
if (resizeTimeout) {
|
||||
clearTimeout(resizeTimeout);
|
||||
}
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
window.removeEventListener("resize", handleResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="canvas" class="fixed inset-0 -z-10 h-full w-full bg-crust" />
|
||||
</template>
|
||||
79
components/BigTextMain.vue
Normal file
79
components/BigTextMain.vue
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<script setup>
|
||||
let spotify_link = `https://spotify-github-profile.kittinanx.com/api/view?uid=saahil.d&cover_image=true&theme=default&show_offline=true&background_color=121212&interchange=false&bar_color=b6494d&bar_color_cover=true`;
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex items-center justify-between md:mt-20 md:px-20 mt-10 px-10">
|
||||
<div>
|
||||
<img
|
||||
src="/neonspfp.png"
|
||||
class="md:pb-5 pb-2 md:h-[200px] md:w-[200px] h-[100px] w-[100px]"
|
||||
/>
|
||||
<h1 class="font-bold md:text-5xl text-2xl">
|
||||
<svg
|
||||
class="h-9 w-9 lg:h-10 lg:w-10 xl:h-12 xl:w-12 inline-block align-bottom"
|
||||
style="color: #cba6f7"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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"
|
||||
></path>
|
||||
</svg>
|
||||
Hi I'm <span class="text-[#cba6f7] fancy-font">Saahil</span>
|
||||
</h1>
|
||||
<p class="pt-5">I am a teenage developer, designer and programmer</p>
|
||||
</div>
|
||||
|
||||
<!-- Right: Spotify Image -->
|
||||
<div>
|
||||
<img
|
||||
:src="spotify_link"
|
||||
alt="Saahil's Spotify"
|
||||
class="mt-5 hidden md:block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.fancy-font {
|
||||
font-family: "Fuzzy Bubbles", sans-serif;
|
||||
}
|
||||
</style>
|
||||
67
components/FeedbackCards.vue
Normal file
67
components/FeedbackCards.vue
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="sm:flex sm:justify-right sm:items-right mt-30 sm:ml-0 ml-2">
|
||||
<div
|
||||
class="relative w-80 h-96"
|
||||
@click="rotateStack"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchend="handleTouchEnd"
|
||||
>
|
||||
<div
|
||||
v-for="(card, index) in displayedCards"
|
||||
:key="card.id"
|
||||
class="card w-full h-1/2 absolute top-0 left-0 cursor-pointer transition-transform duration-300"
|
||||
:class="card.color"
|
||||
:style="{
|
||||
zIndex: cards.length - index,
|
||||
transform:
|
||||
index === 0 ? 'translateY(0)' : 'translateY(-' + index * 10 + 'px)',
|
||||
}"
|
||||
>
|
||||
<div class="card-body">
|
||||
<img :src="card.avatar" class="avatar w-12 h-12 rounded-full" />
|
||||
<h2 class="card-title">{{ card.title }}</h2>
|
||||
<p>{{ card.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
const props = defineProps({
|
||||
cards: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const cards = ref([...props.cards]);
|
||||
|
||||
watch(
|
||||
() => props.cards,
|
||||
(newVal) => {
|
||||
cards.value = [...newVal];
|
||||
},
|
||||
);
|
||||
|
||||
const displayedCards = computed(() => [...cards.value].reverse());
|
||||
let timeSinceLastRotation = Date.now();
|
||||
function rotateStack() {
|
||||
const top = cards.value.shift();
|
||||
cards.value.push(top);
|
||||
timeSinceLastRotation = Date.now() - (top.lastRotationTime || Date.now());
|
||||
umTrackEvent("rotateStack-about", {
|
||||
cardId: top.id,
|
||||
timeSinceLastRotation: timeSinceLastRotation,
|
||||
});
|
||||
}
|
||||
|
||||
let touchStartX = 0;
|
||||
function handleTouchStart(e) {
|
||||
touchStartX = e.touches[0].clientX;
|
||||
}
|
||||
function handleTouchEnd(e) {
|
||||
const touchEndX = e.changedTouches[0].clientX;
|
||||
if (touchStartX - touchEndX > 50) rotateStack();
|
||||
}
|
||||
</script>
|
||||
43
components/Footer.vue
Normal file
43
components/Footer.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<footer
|
||||
class="fixed bottom-0 left-1/2 transform -translate-x-1/2 footer sm:footer-horizontal bg-[#1e1e2e] text-neutral-content p-2 sm:p-5 shadow-lg rounded-lg sm:w-1/3 max-w-screen-lg w-full"
|
||||
>
|
||||
<aside>
|
||||
<p class="font-mono font-small">
|
||||
Made by Neon - Copyright {{ new Date().getFullYear() }}.
|
||||
<br />
|
||||
<br class="hidden sm:block" />
|
||||
<a href="https://archive.is/450yM"><b>Free speech</b></a> &
|
||||
<a href="https://en.wikipedia.org/wiki/Privacy"><b>Privacy</b></a> is a
|
||||
fundamental human right.
|
||||
</p>
|
||||
</aside>
|
||||
<nav>
|
||||
<div class="grid grid-flow-col gap-2">
|
||||
<!-- Social icons go here -->
|
||||
<a
|
||||
href="https://github.com/NeonGamerBot-QK/saahild.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:github"
|
||||
class="text-2xl hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://saahild.com/creds/public.pgp.txt">
|
||||
<Icon
|
||||
name="mdi:key"
|
||||
class="text-2xl hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
</a>
|
||||
<a href="./canary.txt">
|
||||
<Icon
|
||||
name="mdi:check-circle"
|
||||
class="text-2xl hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
</template>
|
||||
113
components/Navbar.vue
Normal file
113
components/Navbar.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<div class="navbar bg-base-100/50 shadow-sm">
|
||||
<div class="navbar-start">
|
||||
<div class="dropdown">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h8m-8 6h16"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
|
||||
>
|
||||
<li>
|
||||
<button v-umami="{ name: 'Navbar-About', mobile: true }">
|
||||
<a href="/about">
|
||||
<Icon name="catppuccin:text" class="text-2xl" />About me</a
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button v-umami="{ name: 'Navbar-Projects', mobile: true }">
|
||||
<a href="/projects">
|
||||
<Icon name="catppuccin:folder" class="text-2xl" />Projects</a
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
<!-- it looks close enough to a ring -->
|
||||
<li>
|
||||
<button v-umami="{ name: 'Navbar-Buttons', mobile: true }">
|
||||
<a href="/buttons"
|
||||
><Icon name="catppuccin:webpack" class="text-2xl" />Webrings</a
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button v-umami="{ name: 'Navbar-Contact', mobile: true }">
|
||||
<a href="/contact.html"
|
||||
><Icon name="catppuccin:readme" class="text-2xl" />Contact</a
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button v-umami="{ name: 'Navbar-Donate', mobile: true }">
|
||||
<a href="/donate.html">
|
||||
<Icon name="catppuccin:certificate" class="text-2xl" />
|
||||
Donate</a
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn btn-ghost text-xl" href="./">saahild.com</a>
|
||||
</div>
|
||||
<!-- <div class="navbar-center hidden lg:flex">
|
||||
|
||||
</div> -->
|
||||
<div class="navbar-end">
|
||||
<ul class="menu menu-horizontal px-1 hidden lg:flex">
|
||||
<li>
|
||||
<button v-umami="{ name: 'Navbar-About' }">
|
||||
<a href="/about">
|
||||
<Icon name="catppuccin:text" class="text-2xl" />About me</a
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button v-umami="{ name: 'Navbar-Projects' }">
|
||||
<a href="/projects">
|
||||
<Icon name="catppuccin:folder" class="text-2xl" />Projects</a
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
<!-- it looks close enough to a ring -->
|
||||
<li>
|
||||
<button v-umami="{ name: 'Navbar-Buttons' }">
|
||||
<a href="/buttons"
|
||||
><Icon name="catppuccin:webpack" class="text-2xl" />Webrings</a
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button v-umami="{ name: 'Navbar-Contact' }">
|
||||
<a href="/contact.html"
|
||||
><Icon name="catppuccin:readme" class="text-2xl" />Contact</a
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button v-umami="{ name: 'Navbar-Donate' }">
|
||||
<a href="/donate.html">
|
||||
<Icon name="catppuccin:certificate" class="text-2xl" />
|
||||
Donate</a
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
99
components/ProjectGrid.vue
Normal file
99
components/ProjectGrid.vue
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
|
||||
<div
|
||||
v-for="project in projects"
|
||||
:key="project.id"
|
||||
class="card bg-base-100 shadow-xl"
|
||||
>
|
||||
<img
|
||||
:src="project.image"
|
||||
v-if="project.image"
|
||||
alt="cover img"
|
||||
class="w-full h-48 object-cover rounded-t-lg"
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{{ project.title }}</h2>
|
||||
<p>{{ project.description }}</p>
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<span
|
||||
v-for="lang in project.languages"
|
||||
:key="lang"
|
||||
class="badge badge-outline"
|
||||
>
|
||||
<Icon :name="`catppuccin:${lang}`" class="text-xl" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-actions justify-end">
|
||||
<!-- <button class="btn btn-primary">View</button> -->
|
||||
<a :href="project.repo" target="_blank" class="btn btn-primary"
|
||||
><Icon name="catppuccin:git" class="text-2xl" />
|
||||
</a>
|
||||
<a
|
||||
v-if="project.demoURL"
|
||||
:href="project.demoURL"
|
||||
target="_blank"
|
||||
class="btn btn-secondary"
|
||||
><Icon name="catppuccin:azure-pipelines" class="text-2xl"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const projects = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Zeon",
|
||||
description: `Zeon is my personal assistant who does many tasks and is split between a foss source code (slack bot) and a closed source discord bot which both parts of this source code does:\n- Weather / news updates\n- Calandar managment\n- Automation of sms\n- Email routing\n- Github linting / handling
|
||||
- Blind mail
|
||||
- sticky messages (stays at the bottom of the channel)
|
||||
- Hackclub shipment viewer
|
||||
- bday syste1m
|
||||
- d20 dice system
|
||||
- poll's (comming soon)
|
||||
- high seas lb tracker
|
||||
- zeon tags
|
||||
- #whats-my-slack-id
|
||||
- advent of code priv lb tracker (not active rn since no aoc)
|
||||
- hangman
|
||||
- hackclub cdn
|
||||
- CTF (comming soon)
|
||||
- high seas shop
|
||||
- hackatime tracker (personal)
|
||||
- how was your day (personal)
|
||||
- code watcher (personal)
|
||||
- spotify and jellyfin status in slack (personal)
|
||||
- irl status (personal)
|
||||
- Many other features which are mostly personal
|
||||
|
||||
There is more comming soon but he is one of my oldest projects and has a total of more then 140h+ worked on the source code!
|
||||
`,
|
||||
languages: ["typescript", "javascript"],
|
||||
repo: "https://github.com/NeonGamerBot-QK/slack-zeon",
|
||||
image:
|
||||
"https://saahild.com/zeon/static/media/logo.496b486aab466e923154.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Brown washing machines",
|
||||
description: `This project isnt some heavy hour project, it is more of a creative project, for the fun of the game! this was made mostly in a laundry rooma nd a little bit in my dorm room, this code focus's on sending updates for the washers and dryers for when they are done, which dryer should you use next, and updates every 30 mins for the statistics on each machine! this was very useful for checking should i go down to the basement or check later ;p`,
|
||||
repo: `https://github.com/NeonGamerBot-QK/brown-washer`,
|
||||
languages: ["javascript"],
|
||||
demoURL: `https://groupme.com/join_group/108636619/OOnFnTdg`,
|
||||
image:
|
||||
"https://raw.githubusercontent.com/NeonGamerBot-QK/brown-washer/refs/heads/master/groupme.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Signal App",
|
||||
description: `This is a project i am working on which lets you use the signal as a web app, it has 19h+ of work and i plan to work on it more until its done (may take a while). I will try to implement all the features that the desktop app has to its fullest (wtv signal-cli lets me reach to)`,
|
||||
languages: ["nuxt"],
|
||||
repo: "https://github.com/NeonGamerBot-QK/signal-app",
|
||||
demoURL: "https://signal-app-demo.saahild.com/",
|
||||
image:
|
||||
"https://raw.githubusercontent.com/NeonGamerBot-QK/signal-app/refs/heads/master/screenshot.png",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
9
components/SnakeGrid.vue
Normal file
9
components/SnakeGrid.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<!-- peak code -->
|
||||
<template>
|
||||
<div class="ml-10">
|
||||
<h2 class="font-bold text-2xl ml-3">Snake activity graph:</h2>
|
||||
<img
|
||||
src="https://raw.githubusercontent.com/NeonGamerBot-QK/NeonGamerBot-QK/output/github-contribution-grid-snake.svg"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
name: <your project name>
|
||||
services:
|
||||
<to-change-here>:
|
||||
ports:
|
||||
- 3000:80
|
||||
container_name: saahildcom
|
||||
image: <to-change-here>:latest
|
||||
5
eslint.config.mjs
Normal file
5
eslint.config.mjs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// @ts-check
|
||||
import withNuxt from "./.nuxt/eslint.config.mjs";
|
||||
|
||||
export default withNuxt();
|
||||
// Your custom configs here
|
||||
8
justfile
8
justfile
|
|
@ -1,8 +0,0 @@
|
|||
run:
|
||||
yarn start
|
||||
|
||||
build:
|
||||
yarn build
|
||||
|
||||
install:
|
||||
yarn install
|
||||
28
lib/jsscripts/changing_title.ts
Normal file
28
lib/jsscripts/changing_title.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
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);
|
||||
}
|
||||
// runTitle()
|
||||
14
lib/jsscripts/index.ts
Normal file
14
lib/jsscripts/index.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { startingLog } from "./log";
|
||||
import { runTitle } from "./changing_title";
|
||||
import { injectOneko } from "./oneko";
|
||||
|
||||
if (process.client) {
|
||||
// DOM-related logic here
|
||||
// onMounted(() => {
|
||||
startingLog();
|
||||
runTitle();
|
||||
|
||||
injectOneko();
|
||||
|
||||
// });
|
||||
}
|
||||
20
lib/jsscripts/log.ts
Normal file
20
lib/jsscripts/log.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export 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",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,8 @@
|
|||
// oneko.js: https://github.com/adryd325/oneko.js
|
||||
|
||||
export function injectOneko() {
|
||||
const isReducedMotion = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
|
||||
const isReducedMotion =
|
||||
window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
|
||||
|
||||
if (isReducedMotion) return;
|
||||
|
||||
|
|
@ -17,7 +18,7 @@ export function injectOneko() {
|
|||
|
||||
let frameCount = 0;
|
||||
let idleTime = 0;
|
||||
let idleAnimation:any = null;
|
||||
let idleAnimation: any = null;
|
||||
let idleAnimationFrame = 0;
|
||||
|
||||
const nekoSpeed = 10;
|
||||
|
|
@ -96,10 +97,10 @@ export function injectOneko() {
|
|||
nekoEl.style.top = `${nekoPosY - 16}px`;
|
||||
nekoEl.style.zIndex = "99999999";
|
||||
|
||||
let nekoFile = "https://saahild.com/oneko.gif"
|
||||
const curScript = document.currentScript
|
||||
let nekoFile = "https://saahild.com/oneko.gif";
|
||||
const curScript = document.currentScript;
|
||||
if (curScript && curScript.dataset.cat) {
|
||||
nekoFile = curScript.dataset.cat
|
||||
nekoFile = curScript.dataset.cat;
|
||||
}
|
||||
nekoEl.style.backgroundImage = `url(${nekoFile})`;
|
||||
|
||||
|
|
@ -113,7 +114,7 @@ export function injectOneko() {
|
|||
window.requestAnimationFrame(onAnimationFrame);
|
||||
}
|
||||
|
||||
let lastFrameTimestamp: any ;
|
||||
let lastFrameTimestamp: any;
|
||||
|
||||
function onAnimationFrame(timestamp: any) {
|
||||
// Stops execution if the neko element is removed from DOM
|
||||
|
|
@ -124,8 +125,8 @@ export function injectOneko() {
|
|||
lastFrameTimestamp = timestamp;
|
||||
}
|
||||
if (timestamp - lastFrameTimestamp > 100) {
|
||||
lastFrameTimestamp = timestamp
|
||||
frame()
|
||||
lastFrameTimestamp = timestamp;
|
||||
frame();
|
||||
}
|
||||
window.requestAnimationFrame(onAnimationFrame);
|
||||
}
|
||||
|
|
@ -165,7 +166,7 @@ export function injectOneko() {
|
|||
}
|
||||
idleAnimation =
|
||||
avalibleIdleAnimations[
|
||||
Math.floor(Math.random() * avalibleIdleAnimations.length)
|
||||
Math.floor(Math.random() * avalibleIdleAnimations.length)
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -206,9 +207,9 @@ export function injectOneko() {
|
|||
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 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`;
|
||||
|
|
@ -222,7 +223,7 @@ export function injectOneko() {
|
|||
}
|
||||
}
|
||||
|
||||
const style = document.createElement('style');
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes heartBurst {
|
||||
0% { transform: scale(0); opacity: 1; }
|
||||
|
|
@ -238,7 +239,7 @@ export function injectOneko() {
|
|||
`;
|
||||
|
||||
document.head.appendChild(style);
|
||||
nekoEl.addEventListener('click', explodeHearts);
|
||||
nekoEl.addEventListener("click", explodeHearts);
|
||||
|
||||
function frame() {
|
||||
frameCount += 1;
|
||||
|
|
@ -283,5 +284,5 @@ export function injectOneko() {
|
|||
}
|
||||
|
||||
export function stopOneko() {
|
||||
return document.getElementById('oneko')?.remove()
|
||||
}
|
||||
return document.getElementById("oneko")?.remove();
|
||||
}
|
||||
36
nuxt.config.ts
Normal file
36
nuxt.config.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import tailwindcss from "@tailwindcss/vite";
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: "2025-05-15",
|
||||
devtools: { enabled: true },
|
||||
target: "static",
|
||||
// make static output
|
||||
ssr: true,
|
||||
nitro: {
|
||||
preset: "static",
|
||||
},
|
||||
modules: [
|
||||
"@nuxt/eslint",
|
||||
"@nuxt/fonts",
|
||||
"@nuxt/icon",
|
||||
"@nuxt/image",
|
||||
"nuxt-umami",
|
||||
],
|
||||
umami: {
|
||||
id: "ee9a2efa-f5af-496f-8e37-b8fe9e1e8ec2",
|
||||
host: "https://cloud.umami.is",
|
||||
autoTrack: true,
|
||||
// proxy: 'cloak',
|
||||
useDirective: true,
|
||||
ignoreLocalhost: false,
|
||||
// excludeQueryParams: false,
|
||||
// domains: ['cool-site.app', 'my-space.site'],
|
||||
// customEndpoint: '/my-custom-endpoint',
|
||||
// enabled: false,
|
||||
logErrors: true,
|
||||
},
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
css: ["~/assets/app.css"],
|
||||
});
|
||||
18100
package-lock.json
generated
18100
package-lock.json
generated
File diff suppressed because it is too large
Load diff
72
package.json
72
package.json
|
|
@ -1,58 +1,30 @@
|
|||
{
|
||||
"name": "saahild.com",
|
||||
"version": "0.1.0",
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@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"
|
||||
},
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build:react": "react-scripts build",
|
||||
"build": "bun run scripts/build.ts",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
"dependencies": {
|
||||
"@nuxt/eslint": "1.4.1",
|
||||
"@nuxt/fonts": "0.11.4",
|
||||
"@nuxt/icon": "1.13.0",
|
||||
"@nuxt/image": "1.10.0",
|
||||
"@tailwindcss/vite": "^4.1.10",
|
||||
"better-sqlite3": "^11.10.0",
|
||||
"daisyui": "^5.0.43",
|
||||
"eslint": "^9.0.0",
|
||||
"nuxt": "^3.17.5",
|
||||
"nuxt-umami": "3.2.0",
|
||||
"tailwindcss": "^4.1.10",
|
||||
"vue": "^3.5.16",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/ackee-tracker": "^5.0.4",
|
||||
"@types/react-animate-on-scroll": "^2.1.8",
|
||||
"daisyui": "^4.12.2",
|
||||
"tailwindcss": "^3.4.4"
|
||||
"@iconify-json/catppuccin": "^1.2.11"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
60
pages/about.vue
Normal file
60
pages/about.vue
Normal file
File diff suppressed because one or more lines are too long
245
pages/buttons.vue
Normal file
245
pages/buttons.vue
Normal file
File diff suppressed because one or more lines are too long
3
pages/index.vue
Normal file
3
pages/index.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<BigTextMain />
|
||||
</template>
|
||||
9
pages/projects.vue
Normal file
9
pages/projects.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<!-- zeon, https://github.com/NeonGamerBot-QK/brown-washer, https://github.com/NeonGamerBot-QK/signal-app -->
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="font-bold text-2xl text-center mt-5">My projects</h1>
|
||||
<div class="">
|
||||
<ProjectGrid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
12112
pnpm-lock.yaml
generated
12112
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
25
public/_canary.txt
Normal file
25
public/_canary.txt
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
Hi im saahil (also known as Neon, neongamerbot)
|
||||
|
||||
I own saahild.com which can be verified by running:
|
||||
dig -t txt +short _canary_verf.saahild.com
|
||||
|
||||
which will return: ownedbyneon
|
||||
|
||||
I am alive with a beating heart and am not a robot.
|
||||
|
||||
I am under the control of the PGP key with the fingerprint: FDE995C28C7EE56337643A768A8B64515254CFC6
|
||||
|
||||
You can fetch my key by running:
|
||||
gpg --keyserver hkps://keys.openpgp.org --recv-keys FDE995C28C7EE56337643A768A8B64515254CFC6
|
||||
|
||||
You can also find it on https://saahild.com/creds/public.pgp.txt
|
||||
|
||||
Today is June 30th 2025.
|
||||
|
||||
I will attempt to reverify this message within the next 90 days.
|
||||
This message is signed with my PGP key. You can verify it by running:
|
||||
|
||||
gpg --keyserver hkps://keys.openpgp.org --recv-keys FDE995C28C7EE56337643A768A8B64515254CFC6
|
||||
gpg --verify canary.txt
|
||||
|
||||
It should return with "Good signature" proving this message is valid and not tampered with.
|
||||
42
public/canary.txt
Normal file
42
public/canary.txt
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
-----BEGIN PGP SIGNED MESSAGE-----
|
||||
Hash: SHA256
|
||||
|
||||
Hi im saahil (also known as Neon, neongamerbot)
|
||||
|
||||
I own saahild.com which can be verified by running:
|
||||
dig -t txt +short _canary_verf.saahild.com
|
||||
|
||||
which will return: ownedbyneon
|
||||
|
||||
I am alive with a beating heart and am not a robot.
|
||||
|
||||
I am under the control of the PGP key with the fingerprint: FDE995C28C7EE56337643A768A8B64515254CFC6
|
||||
|
||||
You can fetch my key by running:
|
||||
gpg --keyserver hkps://keys.openpgp.org --recv-keys FDE995C28C7EE56337643A768A8B64515254CFC6
|
||||
|
||||
You can also find it on https://saahild.com/creds/public.pgp.txt
|
||||
|
||||
Today is June 30th 2025.
|
||||
|
||||
I will attempt to reverify this message within the next 90 days.
|
||||
This message is signed with my PGP key. You can verify it by running:
|
||||
|
||||
gpg --keyserver hkps://keys.openpgp.org --recv-keys FDE995C28C7EE56337643A768A8B64515254CFC6
|
||||
gpg --verify canary.txt
|
||||
|
||||
It should return with "Good signature" proving this message is valid and not tampered with.
|
||||
-----BEGIN PGP SIGNATURE-----
|
||||
|
||||
iQGzBAEBCAAdFiEE/emVwox+5WM3ZDp2iotkUVJUz8YFAmhiGvUACgkQiotkUVJU
|
||||
z8YOsQv9HORswgdlmxsOKGIj4oi3j5kcZ4CxmRdEbmVuevJfKHGnqiMGeXd45riT
|
||||
b/4cQJ5WBfUXnby5rk8ums1QobNBUUa6YKpeM5UOoiCryJqQVABsws3jucfalWdl
|
||||
XtT6WipAbd2pVEpvIKeEtRqKJHRMl9iBlmJLXqjroT12IiIA3r9WsCdPBVQqFdvF
|
||||
9GfotOongVcjR1W7i6/aqj352bmjHSnaZE3WyBvUSPZvC1KjiljRP4QbOa1r46NO
|
||||
HlZ18pLUtMPHthGH+pcFWBCdd7BFgFWMxkw9goZx6Q1f5zGRLbWt4nBLJcRcenPF
|
||||
mXTOfxBDFC6I0k1TxGydkKzd6oDylZIf4pJ+6Djob7vuPFUcbxk/+IIqYfQXoV7o
|
||||
ujNKEooJ62/PF2b7Jdps3UrpTSxPsoWKYSDQfI3yYm8C/igh9U6U/f/0FRukte6O
|
||||
6DshJMxJtJ60Cz4dWWlmk5VeR5APuYXzChJcYc5of5ZaiI8QTdsRkOxCojqe61fz
|
||||
f6Ja7UY0
|
||||
=nCnG
|
||||
-----END PGP SIGNATURE-----
|
||||
|
|
@ -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>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
"name": "My Site saahild.com",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.png",
|
||||
"src": "neonspfp.png",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/png"
|
||||
}
|
||||
|
|
|
|||
BIN
public/neonspfp.png
Normal file
BIN
public/neonspfp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
|
|
@ -1,3 +1,2 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
User-Agent: *
|
||||
Disallow:
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 604 KiB After Width: | Height: | Size: 1.4 MiB |
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
with import <nixpkgs> {};
|
||||
stdenv.mkDerivation {
|
||||
name = "react-bootstrap-shell";
|
||||
buildInputs = with pkgs; [
|
||||
nodePackages.create-react-app
|
||||
nodejs
|
||||
yarn
|
||||
];
|
||||
}
|
||||
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'
|
||||
}}
|
||||
/>
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue