mirror of
https://github.com/Snigdha-OS/Snigdha-OS.github.io.git
synced 2025-09-05 20:26:43 +02:00
🧹 chore(astro): astro build
This commit is contained in:
Eshan Roy (Eshanized)
27
.gitignore
vendored
27
.gitignore
vendored
@@ -1,8 +1,21 @@
|
||||
node_modules
|
||||
*.log*
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
.output
|
||||
# build output
|
||||
dist/
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
dist
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
LICENSE
21
LICENSE
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 Álex Rueda
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
112
README.md
112
README.md
@@ -1,86 +1,54 @@
|
||||
<h1 align="center">
|
||||
developer-portfolio-v2
|
||||
</h1>
|
||||
<p align="center">
|
||||
The first open source version of <a href="https://www.figma.com/community/file/1100794861710979147" target="_blank"> Portfolio for Developers Concept V.2</a>, designed by <a href="https://www.behance.net/darelova" target="_blank">@darelova</a> and developed by <a href="https://github.com/alexdeploy">@alexdeploy</a>. Built with <a href="https://nuxt.com/" target="_blank">Nuxt.js 3.0</a> and hosted with <a href="https://www.netlify.com/" target="_blank">Netlify</a>.
|
||||
</p>
|
||||
<div align="center">
|
||||
# Starlight Starter Kit: Basics
|
||||
|
||||
[](https://app.netlify.com/sites/developer-portfolio-v2/deploys)
|
||||
[](https://starlight.astro.build)
|
||||
|
||||
</div>
|
||||
|
||||
<p align="center">
|
||||
<a href="" target="_blank">
|
||||
<img src="./public/images/demo-share.png" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## 🚨 Forking this repo
|
||||
|
||||
Feel free to fork this repository and make it your own! You can use it as a starting point for your own portfolio website. However, please note that the effort and time deserves to be recognized and *plagiarism is a bad practice*. If you use this project, we would greatly appreciate it if you give credits to the designer <a href="https://www.behance.net/darelova" target="_blank">@darelova</a> and the developer <a href="https://github.com/alexdeploy">@alexdeploy</a>, or linking <a href="https://github.com/alexdeploy/developer-portfolio-v2">this repo</a>.
|
||||
|
||||
Thanks 🤘 and enjoy it!
|
||||
|
||||
## 🛠 Installation
|
||||
|
||||
1. Clone the project to your local machine.
|
||||
|
||||
```sh
|
||||
git clone https://github.com/alexdeploy/developer-portfolio-v2.git
|
||||
```
|
||||
npm create astro@latest -- --template starlight
|
||||
```
|
||||
|
||||
2. Navigate to the project directory
|
||||
[](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
|
||||
|
||||
```sh
|
||||
cd developer-portfolio-v2
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro + Starlight project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
.
|
||||
├── public/
|
||||
├── src/
|
||||
│ ├── assets/
|
||||
│ ├── content/
|
||||
│ │ ├── docs/
|
||||
│ │ └── config.ts
|
||||
│ └── env.d.ts
|
||||
├── astro.config.mjs
|
||||
├── package.json
|
||||
└── tsconfig.json
|
||||
```
|
||||
|
||||
3. Install the required dependencies
|
||||
Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
|
||||
|
||||
```sh
|
||||
yarn
|
||||
```
|
||||
Images can be added to `src/assets/` and embedded in Markdown with a relative link.
|
||||
|
||||
4. Start the development server
|
||||
Static assets, like favicons, can be placed in the `public/` directory.
|
||||
|
||||
```sh
|
||||
yarn dev
|
||||
```
|
||||
## 🧞 Commands
|
||||
|
||||
5. The development server should now be running on <a href="http://localhost:3000/">http://localhost:3000/</a>
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## ✒️ Customization
|
||||
## 👀 Want to learn more?
|
||||
|
||||
The portfolio template includes some default content, but you can easily customize it to fit your needs. Here are some of the things you can change:
|
||||
|
||||
* Update the `developer.json` file on root directory, which contains all the text for the project and the portfolio "user" information, including *projects*, *about-me*, *gists* (Ids) and *contact* info.
|
||||
|
||||
* Update the `nuxt.config.ts` file for meta tags of website and some additional config.
|
||||
|
||||
* Update the `public/pwa/manifest.json` file for PWA config.
|
||||
|
||||
* Change the styling and design of the website to match your personal style.
|
||||
|
||||
## 🚀 Building and Running for Production
|
||||
|
||||
1. Generate a full static production build
|
||||
|
||||
```sh
|
||||
yarn build
|
||||
```
|
||||
|
||||
2. Preview the site as it will appear once deployed.
|
||||
|
||||
```sh
|
||||
yarn preview
|
||||
```
|
||||
|
||||
## Contributions
|
||||
|
||||
If you find any bugs or have any suggestions, you can open an <a href="https://github.com/alexdeploy/developer-portfolio-v2/issues">issue</a>.
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the MIT License. See the <a href="https://github.com/alexdeploy/developer-portfolio-v2/blob/main/LICENSE">LICENSE</a> file for more information.
|
||||
Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
/*
|
||||
* Nuxt 3 Config File
|
||||
* https://nuxt.com/docs/getting-started/configuration#app-configuration
|
||||
*/
|
||||
export default defineAppConfig({
|
||||
title: 'Hello Nuxt',
|
||||
blog:{
|
||||
enabled: true,
|
||||
},
|
||||
theme: {
|
||||
dark: true,
|
||||
colors: {
|
||||
primary: '#ff0000'
|
||||
}
|
||||
}
|
||||
})
|
||||
46
app.vue
46
app.vue
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<MobileMenu/>
|
||||
<AppHeader/>
|
||||
<NuxtPage data-aos="fade-in"/>
|
||||
<AppFooter/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AOS from 'aos';
|
||||
import 'aos/dist/aos.css'; // You can also use <link> for styles
|
||||
export default {
|
||||
/**
|
||||
* * Watch for route changes
|
||||
* This event is triggered when the route changes.
|
||||
* @param {Object} to - Route object
|
||||
* @param {Object} from - Route object
|
||||
*/
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
console.log('De', from.fullPath, 'a', to.fullPath);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
AOS.init({
|
||||
// Global settings:
|
||||
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
|
||||
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
|
||||
initClassName: 'aos-init', // class applied after initialization
|
||||
animatedClassName: 'aos-animate', // class applied on animation
|
||||
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
|
||||
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
|
||||
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
|
||||
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
|
||||
|
||||
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
|
||||
offset: 120, // offset (in px) from the original trigger point
|
||||
delay: 0, // values from 0 to 3000, with step 50ms
|
||||
duration: 400, // values from 0 to 3000, with step 50ms
|
||||
easing: 'ease', // default easing for AOS animations
|
||||
once: false, // whether animation should happen only once - while scrolling down
|
||||
mirror: false, // whether elements should animate out while scrolling past them
|
||||
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,20 +0,0 @@
|
||||
# `assets/` Directory
|
||||
|
||||
Nuxt uses **Vite** or **webpack** to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through plugins (for Vite) or loaders (for webpack) to process other kind of assets, like stylesheets, fonts or SVG. This step transforms the original file mainly for performance or caching purposes (such as stylesheets minification or browser cache invalidation).
|
||||
|
||||
By convention, Nuxt uses the `assets/` directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
|
||||
|
||||
In your application's code, you can reference a file located in the `assets/` directory by using the `~/assets/ path`.
|
||||
|
||||
## Example
|
||||
|
||||
For example, referencing an image file that will be processed if a build tool is configured to handle this file extension:
|
||||
|
||||
*app.vue*
|
||||
````html
|
||||
<template>
|
||||
<img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
|
||||
</template>
|
||||
````
|
||||
|
||||
>> Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the `public/` directory.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,327 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
h3, h2 {
|
||||
/* @apply font-fira_retina; */
|
||||
font-family: 'Fira Code Retina';
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply bg-dark-background;
|
||||
height: stretch;
|
||||
width: stretch;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
body {
|
||||
height: stretch;
|
||||
width: stretch;
|
||||
}
|
||||
|
||||
main.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#__nuxt {
|
||||
@apply bg-blue-background flex flex-col justify-between;
|
||||
border-radius: 7px;
|
||||
border: 1px solid #1E2D3D;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#section-content-title {
|
||||
width: 100%;
|
||||
min-height: 35px;
|
||||
border-bottom: 1px solid #1E2D3D;
|
||||
}
|
||||
|
||||
#section-content-title:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#section-content-title-contact {
|
||||
@apply cursor-pointer;
|
||||
border-bottom: 1px solid #1E2D3D;
|
||||
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
#mobile-page-title {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
height: 70px;
|
||||
color: white;
|
||||
padding: 0 25px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-arrow {
|
||||
margin-right: 10px;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
|
||||
/* MOBILE AND TABLET (SM - LG) */
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
html {
|
||||
margin: 15px;
|
||||
min-height: 100%;
|
||||
height: stretch;
|
||||
width: stretch;
|
||||
}
|
||||
|
||||
#__nuxt {
|
||||
@apply bg-blue-background flex flex-col;
|
||||
justify-content: space-between;
|
||||
height: auto;
|
||||
min-height: stretch; /* This allows the page view for mobile to be full height when the content is less than the screen height. */
|
||||
width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#page-menu, #nav-logo, #filter-menu {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
#page-menu {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#section-content-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: #1E2D3D;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.submenu .title {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
background-color: #1E2D3D;
|
||||
margin-bottom: 3px
|
||||
}
|
||||
|
||||
#left, #contact-menu {
|
||||
border-right: 0px;
|
||||
}
|
||||
|
||||
/* contact */
|
||||
#contact-me #left {
|
||||
padding: 35px 25px;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
footer {
|
||||
height: 50px;
|
||||
min-height: 50px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
#social-icons > a {
|
||||
width: 55px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* LG - XL */
|
||||
@media (min-width: 1024px) {
|
||||
#page-menu, #nav-logo, #filter-menu {
|
||||
min-width: 275px !important;
|
||||
max-width: 275px !important;
|
||||
}
|
||||
|
||||
#page-menu, #filter-menu {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#commented-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#mobile-page-title {
|
||||
display: none;
|
||||
}
|
||||
/* contact */
|
||||
#contact-me #left {
|
||||
padding: 50px 25px 0px 25px;
|
||||
}
|
||||
|
||||
#contact-form {
|
||||
max-width: 220px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
/* 2XL */
|
||||
@media (min-width: 1536px) {
|
||||
|
||||
}
|
||||
|
||||
/* 2K */
|
||||
@media (min-width: 1920px) {
|
||||
|
||||
|
||||
#page-menu, #nav-logo, #filter-menu {
|
||||
min-width: 310px !important;
|
||||
max-width: 310px !important;
|
||||
}
|
||||
|
||||
/* header */
|
||||
#navbar > nav {
|
||||
height: 50px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
footer {
|
||||
height: 50px;
|
||||
min-height: 50px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
#social-icons > a {
|
||||
width: 55px !important;
|
||||
}
|
||||
|
||||
#social-icons > a > svg, footer > a > svg {
|
||||
width: 1.5rem !important; /* 20px */
|
||||
height: 1.5rem !important; /* 20px */
|
||||
}
|
||||
|
||||
/* about */
|
||||
#commented-text {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
#page-menu, #filter-menu {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* contact */
|
||||
#contact-me #left {
|
||||
padding: 100px 25px 0px 25px !important;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
padding: 100px 100px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Mobile min view to tablet max view (width: 0 to 1020)
|
||||
*/
|
||||
@media screen (max-width: 1020px) {
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Tablet min view to desktop medium view (width: 1020 to 1920) (height: 0 to 1080)
|
||||
*/
|
||||
@media screen (min-width: 1020px) and (max-width: 1920px) and (max-height: 1080px) {
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Desktop medium view to desktop max view (width: 1920 to infinte) (height: 1080 to infinite)
|
||||
*/
|
||||
@media screen (min-width: 1920px) and (min-height: 1080px) {
|
||||
|
||||
}
|
||||
|
||||
/* Borders */
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid #1E2D3D;
|
||||
}
|
||||
|
||||
.border-right {
|
||||
border-right: 1px solid #1E2D3D;
|
||||
}
|
||||
|
||||
.border-bot {
|
||||
border-bottom: 1px solid #1E2D3D;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
border-left: 1px solid #1E2D3D;
|
||||
}
|
||||
|
||||
/* Scroll bar */
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 20px;
|
||||
border-left: 1px solid #1E2D3D;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #607B96;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #7B9BBB;
|
||||
}
|
||||
|
||||
/* Fonts */
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code Light";
|
||||
src: url("./fonts/fira-code/FiraCode-Light.ttf") format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code Regular";
|
||||
src: url("./fonts/fira-code/FiraCode-Regular.ttf") format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code Retina";
|
||||
src: url("./fonts/fira-code/FiraCode-Retina.ttf") format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code Medium";
|
||||
src: url("./fonts/fira-code/FiraCode-Medium.ttf") format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code SemiBold";
|
||||
src: url("./fonts/fira-code/FiraCode-SemiBold.ttf") format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code Bold";
|
||||
src: url("./fonts/fira-code/FiraCode-Bold.ttf") format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code Variable";
|
||||
src: url("./fonts/fira-code/FiraCode-Variable.ttf") format('truetype');
|
||||
}
|
||||
27
astro.config.mjs
Normal file
27
astro.config.mjs
Normal file
@@ -0,0 +1,27 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
import starlight from '@astrojs/starlight';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
starlight({
|
||||
title: 'My Docs',
|
||||
social: {
|
||||
github: 'https://github.com/withastro/starlight',
|
||||
},
|
||||
sidebar: [
|
||||
{
|
||||
label: 'Guides',
|
||||
items: [
|
||||
// Each item here is one entry in the navigation menu.
|
||||
{ label: 'Example Guide', link: '/guides/example/' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Reference',
|
||||
autogenerate: { directory: 'reference' },
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
});
|
||||
@@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<footer class='flex md:justify-between border-top text-menu-text font-fira_retina'>
|
||||
|
||||
<!-- social icons -->
|
||||
<div class="w-full flex justify-between md:justify-start">
|
||||
<span id="social-title" class="h-full flex justify-center items-center border-right px-5">
|
||||
find me in:
|
||||
</span>
|
||||
<div id="social-icons" class="flex">
|
||||
<NuxtLink :to="social.twitter.url + social.twitter.user" target="_blank" class="flex justify-center items-center">
|
||||
<img src="/icons/social/twitter.svg"/>
|
||||
</NuxtLink>
|
||||
<NuxtLink :to="social.facebook.url + social.facebook.user" target="_blank" class="flex justify-center items-center">
|
||||
<img src="/icons/social/facebook.svg"/>
|
||||
</NuxtLink>
|
||||
<NuxtLink :to="social.github.url + social.github.user" target="_blank" class="flex md:hidden justify-center items-center">
|
||||
<img src="/icons/social/github.svg"/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- github user -->
|
||||
<NuxtLink :to="social.github.url + social.github.user" target="_blank" class="hidden md:flex items-center px-5 border-left">
|
||||
@{{ social.github.user }}
|
||||
<img src="/icons/social/github.svg"/>
|
||||
</NuxtLink>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
footer {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
background-color: #1e2d3d74;
|
||||
}
|
||||
|
||||
#social-icons > a {
|
||||
border-right: 1px solid #1E2D3D;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#social-icons > a > img {
|
||||
width: 1.25rem; /* 20px */
|
||||
height: 1.25rem; /* 20px */
|
||||
margin: auto;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
footer > a > img {
|
||||
width: 1.25rem; /* 20px */
|
||||
height: 1.25rem; /* 20px */
|
||||
margin-left: 0.5rem; /* 8px */
|
||||
}
|
||||
|
||||
#social-icons > a:hover img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
#social-title {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#social-icons > a {
|
||||
border-right: none;
|
||||
border-left: 1px solid #1E2D3D;
|
||||
}
|
||||
|
||||
#social-icons > a > img {
|
||||
width: 1.5rem; /* 20px */
|
||||
height: 1.5rem; /* 20px */
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppFooter',
|
||||
data() {
|
||||
return {
|
||||
route: this.$route.path,
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
social: useRuntimeConfig().dev.contacts.social
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<header id="navbar" class="w-full hidden lg:flex flex-col">
|
||||
<nav class="w-full flex justify-between border-bot">
|
||||
<github-corner url="https://github.com/alexdeploy/developer-portfolio-v2" />
|
||||
<div class="flex">
|
||||
<NuxtLink id="nav-logo" to="/">
|
||||
{{ config.dev.logo_name }}
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink id="nav-link" to="/" :class="{ active: isActive('/') }">
|
||||
_hello
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink id="nav-link" to="/about-me" :class="{ active: isActive('/about-me') }">
|
||||
_about-me
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink id="nav-link" to="/projects" :class="{ active: isActive('/projects') }">
|
||||
_projects
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<NuxtLink id="nav-link-contact" to="/contact-me" :class="{ active: isActive('/contact-me')}">
|
||||
_contact-me
|
||||
</NuxtLink>
|
||||
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GithubCorner from './GithubCorner.vue';
|
||||
export default {
|
||||
name: 'AppHeader',
|
||||
components: {
|
||||
GithubCorner
|
||||
},
|
||||
computed: {
|
||||
// Set active class to current page link
|
||||
isActive() {
|
||||
return route => this.$route.path === route;
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
return {
|
||||
config
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
#nav-link {
|
||||
border-right: 1px solid #1E2D3D;
|
||||
@apply text-menu-text font-fira_retina px-6 h-full flex items-center;
|
||||
}
|
||||
|
||||
#nav-link-contact {
|
||||
border-left: 1px solid #1E2D3D;
|
||||
@apply text-menu-text font-fira_retina px-6 h-full flex items-center;
|
||||
}
|
||||
|
||||
#nav-link:hover, #nav-link-contact:hover {
|
||||
background-color: #1e2d3d74;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#nav-logo {
|
||||
border-right: 1px solid #1E2D3D;
|
||||
@apply text-menu-text font-fira_retina px-6 h-full flex items-center;
|
||||
}
|
||||
|
||||
#nav-logo:hover {
|
||||
background-color: #1e2d3d74;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#nav-link.router-link-active, #nav-link-contact.router-link-active {
|
||||
border-bottom: 2px solid #FEA55F;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#nav-logo.router-link-active {
|
||||
border-right: 1px solid #1E2D3D;
|
||||
border-bottom: none;
|
||||
@apply text-menu-text;
|
||||
}
|
||||
|
||||
#navbar > nav {
|
||||
height: 45px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<div class="code-container flex font-fira_retina text-menu-text">
|
||||
<div class="line-numbers lg:flex flex-col w-32 hidden">
|
||||
|
||||
<!-- line numbers and asteriscs -->
|
||||
<div v-for="n in lines" class="grid grid-cols-2 justify-end" :key="n">
|
||||
<span class="col-span-1 mr-3">{{ n }}</span>
|
||||
<div v-if="n == 1" class="col-span-1 flex justify-center">/**</div>
|
||||
<div class="col-span-1 flex justify-center" v-if="n > 1 && n < lines">*</div>
|
||||
<div class="col-span-1 flex justify-center pl-2" v-if="n == lines">*/</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- text -->
|
||||
<div class="text-container">
|
||||
<p v-html="text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lines: 0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.updateLines();
|
||||
window.addEventListener("resize", this.updateLines);
|
||||
window.addEventListener("click", this.updateLines);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("resize", this.updateLines);
|
||||
window.removeEventListener("click", this.updateLines);
|
||||
},
|
||||
methods: {
|
||||
updateLines() {
|
||||
const textContainer = this.$el.querySelector(".text-container");
|
||||
const style = window.getComputedStyle(textContainer);
|
||||
const fontSize = parseInt(style.fontSize);
|
||||
const lineHeight = parseInt(style.lineHeight);
|
||||
const maxHeight = textContainer.offsetHeight;
|
||||
this.lines = Math.ceil(maxHeight / lineHeight) + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.code-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
@@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<form id="contact-form" class="text-sm">
|
||||
<div class="flex flex-col">
|
||||
<label for="name" class="mb-3">_name:</label>
|
||||
<input type="text" id="name-input" name="name" :placeholder="name" class="p-2 mb-5 placeholder-slate-600" required>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="email" class="mb-3">_email:</label>
|
||||
<input type="email" id="email-input" name="email" :placeholder="email" class="p-2 mb-5 placeholder-slate-600" required>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="message" class="mb-3">_message:</label>
|
||||
<textarea id="message-input" name="message" :placeholder="message" class="placeholder-slate-600" required></textarea>
|
||||
</div>
|
||||
<button id="submit-button" type="submit" class="py-2 px-4">submit-message</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'ContactForm',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
email: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.getElementById("contact-form").addEventListener("submit", function(event) {
|
||||
event.preventDefault();
|
||||
const name = document.querySelector('input[name="name"]').value;
|
||||
const email = document.querySelector('input[name="email"]').value;
|
||||
const message = document.querySelector('textarea[name="message"]').value;
|
||||
|
||||
// Here the code to send the email
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
form {
|
||||
@apply font-fira_retina text-menu-text
|
||||
}
|
||||
input {
|
||||
background-color: #011221;
|
||||
border: 2px solid #1E2D3D;
|
||||
border-radius: 7px;
|
||||
|
||||
}
|
||||
/* Change Autocomplete styles in Chrome*/
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
textarea:-webkit-autofill,
|
||||
textarea:-webkit-autofill:hover,
|
||||
textarea:-webkit-autofill:focus,
|
||||
select:-webkit-autofill,
|
||||
select:-webkit-autofill:hover,
|
||||
select:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: rgb(190, 190, 190);
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
border: 2px solid #607b96;
|
||||
}
|
||||
|
||||
#message-input {
|
||||
background-color: #011221;
|
||||
border: 2px solid #1E2D3D;
|
||||
border-radius: 7px;
|
||||
resize: none;
|
||||
height: 150px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#submit-button {
|
||||
@apply font-fira_retina text-white text-sm;
|
||||
background-color: #1E2D3D;
|
||||
border-radius: 7px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#submit-button:hover {
|
||||
background-color: #263B50;
|
||||
}
|
||||
|
||||
input:focus, #message-input:focus {
|
||||
outline: none;
|
||||
transition: none;
|
||||
border: 2px solid #607b96;
|
||||
box-shadow: #607b9669 0px 0px 0px 2px;
|
||||
}
|
||||
|
||||
#contact-form {
|
||||
max-width: 370px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1920px) {
|
||||
#contact-form {
|
||||
max-width: 320px;
|
||||
max-height: 400px;
|
||||
}
|
||||
#submit-button {
|
||||
/* width: 100%; */
|
||||
font-size: 12px;
|
||||
}
|
||||
textarea {
|
||||
font-size: 13px;
|
||||
max-height: 130px !important;
|
||||
}
|
||||
input {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,170 +0,0 @@
|
||||
<template>
|
||||
<div class="code-container flex font-fira_retina text-menu-text">
|
||||
<div class="line-numbers lg:flex flex-col w-16 hidden">
|
||||
|
||||
<!-- line numbers and asteriscs -->
|
||||
<div v-for="n in lines" class="grid grid-cols-2 justify-end" :key="n">
|
||||
<span class="col-span-1 mr-3">{{ n }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-fira_retina text-white text-container">
|
||||
<p>
|
||||
<span class="tag">
|
||||
const
|
||||
</span>
|
||||
<span class="tag-name">
|
||||
button
|
||||
</span>
|
||||
=
|
||||
<span class="tag-name">
|
||||
document.querySelector
|
||||
<span class="text-menu-text">
|
||||
(
|
||||
<span class="text-codeline-link">
|
||||
'#sendBtn'
|
||||
</span>
|
||||
);
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</p>
|
||||
<br>
|
||||
<p class="text-menu-text">
|
||||
<span class="tag">
|
||||
const
|
||||
</span>
|
||||
<span class="tag-name">
|
||||
message
|
||||
</span>
|
||||
= {
|
||||
<br>
|
||||
<span id="name" class="tag-name">
|
||||
name
|
||||
</span>
|
||||
:
|
||||
<span class="text-codeline-link">"</span>
|
||||
<span id="name-value" class="text-codeline-link">
|
||||
{{ name }}
|
||||
</span>
|
||||
<span class="text-codeline-link">"</span>
|
||||
, <br>
|
||||
<span id="email" class="tag-name">
|
||||
email
|
||||
</span>
|
||||
:
|
||||
<span class="text-codeline-link">"</span>
|
||||
<span id="email-value" class="text-codeline-link">
|
||||
{{ email }}
|
||||
</span>
|
||||
<span class="text-codeline-link">"</span>
|
||||
, <br>
|
||||
<span id="message" class="tag-name">
|
||||
message
|
||||
</span>
|
||||
:
|
||||
<span class="text-codeline-link">"</span>
|
||||
<span id="message-value" class="text-codeline-link">
|
||||
{{ message }}
|
||||
</span>
|
||||
<span class="text-codeline-link">"</span>
|
||||
, <br>
|
||||
date:
|
||||
<span class="text-codeline-link">
|
||||
"{{ date }}"
|
||||
</span>
|
||||
<br>
|
||||
}
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
<span class="tag-name">
|
||||
button.addEventListener
|
||||
|
||||
<span class="text-menu-text">
|
||||
(
|
||||
<span class="text-codeline-link">
|
||||
'click'
|
||||
</span>
|
||||
), ()
|
||||
<span class="tag">
|
||||
=>
|
||||
</span>
|
||||
{
|
||||
<br>
|
||||
</span>
|
||||
form.send
|
||||
<span class="text-menu-text">(</span>
|
||||
message
|
||||
<span class="text-menu-text">); <br> })</span>
|
||||
</span>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
date: new Date().toDateString(),
|
||||
lines: 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
email: String,
|
||||
message: String,
|
||||
},
|
||||
mounted() {
|
||||
this.updateLines();
|
||||
window.addEventListener("resize", this.updateLines);
|
||||
window.addEventListener("input", this.updateLines);
|
||||
window.addEventListener("click", this.updateLines);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("resize", this.updateLines);
|
||||
window.removeEventListener("click", this.updateLines);
|
||||
window.addEventListener("input", this.updateLines);
|
||||
},
|
||||
methods: {
|
||||
updateLines() {
|
||||
const textContainer = this.$el.querySelector(".text-container");
|
||||
const style = window.getComputedStyle(textContainer);
|
||||
const fontSize = parseInt(style.fontSize);
|
||||
const lineHeight = parseInt(style.lineHeight);
|
||||
const maxHeight = textContainer.offsetHeight;
|
||||
this.lines = Math.ceil(maxHeight / lineHeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tag {
|
||||
color: #C98BDF;
|
||||
}
|
||||
|
||||
.tag-name{
|
||||
color: #5565E8;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: #F8F8F8;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
@@ -1,169 +0,0 @@
|
||||
<template>
|
||||
<div class="gist mb-5" v-if="dataFetched">
|
||||
|
||||
<!-- head info -->
|
||||
<div class="flex justify-between my-2">
|
||||
|
||||
<div class="flex">
|
||||
<!-- avatar -->
|
||||
<img :src="gist.owner.avatar_url" alt="" class="w-8 h-8 rounded-full mr-2">
|
||||
|
||||
<!-- username & gist date info -->
|
||||
<div class="flex flex-col">
|
||||
<a id="username" :href="'https://github.com/' + gist.owner.login" target="_blank" class="font-fira_bold text-purple-text text-xs pb-1 hover:cursor-pointer">
|
||||
@{{ gist.owner.login }}
|
||||
</a>
|
||||
<p class="font-fira_retina text-xs text-menu-text">Created {{ monthsAgo }} months ago</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- details and stars -->
|
||||
<div class="flex text-menu-text font-fira_retina text-xs justify-self-end lg:mx-2">
|
||||
<div class="flex lg:mx-2 hover:cursor-pointer hover:text-white">
|
||||
<img src="/icons/gist/comments.svg" alt="" class="w-4 h-4 mr-2">
|
||||
<span @click="showComment(gist.id)">details</span>
|
||||
</div>
|
||||
<div class="hidden lg:flex hover:cursor-pointer hover:text-white">
|
||||
<img src="/icons/gist/star.svg" alt="" class="w-4 h-4 mx-2">
|
||||
<span class="">stars</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<highlightjs class="snippet-container" :code="content"/>
|
||||
<div :id="'comment' + gist.id" class="flex hidden justify-between text-menu-text font-fira_retina mt-4 pt-4 border-top">
|
||||
<p id="comment" v-if="comment" class="w-5/6">{{ comment }}</p>
|
||||
<p v-else class="w-5/6">No comments.</p>
|
||||
<img src="/icons/close.svg" alt="" class="hover:cursor-pointer" @click="showComment(gist.id)">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.snippet-container {
|
||||
background-color: #011221;
|
||||
padding: 5px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid #1E2D3D;
|
||||
font-size: 12px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: scroll;
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
.snippet-container pre {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
.snippet-container code {
|
||||
white-space: pre-wrap;
|
||||
max-height: 220px;
|
||||
width: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.snippet-container::-webkit-scrollbar {
|
||||
display: none; /* Safari and Chrome */
|
||||
}
|
||||
|
||||
pre code.hljs{
|
||||
display:block;
|
||||
/* overflow-x:auto; */
|
||||
padding:1.5em
|
||||
}
|
||||
|
||||
code.hljs{
|
||||
padding:3px 5px
|
||||
}
|
||||
|
||||
#comment {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#username:hover {
|
||||
color: #5e6ef2;
|
||||
}
|
||||
|
||||
/* #comment {
|
||||
|
||||
} */
|
||||
|
||||
.hljs{color:#607B96;background:#011221}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
import hljsVuePlugin from "@highlightjs/vue-plugin";
|
||||
import 'highlight.js/lib/common';
|
||||
|
||||
export default {
|
||||
name: 'GistSnippet',
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
gist: null,
|
||||
monthsAgo: null,
|
||||
content: null,
|
||||
language: null,
|
||||
dataFetched: false,
|
||||
comment: null
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
fetch(`https://api.github.com/gists/${this.id}`)
|
||||
.then(response => response.json())
|
||||
.then(data => this.setValues(data))
|
||||
|
||||
},
|
||||
methods: {
|
||||
async setValues(gist) {
|
||||
this.gist = gist
|
||||
this.monthsAgo = this.setMonths(gist.created_at)
|
||||
this.content = this.setSnippet(gist)
|
||||
this.language = Object.values(gist.files)[0].language
|
||||
this.dataFetched = true
|
||||
this.comment = await this.setComments(gist.comments_url)
|
||||
},
|
||||
setMonths(date) {
|
||||
let now = new Date()
|
||||
let gistDate = new Date(date)
|
||||
let diff = now.getTime() - gistDate.getTime()
|
||||
let days = Math.floor(diff / (1000 * 3600 * 24))
|
||||
let months = Math.floor(days / 30)
|
||||
return months
|
||||
},
|
||||
setSnippet(gist) {
|
||||
let snippet = Object.values(gist.files)[0].content // Object.values(gist.files)[0].filename.content
|
||||
return snippet
|
||||
},
|
||||
async setComments(comments_url){
|
||||
let response = await fetch(comments_url)
|
||||
let data = await response.json()
|
||||
try{
|
||||
let body = data[0].body
|
||||
return body
|
||||
} catch {
|
||||
console.log(`no comments found on ${comments_url}`)
|
||||
}
|
||||
},
|
||||
showComment(id) {
|
||||
let comment = document.getElementById('comment' + id)
|
||||
comment.classList.toggle('hidden')
|
||||
}
|
||||
},
|
||||
components: {
|
||||
highlightjs: hljsVuePlugin.component
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<a :href="url" class="github-corner" target="_blank" aria-label="View source on Github">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GithubCorner',
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* ----------------------------------------------
|
||||
* GitHub Corners
|
||||
* w: https://github.com/tholman/github-corners
|
||||
* ---------------------------------------------- */
|
||||
|
||||
.github-corner {
|
||||
fill: #071511;
|
||||
color: #43D9AD;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes octocat-wave {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
transform: rotate(-25deg);
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.github-corner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<div id="mobile-menu" class="w-full z-10 lg:hidden">
|
||||
|
||||
<!-- header -->
|
||||
<div id="mobile-header" class="w-full h-16 flex justify-between items-center">
|
||||
<NuxtLink class="text-menu-text font-fira_retina flex h-full items-center mx-5" to="/" @click="goHome()">
|
||||
{{ config.dev.logo_name }}
|
||||
</NuxtLink>
|
||||
<img src="/icons/burger.svg" v-if="!menuOpen" @click="toggleMobileMenu()" class="w-5 h-5 mx-5 my-auto"/>
|
||||
<img src="/icons/burger-close.svg" v-else @click="toggleMobileMenu()" name="icon-park-outline:close" class="w-5 h-5 mx-5 my-auto"/>
|
||||
</div>
|
||||
|
||||
<!-- mobile menu -->
|
||||
<div id="menu" class="bg-mobile-menu-blue z-10 hidden">
|
||||
<NuxtLink id="nav-link-mobile" to="/" :class="{ active: isActive('/') }" @click="toggleMobileMenu()">
|
||||
_hello
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink id="nav-link-mobile" to="/about-me" :class="{ active: isActive('/about-me') }" @click="toggleMobileMenu()">
|
||||
_about-me
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink id="nav-link-mobile" to="/projects" :class="{ active: isActive('/projects') }" @click="toggleMobileMenu()">
|
||||
_projects
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink id="nav-link-mobile" to="/contact-me" :class="{ active: isActive('/contact-me') }" @click="toggleMobileMenu()">
|
||||
_contact-me
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
menuOpen: false
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
return {
|
||||
config
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleMobileMenu(){
|
||||
|
||||
this.menuOpen ? this.menuOpen = false : this.menuOpen = true
|
||||
|
||||
const menu = document.getElementById('menu');
|
||||
menu.classList.toggle('hidden')
|
||||
|
||||
const page = document.getElementsByTagName('main')[0];
|
||||
// Hide / show section
|
||||
if (page.style.display === 'none') {
|
||||
page.style.display = 'flex';
|
||||
} else {
|
||||
page.style.display = 'none';
|
||||
}
|
||||
},
|
||||
goHome() {
|
||||
const menu = document.getElementById('menu');
|
||||
if(!menu.classList.contains('hidden')){
|
||||
menu.classList.toggle('hidden')
|
||||
document.getElementsByTagName('main')[0].style.display = 'flex';
|
||||
this.menuOpen ? this.menuOpen = false : this.menuOpen = true
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// Set active class to current page link
|
||||
isActive() {
|
||||
return route => this.$route.path === route;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
#mobile-header {
|
||||
border-bottom: 1px solid #1E2D3D;
|
||||
}
|
||||
|
||||
#nav-link-mobile {
|
||||
border-bottom: 1px solid #1E2D3D;
|
||||
@apply text-menu-text font-fira_retina px-6 py-4 flex items-center;
|
||||
}
|
||||
|
||||
#nav-link-mobile.active {
|
||||
color: white
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<div id="project" :key="key" class="lg:mx-5">
|
||||
|
||||
<span class="flex text-sm my-3">
|
||||
<h3 v-if="index == null" class="text-purplefy font-fira_bold mr-3">Project {{ key + 1 }}</h3>
|
||||
<h3 v-else class="text-purplefy font-fira_bold mr-3">Project {{ index + 1 }}</h3>
|
||||
<h4 class="font-fira_retina text-menu-text"> // {{ project.title }}</h4>
|
||||
</span>
|
||||
|
||||
<div id="project-card" class="flex flex-col">
|
||||
<div id="window">
|
||||
<div class="absolute flex right-3 top-3">
|
||||
<img v-for="tech in project.tech" :key="tech" :src="'/icons/techs/filled/' + tech + '.svg'" alt="" class="w-6 h-6 mx-1 hover:opacity-75">
|
||||
</div>
|
||||
<img id="showcase" :src="project.img" alt="" class="">
|
||||
</div>
|
||||
|
||||
<div class="pb-8 pt-6 px-6 border-top">
|
||||
<p class="text-menu-text font-fira_retina text-sm mb-5">
|
||||
{{ project.description }}
|
||||
</p>
|
||||
<a id="view-button" :href="project.url" target="_blank" class="text-white font-fira_retina py-2 px-4 w-fit text-xs rounded-lg">
|
||||
view-project
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { project, key, index } = defineProps(['project', 'key', 'index'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#project {
|
||||
min-width: 400px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#project-card {
|
||||
border: 1px solid #1E2D3D;
|
||||
background-color: #011221;
|
||||
border-radius: 15px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
#window {
|
||||
max-height: 120px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#showcase {
|
||||
border-top-right-radius: 15px;
|
||||
border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#project {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#project {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
padding-inline: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1350px) {
|
||||
#project {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
padding-inline: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,24 +0,0 @@
|
||||
# `components/` [Directory](https://nuxt.com/docs/getting-started/views#components)
|
||||
|
||||
Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory, and they will be automatically available across your application without having to explicitly import them.
|
||||
|
||||
*app.vue*
|
||||
````html
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome to the homepage</h1>
|
||||
<AppAlert>
|
||||
This is an auto-imported component.
|
||||
</AppAlert>
|
||||
</div>
|
||||
</template>
|
||||
````
|
||||
|
||||
*components/AppAlert.vue*
|
||||
````html
|
||||
<template>
|
||||
<span>
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
````
|
||||
@@ -1,580 +0,0 @@
|
||||
<template>
|
||||
<div id="console">
|
||||
|
||||
<!-- bolts -->
|
||||
<img id="corner" src="/icons/console/bolt-up-left.svg" alt="" class="absolute top-2 left-2 opacity-70">
|
||||
<img id="corner" src="/icons/console/bolt-up-right.svg" alt="" class="absolute top-2 right-2 opacity-70">
|
||||
<img id="corner" src="/icons/console/bolt-down-left.svg" alt="" class="absolute bottom-2 left-2 opacity-70">
|
||||
<img id="corner" src="/icons/console/bolt-down-right.svg" alt="" class="absolute bottom-2 right-2 opacity-70">
|
||||
|
||||
|
||||
<!-- Game Screen -->
|
||||
<div id="game-screen" ref="gameScreen"></div>
|
||||
|
||||
<button id="start-button" class="font-fira_retina" @click="startGame">start-game</button>
|
||||
|
||||
<!-- Game Over -->
|
||||
<div id="game-over" class="hidden">
|
||||
<span class="font-fira_retina text-greenfy bg-bluefy-dark h-12 flex items-center justify-center">GAME OVER!</span>
|
||||
<button class="font-fira_retina text-menu-text text-sm flex items-center justify-center w-full py-6 hover:text-white" @click="startAgain">start-again</button>
|
||||
</div>
|
||||
|
||||
<div id="congrats" class="hidden">
|
||||
<span class="font-fira_retina text-greenfy bg-bluefy-dark h-12 flex items-center justify-center">WELL DONE!</span>
|
||||
<button class="font-fira_retina text-menu-text text-sm flex items-center justify-center w-full py-6 hover:text-white" @click="startAgain">play-again</button>
|
||||
</div>
|
||||
|
||||
<div id="console-menu" class="h-full flex flex-col items-end justify-between">
|
||||
|
||||
<div>
|
||||
|
||||
<div id="instructions" class="font-fira_retina text-sm text-white">
|
||||
<p>// use your keyboard</p>
|
||||
<p>// arrows to play</p>
|
||||
|
||||
<div id="buttons" class="w-full flex flex-col items-center gap-1 pt-5">
|
||||
|
||||
<button id="console-button" class="button-up" @click="move('up')">
|
||||
<img src="/icons/console/arrow-button.svg" alt="">
|
||||
</button>
|
||||
|
||||
<div class="grid grid-cols-3 gap-1">
|
||||
<button id="console-button" class="button-left" @click="move('left')">
|
||||
<img src="/icons/console/arrow-button.svg" alt="" class="-rotate-90">
|
||||
</button>
|
||||
|
||||
<button id="console-button" class="button-down" @click="move('down')">
|
||||
<img src="/icons/console/arrow-button.svg" alt="" class="rotate-180">
|
||||
</button>
|
||||
|
||||
<button id="console-button" class="button-right" @click="move('right')">
|
||||
<img src="/icons/console/arrow-button.svg" alt="" class="rotate-90">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- score board -->
|
||||
<div id="score-board" class="w-full flex flex-col pl-5">
|
||||
<p class="font-fira_retina text-white pt-5">// food left</p>
|
||||
|
||||
<div id="score" class="grid grid-cols-5 gap-5 justify-items-center pt-5 w-fit">
|
||||
<div class="food"></div>
|
||||
<div class="food"></div>
|
||||
<div class="food"></div>
|
||||
<div class="food"></div>
|
||||
<div class="food"></div>
|
||||
<div class="food"></div>
|
||||
<div class="food"></div>
|
||||
<div class="food"></div>
|
||||
<div class="food"></div>
|
||||
<div class="food"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- skip -->
|
||||
<NuxtLink id="skip-btn" to="/about-me" class="font-fira_retina flex hover:bg-white/20">
|
||||
skip
|
||||
</NuxtLink>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
score: 0,
|
||||
gameInterval: null,
|
||||
gameStarted: false,
|
||||
gameOver: false,
|
||||
food: { x: 10, y: 5 },
|
||||
snake: [
|
||||
{ x: 10, y: 12 },
|
||||
{ x: 10, y: 13 },
|
||||
{ x: 10, y: 14 },
|
||||
{ x: 10, y: 15 },
|
||||
{ x: 10, y: 16 },
|
||||
{ x: 10, y: 17 },
|
||||
{ x: 10, y: 18 },
|
||||
{ x: 11, y: 18 },
|
||||
{ x: 12, y: 18 },
|
||||
{ x: 13, y: 18 },
|
||||
{ x: 14, y: 18 },
|
||||
{ x: 15, y: 18 },
|
||||
{ x: 15, y: 19 },
|
||||
{ x: 15, y: 20 },
|
||||
{ x: 15, y: 21 },
|
||||
{ x: 15, y: 22 },
|
||||
{ x: 15, y: 23 },
|
||||
{ x: 15, y: 24 },
|
||||
],
|
||||
direction: "up",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
startGame() {
|
||||
|
||||
// hide start button
|
||||
document.getElementById("start-button").style.display = "none";
|
||||
|
||||
// start game
|
||||
this.gameStarted = true;
|
||||
this.gameInterval = setInterval(this.moveSnake, 50);
|
||||
},
|
||||
startAgain() {
|
||||
// Mostrar botón de start-game
|
||||
document.getElementById("start-button").style.display = "block";
|
||||
|
||||
// Ocultar game over
|
||||
document.getElementById("game-over").style.display = "none";
|
||||
document.getElementById("congrats").style.display = "none";
|
||||
|
||||
|
||||
// reiniciar datos del juego
|
||||
this.gameStarted = false;
|
||||
this.gameOver = false;
|
||||
this.restartScore();
|
||||
this.food = {
|
||||
x: 10,
|
||||
y: 5
|
||||
};
|
||||
this.snake = [
|
||||
{ x: 10, y: 12 },
|
||||
{ x: 10, y: 13 },
|
||||
{ x: 10, y: 14 },
|
||||
{ x: 10, y: 15 },
|
||||
{ x: 10, y: 16 },
|
||||
{ x: 10, y: 17 },
|
||||
{ x: 10, y: 18 },
|
||||
{ x: 11, y: 18 },
|
||||
{ x: 12, y: 18 },
|
||||
{ x: 13, y: 18 },
|
||||
{ x: 14, y: 18 },
|
||||
{ x: 15, y: 18 },
|
||||
{ x: 15, y: 19 },
|
||||
{ x: 15, y: 20 },
|
||||
{ x: 15, y: 21 },
|
||||
{ x: 15, y: 22 },
|
||||
{ x: 15, y: 23 },
|
||||
{ x: 15, y: 24 },
|
||||
],
|
||||
this.direction = "up";
|
||||
|
||||
// limpiar intervalo de juego
|
||||
clearInterval(this.gameInterval);
|
||||
this.render();
|
||||
},
|
||||
// ... resto del código
|
||||
moveSnake() {
|
||||
let newX = this.snake[0].x;
|
||||
let newY = this.snake[0].y;
|
||||
|
||||
switch (this.direction) {
|
||||
case "up":
|
||||
newY--;
|
||||
break;
|
||||
case "down":
|
||||
newY++;
|
||||
break;
|
||||
case "left":
|
||||
newX--;
|
||||
break;
|
||||
case "right":
|
||||
newX++;
|
||||
break;
|
||||
}
|
||||
|
||||
// check if snake dont leave from game window
|
||||
// and check if snake dont eat itself
|
||||
if (
|
||||
newX >= 0 &&
|
||||
newX < 24 &&
|
||||
newY >= 0 &&
|
||||
newY < 40 &&
|
||||
!this.snake.find(
|
||||
snakeCell => snakeCell.x === newX && snakeCell.y === newY
|
||||
)
|
||||
) {
|
||||
/* snake move next cell */
|
||||
this.snake.unshift({ x: newX, y: newY });
|
||||
|
||||
/* check snake next cell is food */
|
||||
if (newX === this.food.x && newY === this.food.y) {
|
||||
|
||||
// add score
|
||||
this.score++;
|
||||
|
||||
// add food to score board
|
||||
const scoreFoods = document.getElementsByClassName("food");
|
||||
scoreFoods[this.score - 1].style.opacity = 1;
|
||||
|
||||
// check if score is 10 (max score)
|
||||
if(this.score === 10) {
|
||||
|
||||
// move snake head to food (fix snake head position at end)
|
||||
this.snake.unshift({ x: newX, y: newY }); // move head
|
||||
this.food = { x: null, y: null } // remove food
|
||||
clearInterval(this.gameInterval); // stop game
|
||||
document.getElementById('congrats').style.display = 'block' // show congrats
|
||||
this.gameOver = true; // game over
|
||||
this.gameStarted = false; // stop game
|
||||
|
||||
} else {
|
||||
|
||||
// create new food
|
||||
this.food = {
|
||||
x: Math.floor(Math.random() * 24),
|
||||
y: Math.floor(Math.random() * 40)
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
// if next cell is not food: snake pop last cell
|
||||
this.snake.pop();
|
||||
}
|
||||
} else {
|
||||
// GAME OVER: if snake leave from game window or eat itself
|
||||
clearInterval(this.gameInterval);
|
||||
document.getElementById('game-over').style.display = 'block'
|
||||
this.gameStarted = false;
|
||||
this.gameOver = true;
|
||||
}
|
||||
this.render();
|
||||
},
|
||||
render() {
|
||||
let gameScreen = this.$refs.gameScreen;
|
||||
gameScreen.innerHTML = "";
|
||||
|
||||
// responsive cell screen
|
||||
// (this.$refs.gameScreen.offsetWidth / 20) + "px";
|
||||
|
||||
/* const widthCells = window.innerWidth > 1536 ? 24 : 20; */
|
||||
const cellSize = window.innerWidth > 1536 ? "10px" : "8px";
|
||||
// eje y
|
||||
for (let i = 0; i < 40; i++) {
|
||||
// exe x
|
||||
for (let j = 0; j < 24; j++) {
|
||||
|
||||
/* cell style */
|
||||
let cell = document.createElement("div");
|
||||
cell.classList.add("cell");
|
||||
cell.style.width = cellSize
|
||||
cell.style.height = cellSize
|
||||
cell.style.display = "flex";
|
||||
cell.style.flexShrink = 0;
|
||||
cell.classList.add("black");
|
||||
|
||||
/* Food cell style */
|
||||
if (j === this.food.x && i === this.food.y) {
|
||||
cell.style.backgroundColor = "#43D9AD";
|
||||
cell.style.borderRadius = "50%";
|
||||
cell.style.boxShadow = "0 0 10px #43D9AD";
|
||||
}
|
||||
|
||||
/* Estilo de la serpiente a medida que va crediendo */
|
||||
let snakeCell = this.snake.find(
|
||||
snakeCell => snakeCell.x === j && snakeCell.y === i
|
||||
);
|
||||
|
||||
if (snakeCell) {
|
||||
cell.style.backgroundColor = "#43D9AD";
|
||||
cell.style.opacity = 1 - (this.snake.indexOf(snakeCell) / this.snake.length);
|
||||
cell.classList.add("green");
|
||||
|
||||
}
|
||||
|
||||
/* Estilo de la cabeza */
|
||||
if (snakeCell && this.snake.indexOf(snakeCell) === 0) {
|
||||
|
||||
let headRadius = "5px";
|
||||
if (this.direction === "up") {
|
||||
cell.style.borderTopLeftRadius = headRadius;
|
||||
cell.style.borderTopRightRadius = headRadius;
|
||||
}
|
||||
if (this.direction === "down") {
|
||||
|
||||
cell.style.borderBottomLeftRadius = headRadius;
|
||||
cell.style.borderBottomRightRadius = headRadius;
|
||||
}
|
||||
if (this.direction === "left") {
|
||||
cell.style.borderTopLeftRadius = headRadius;
|
||||
cell.style.borderBottomLeftRadius = headRadius;
|
||||
}
|
||||
if (this.direction === "right") {
|
||||
cell.style.borderTopRightRadius = headRadius;
|
||||
cell.style.borderBottomRightRadius = headRadius;
|
||||
}
|
||||
}
|
||||
gameScreen.appendChild(cell);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
restartScore(){
|
||||
this.score = 0;
|
||||
const scoreFoods = document.getElementsByClassName("food");
|
||||
for (let i = 0; i < scoreFoods.length; i++) {
|
||||
scoreFoods[i].style.opacity = 0.3;
|
||||
}
|
||||
},
|
||||
move(direction){
|
||||
switch (direction) {
|
||||
case "up":
|
||||
if (this.direction !== "down") {
|
||||
this.direction = "up";
|
||||
}
|
||||
break;
|
||||
case "down":
|
||||
if (this.direction !== "up") {
|
||||
this.direction = "down";
|
||||
}
|
||||
break;
|
||||
case "left":
|
||||
if (this.direction !== "right") {
|
||||
this.direction = "left";
|
||||
}
|
||||
break;
|
||||
case "right":
|
||||
if (this.direction !== "left") {
|
||||
this.direction = "right";
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener("keydown", event => {
|
||||
if (this.gameStarted) {
|
||||
switch (event.keyCode) {
|
||||
case 37:
|
||||
if (this.direction !== "right") {
|
||||
this.direction = "left";
|
||||
}
|
||||
break;
|
||||
case 38:
|
||||
if (this.direction !== "down") {
|
||||
this.direction = "up";
|
||||
}
|
||||
break;
|
||||
case 39:
|
||||
if (this.direction !== "left") {
|
||||
this.direction = "right";
|
||||
}
|
||||
break;
|
||||
case 40:
|
||||
if (this.direction !== "up") {
|
||||
this.direction = "down";
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (event.keyCode) {
|
||||
case 32:
|
||||
if(this.gameOver){
|
||||
this.startAgain();
|
||||
}else {
|
||||
this.startGame();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/* window.innerWidth < 1536 ? cellSize = 8 : cellSize = 10; */
|
||||
/* this.food = {
|
||||
x: Math.floor(Math.random() * 24),
|
||||
y: Math.floor(Math.random() * 40)
|
||||
}; */
|
||||
window.onresize = () => {
|
||||
this.render();
|
||||
};
|
||||
|
||||
this.render();
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#console {
|
||||
width: 530px;
|
||||
height: 475px;
|
||||
border: 1px solid black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to bottom, rgba(35, 123, 109, 1), rgba(67, 217, 173, 0.13));
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
#game-screen {
|
||||
width: 240px;
|
||||
height: 400px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(1, 22, 39, 0.84);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: inset 0 0 10px #00000071;
|
||||
}
|
||||
|
||||
#start-button {
|
||||
padding-inline: 16px;
|
||||
padding-block: 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid black;
|
||||
background-color: #FEA55F;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 20%;
|
||||
left: 17%;
|
||||
font-size: 0.875rem; /* 14px */
|
||||
line-height: 1.25rem; /* 20px */
|
||||
}
|
||||
|
||||
#start-button:hover {
|
||||
background-color: rgb(255, 178, 119);
|
||||
}
|
||||
|
||||
#console-menu{
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#console-button {
|
||||
background-color: #010C15;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#console-button:hover {
|
||||
background-color: #010c15d8;
|
||||
box-shadow: #43D9AD 0 0 10px;
|
||||
}
|
||||
|
||||
#instructions {
|
||||
background-color: rgba(1, 20, 35, 0.19);
|
||||
border-radius: 7px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.food {
|
||||
background-color: #43D9AD;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px #43D9AD;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#game-over, #congrats {
|
||||
position: absolute;
|
||||
bottom: 12%;
|
||||
color: #43D9AD;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
#game-over, #congrats > span {
|
||||
font-size: 1.5rem; /* 24px */
|
||||
line-height: 2rem; /* 32px */
|
||||
}
|
||||
|
||||
#corner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#skip-btn{
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
padding-inline: 16px;
|
||||
padding-block: 8px;
|
||||
border: 2px solid white;
|
||||
border-radius: 0.5rem; /* 8px */
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1024px) and (max-width: 1536px) {
|
||||
#game-screen {
|
||||
width: 192px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
#console {
|
||||
width: 420px;
|
||||
height: 370px;
|
||||
padding: 24px;
|
||||
|
||||
}
|
||||
|
||||
#start-button {
|
||||
padding-inline: 12px;
|
||||
padding-block: 6px;
|
||||
border-radius: 8px;
|
||||
bottom: 20%;
|
||||
left: 17%;
|
||||
font-size: 0.75rem; /* 14px */
|
||||
line-height: 1rem; /* 20px */
|
||||
}
|
||||
|
||||
#console-menu{
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
#instructions {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#console-button {
|
||||
width: 40px;
|
||||
height: 25px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#score-board {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.food {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
#game-over, #congrats {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
color: #43D9AD;
|
||||
width: 192px;
|
||||
}
|
||||
|
||||
#game-over, #congrats > span {
|
||||
font-size: 1.125rem; /* 18px */
|
||||
line-height: 1.75rem; /* 28px */
|
||||
}
|
||||
|
||||
#corner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#skip-btn{
|
||||
font-size: 12px;
|
||||
padding-inline: 12px;
|
||||
padding-block: 6px;
|
||||
border: 2px solid white;
|
||||
border-radius: 0.5rem; /* 8px */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
# `content/` [Directory](https://nuxt.com/docs/guide/directory-structure/content)
|
||||
|
||||
The Nuxt Content module reads the `content/` directory in your project and parses .md, .yml, .csv and .json files to create a file-based CMS for your application.
|
||||
|
||||
1. Render your content with built-in components.
|
||||
2. Query your content with a MongoDB-like API.
|
||||
3. Use your Vue components in Markdown files with the MDC syntax.
|
||||
4. Automatically generate your navigation.
|
||||
|
||||
## Installation
|
||||
|
||||
Install the `@nuxt/content` module in your project:
|
||||
|
||||
````
|
||||
yarn add --dev @nuxt/content
|
||||
````
|
||||
|
||||
Then, add `@nuxt/content` to the `modules` section of `nuxt.config.ts`.
|
||||
|
||||
````ts
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@nuxt/content'
|
||||
],
|
||||
content: {
|
||||
// https://content.nuxtjs.org/api/configuration
|
||||
}
|
||||
})
|
||||
|
||||
````
|
||||
|
||||
## Create Content
|
||||
|
||||
Place your markdown files inside the `content/` directory in the root directory of your project:
|
||||
``content/index.md`
|
||||
|
||||
````
|
||||
# Hello Content
|
||||
````
|
||||
|
||||
The module automatically loads and parses them.
|
||||
|
||||
## Documentation
|
||||
|
||||
Head over to https://content.nuxtjs.org to learn more about the Content module features, such as how to build queries and use Vue components in your Markdown files with the MDC syntax.
|
||||
162
developer.json
162
developer.json
@@ -1,162 +0,0 @@
|
||||
{
|
||||
"name": "Micheal Weaver",
|
||||
"logo_name": "micheal-weaver",
|
||||
"role": "Front-end developer",
|
||||
"about": {
|
||||
"sections": {
|
||||
"professional-info": {
|
||||
"title": "professional-info",
|
||||
"icon": "icons/info-professional.svg",
|
||||
"info": {
|
||||
"experience": {
|
||||
"title": "experience",
|
||||
"description": "<br>Over the past 5 years, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
|
||||
},
|
||||
"hard-skills": {
|
||||
"title": "hard-skills",
|
||||
"description": "<br>As a front-end developer, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
|
||||
},
|
||||
"soft-skills": {
|
||||
"title": "soft-skills",
|
||||
"description": "<br>I bring more than Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
|
||||
}
|
||||
}
|
||||
},
|
||||
"personal-info": {
|
||||
"title": "personal-info",
|
||||
"icon": "icons/info-personal.svg",
|
||||
"info": {
|
||||
"bio": {
|
||||
"title": "bio",
|
||||
"description": "<br> About me <br> I have 5 years of experience in web development lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat officia deserunt mollit anim id est laborum."
|
||||
},
|
||||
"interests": {
|
||||
"title": "interests",
|
||||
"description": "<br>I am constantly learning and lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
|
||||
},
|
||||
"education": {
|
||||
"title": "education",
|
||||
"description": "<br>I have always been passionate about lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
|
||||
"files": {
|
||||
"high-school": "I have been in 'Las viñas'...",
|
||||
"university": "The university..."
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"hobbies-info": {
|
||||
"title": "hobbies-info",
|
||||
"icon": "icons/info-hobbies.svg",
|
||||
"info": {
|
||||
"sports": {
|
||||
"title": "sports",
|
||||
"description": "<br>I am an avid sports enthusiast and lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
|
||||
},
|
||||
"favorite-games": {
|
||||
"title": "favorite-games",
|
||||
"description": "<br>I am a passionate gamer with Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"contacts": {
|
||||
"direct": {
|
||||
"title": "contacts",
|
||||
"sources": {
|
||||
"email": "user@gmail.com",
|
||||
"phone": "+3598246359"
|
||||
}
|
||||
},
|
||||
"social": {
|
||||
"github": {
|
||||
"title": "Github profile",
|
||||
"url": "https://github.com/",
|
||||
"user": "username"
|
||||
},
|
||||
"facebook": {
|
||||
"title": "Facebook profile",
|
||||
"url": "https://facebook.com/",
|
||||
"user": "username"
|
||||
},
|
||||
"twitter": {
|
||||
"title": "Twitter account",
|
||||
"url": "https://twitter.com/",
|
||||
"user": "username"
|
||||
}
|
||||
},
|
||||
"find_me_also_in": {
|
||||
"title": "find-me-also-in",
|
||||
"sources": {
|
||||
"youtube": {
|
||||
"title": "YouTube channel",
|
||||
"url": "https://www.youtube.com/",
|
||||
"user": "username"
|
||||
},
|
||||
"gurushots": {
|
||||
"title": "GuruShots profile",
|
||||
"url": "https://gurushots.com/",
|
||||
"user": "username"
|
||||
},
|
||||
"instagram": {
|
||||
"title": "Instagram account",
|
||||
"url": "https://instagram.com/",
|
||||
"user": "username"
|
||||
},
|
||||
"twitch": {
|
||||
"title": "Twitch profile",
|
||||
"url": "https://twitch.com/",
|
||||
"user": "username"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"gists": {
|
||||
"1": "83861a67e377633ee8368df01ee3a355",
|
||||
"2": "694c1f32332788a2ac7f37b09e5aa40e"
|
||||
},
|
||||
"projects": {
|
||||
"1": {
|
||||
"title": "_ui-animations",
|
||||
"description": "Duis aute irure dolor in velit esse cillum dolore.",
|
||||
"img": "/images/projects/ui-animations2.png",
|
||||
"tech": ["Flutter"],
|
||||
"url": "https://github.com/"
|
||||
},
|
||||
"2": {
|
||||
"title": "_ai-resources",
|
||||
"description": "Duis aute irure dolor in velit esse cillum dolore.",
|
||||
"img": "/images/projects/ai-resources.png",
|
||||
"tech": ["Gatsby"],
|
||||
"url": "https://github.com/"
|
||||
},
|
||||
"3": {
|
||||
"title": "_worldmap",
|
||||
"description": "Duis aute irure dolor in velit esse cillum dolore.",
|
||||
"img": "/images/projects/worldmap.png",
|
||||
"tech": ["Angular"],
|
||||
"url": "https://github.com/"
|
||||
},
|
||||
"4": {
|
||||
"title": "_ui-animations",
|
||||
"description": "Duis aute irure dolor in velit esse cillum dolore.",
|
||||
"img": "/images/projects/ui-animations.png",
|
||||
"tech": ["React"],
|
||||
"url": "https://github.com/"
|
||||
},
|
||||
"5": {
|
||||
"title": "_tetris-game",
|
||||
"description": "Duis aute irure dolor in velit esse cillum dolore.",
|
||||
"img": "/images/projects/tetris-game.png",
|
||||
"tech": ["React"],
|
||||
"url": "https://github.com/"
|
||||
},
|
||||
"6": {
|
||||
"title": "_ethereum",
|
||||
"description": "Duis aute irure dolor in velit esse cillum dolore.",
|
||||
"img": "/images/projects/ethereum.png",
|
||||
"tech": ["Vue"],
|
||||
"url": "https://github.com/"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
# `layouts/` [Directory](https://nuxt.com/docs/getting-started/views#layouts)
|
||||
|
||||
Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `<slot />` components to display the page content. The `layouts/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
|
||||
|
||||
>> If you only have a single layout in your application, we recommend using app.vue with the `<NuxtPage />` component instead.
|
||||
|
||||
*layouts/default.vue*
|
||||
````html
|
||||
<template>
|
||||
<div>
|
||||
<AppHeader />
|
||||
<slot />
|
||||
<AppFooter />
|
||||
</div>
|
||||
</template>
|
||||
````
|
||||
|
||||
*pages/index.vue*
|
||||
````html
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome to the homepage</h1>
|
||||
<AppAlert>
|
||||
This is an auto-imported component
|
||||
</AppAlert>
|
||||
</div>
|
||||
</template>
|
||||
````
|
||||
|
||||
*pages/about.vue*
|
||||
````html
|
||||
<template>
|
||||
<section>
|
||||
<p>This page will be displayed at the /about route.</p>
|
||||
</section>
|
||||
</template>
|
||||
````
|
||||
|
||||
If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](https://nuxt.com/docs/guide/directory-structure/layouts).
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<AppHeader />
|
||||
<slot />
|
||||
<AppFooter />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,17 +0,0 @@
|
||||
# `middleware/` [Directory](https://nuxt.com/docs/guide/directory-structure/middleware)
|
||||
|
||||
Nuxt provides a customizable **route middleware** framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route.
|
||||
|
||||
>> Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from server middleware, which are run in the Nitro server part of your app.
|
||||
|
||||
There are three kinds of route middleware:
|
||||
|
||||
1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used.
|
||||
|
||||
2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page. (Note: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
|
||||
|
||||
3. Global route middleware, which are placed in the `middleware/` directory (with a `.global` suffix) and will be automatically run on every route change.
|
||||
|
||||
The first two kinds of route middleware can be defined in `definePageMeta`.
|
||||
|
||||
[Here](https://nuxt.com/docs/guide/directory-structure/middleware) is more info about middleware.
|
||||
@@ -1,82 +0,0 @@
|
||||
const config = require('./developer.json')
|
||||
const siteTitle = `${config.name} | ${config.role}`
|
||||
|
||||
|
||||
/*
|
||||
* Nuxt 3 Config File
|
||||
Usage: https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
*/
|
||||
export default defineNuxtConfig({
|
||||
|
||||
/**
|
||||
* * App Config
|
||||
* app config: https://nuxt.com/docs/api/configuration/nuxt-config#app
|
||||
* head config: https://nuxt.com/docs/api/configuration/nuxt-config#head
|
||||
* meta config: https://nuxt.com/docs/getting-started/seo-meta
|
||||
* pageTransition config: https://nuxt.com/docs/getting-started/transitions#transitions
|
||||
* TODO: Add more meta tags for SEO
|
||||
* TODO: Add tags for social media sharing
|
||||
* TODO: Migrate apple-touch-icon config to manifest.json
|
||||
*/
|
||||
app: {
|
||||
head: {
|
||||
title: siteTitle, // App window nav title
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||
{ hid: 'description', name: 'description', content: 'A awesome developer portfolio design.' },
|
||||
{ hid: 'og:title', property: 'og:title', content: siteTitle },
|
||||
{ hid: 'og:description', property: 'og:description', content: 'A awesome developer portfolio design.' },
|
||||
{ hid: 'og:image', property: 'og:image', content: 'demo-share.jpg' },
|
||||
{ hid: 'og:url', property: 'og:url', content: 'https://developer-portfolio-v1.netlify.app/' },
|
||||
{ name: 'theme-color', content: '#010C15' },
|
||||
// ...
|
||||
],
|
||||
link: [
|
||||
{ rel: 'manifest', href: 'pwa/manifest.json' },
|
||||
{ rel: 'apple-touch-icon', href: 'pwa/icons/apple-touch-icon.png' },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* * Nuxt 3 Modules
|
||||
* Official modules: https://nuxt.com/modules
|
||||
*/
|
||||
modules: [
|
||||
'@nuxtjs/tailwindcss',
|
||||
],
|
||||
|
||||
components: {
|
||||
dirs: [
|
||||
'~/components',
|
||||
],
|
||||
},
|
||||
|
||||
/**
|
||||
* * Tailwind CSS Config
|
||||
* Options: https://tailwindcss.nuxt.dev/getting-started/options/
|
||||
* Docs: https://tailwindcss.nuxt.dev
|
||||
*/
|
||||
tailwindcss: {
|
||||
cssPath: '~/assets/tailwind.css',
|
||||
configPath: 'tailwind.config',
|
||||
exposeConfig: true, // true to resolve the tailwind config in runtime. https://tailwindcss.nuxt.dev/getting-started/options/#exposeconfig
|
||||
injectPosition: 0,
|
||||
viewer: false,
|
||||
},
|
||||
|
||||
/**
|
||||
* * Runtime Config (Environment Variables)
|
||||
* Usage: https://nuxt.com/docs/guide/going-further/runtime-config
|
||||
*/
|
||||
runtimeConfig: {
|
||||
// The private keys which are only available server-side
|
||||
apiSecret: '123',
|
||||
// Keys within public are also exposed client-side
|
||||
public: {
|
||||
apiBase: '/api',
|
||||
dev: config
|
||||
}
|
||||
}
|
||||
})
|
||||
28
package.json
28
package.json
@@ -1,21 +1,19 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"test": "vitest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nuxt": "3.0.0",
|
||||
"vitest": "^0.25.3"
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro check && astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@highlightjs/vue-plugin": "highlightjs/vue-plugin",
|
||||
"@nuxtjs/tailwindcss": "^6.1.3",
|
||||
"aos": "^3.0.0-beta.6",
|
||||
"highlight.js": "^11.7.0"
|
||||
"@astrojs/starlight": "^0.24.2",
|
||||
"astro": "^4.10.2",
|
||||
"sharp": "^0.32.5",
|
||||
"@astrojs/check": "^0.7.0",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
# `pages/` [Directory](https://nuxt.com/docs/getting-started/views#pages)
|
||||
|
||||
Pages represent views use for each specific route pattern. Every file in the `pages/` directory represents a different route displaying its content.
|
||||
|
||||
To use pages, create pages/index.vue file and add `<NuxtPage />` component to the *app.vue* (or remove *app.vue* for default entry). You can now create more pages and their corresponding routes by adding new files in the `pages/` directory.
|
||||
|
||||
*pages/index.vue*
|
||||
````html
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome to the homepage</h1>
|
||||
<AppAlert>
|
||||
This is an auto-imported component
|
||||
</AppAlert>
|
||||
</div>
|
||||
</template>
|
||||
````
|
||||
|
||||
*pages/about.vue*
|
||||
````html
|
||||
<template>
|
||||
<section>
|
||||
<p>This page will be displayed at the /about route.</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
````
|
||||
@@ -1,334 +0,0 @@
|
||||
<template>
|
||||
<main v-if="!loading" id="about-me" class="page">
|
||||
|
||||
<div id="mobile-page-title">
|
||||
<h2>_about-me</h2>
|
||||
</div>
|
||||
|
||||
<div id="page-menu" class="w-full flex">
|
||||
|
||||
<!-- DESKTOP section icons -->
|
||||
<div id="sections">
|
||||
<div id="section-icon" v-for="section in config.dev.about.sections" :key="section.title" :class="{ active: isSectionActive(section.title)}">
|
||||
<img :id="'section-icon-' + section.title" :src="section.icon" :alt="section.title + '-section'" @click="focusCurrentSection(section)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- focused section content -->
|
||||
<div id="section-content" class="hidden lg:block w-full h-full border-right">
|
||||
|
||||
<!-- title -->
|
||||
<div id="section-content-title" class="hidden lg:flex items-center min-w-full">
|
||||
<img id="section-arrow-menu" src="/icons/arrow.svg" alt="" class="section-arrow mx-3 open">
|
||||
<p v-html="config.dev.about.sections[currentSection].title" class="font-fira_regular text-white text-sm"></p>
|
||||
</div>
|
||||
|
||||
<!-- folders -->
|
||||
<div>
|
||||
<div v-for="(folder, key, index) in config.dev.about.sections[currentSection].info" :key="key" class="grid grid-cols-2 items-center my-2 font-fira_regular text-menu-text" @click="focusCurrentFolder(folder)">
|
||||
<div class="flex col-span-2 hover:text-white hover:cursor-pointer">
|
||||
<img id="diple" src="/icons/diple.svg" alt="" :class="{ open: isOpen(folder.title)}">
|
||||
<img :src="'/icons/folder' + (index+1) + '.svg'" alt="" class="mr-3">
|
||||
<p :id="folder.title" v-html="key" :class="{ active: isActive(folder.title)}"></p>
|
||||
</div>
|
||||
<div v-if="folder.files !== undefined" class="col-span-2">
|
||||
<div v-for="(file, key) in folder.files" :key="key" class="hover:text-white hover:cursor-pointer flex my-2">
|
||||
<img src="/icons/markdown.svg" alt="" class="ml-8 mr-3"/>
|
||||
<p >{{ key }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- contact -->
|
||||
<div id="section-content-title-contact" class="flex items-center min-w-full border-top">
|
||||
<img id="section-arrow-menu" src="/icons/arrow.svg" alt="" class="section-arrow mx-3 open">
|
||||
<p v-html="config.dev.contacts.direct.title" class="font-fira_regular text-white text-sm"></p>
|
||||
</div>
|
||||
<div id="contact-sources" class="hidden lg:flex lg:flex-col my-2">
|
||||
<div v-for="(source, key) in config.dev.contacts.direct.sources" :key="key" class="flex items-center mb-2">
|
||||
<img :src="'/icons/' + key + '.svg'" alt="" class="mx-4">
|
||||
<a v-html="source" href="/" class="font-fira_retina text-menu-text hover:text-white"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- mobile -->
|
||||
<div id="section-content" class="lg:hidden w-full font-fira_regular">
|
||||
|
||||
<div v-for="section in config.dev.about.sections" :key="section.title">
|
||||
|
||||
<!-- section title (mobile) -->
|
||||
<div :key="section.title" :src="section.icon" id="section-content-title" class="flex lg:hidden mb-1" @click="focusCurrentSection(section)">
|
||||
<img src="/icons/arrow.svg" :id="'section-arrow-' + section.title" alt="" class="section-arrow">
|
||||
<p v-html="section.title" class=" text-white text-sm"></p>
|
||||
</div>
|
||||
|
||||
<!-- folders -->
|
||||
<div :id="'folders-' + section.title" class="hidden"> <!-- <div :id="'folders-' + section.title" :class="currentSection == section.title ? 'block' : 'hidden'"> -->
|
||||
<div v-for="(folder, key, index) in config.dev.about.sections[section.title].info" :key="key" class="grid grid-cols-2 items-center my-2 font-fira_regular text-menu-text hover:text-white hover:cursor-pointer" @click="focusCurrentFolder(folder)">
|
||||
<div class="flex col-span-2">
|
||||
<img id="diple" src="/icons/diple.svg">
|
||||
<img :src="'icons/folder' + (index+1) + '.svg'" alt="" class="mr-3">
|
||||
<p :id="folder.title" v-html="key" :class="{ active: isActive(folder.title)}"></p>
|
||||
</div>
|
||||
<div v-if="folder.files !== undefined" class="col-span-2">
|
||||
<div v-for="(file, key) in folder.files" :key="key" class="hover:text-white hover:cursor-pointer flex my-2">
|
||||
<img src="/icons/markdown.svg" alt="" class="ml-8 mr-3"/>
|
||||
<p >{{ key }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- section content title -->
|
||||
<div id="section-content-title" class="flex items-center min-w-full" @click="showContacts()">
|
||||
<img src="/icons/arrow.svg" alt="" id="section-arrow" class="section-arrow">
|
||||
<p v-html="config.dev.contacts.direct.title" class="font-fira_regular text-white text-sm"></p>
|
||||
</div>
|
||||
|
||||
<!-- section content folders -->
|
||||
<div id="contacts" class="hidden">
|
||||
<div v-for="(source, key) in config.dev.contacts.direct.sources" :key="key" class="flex items-center my-2">
|
||||
<img :src="'/icons/' + key + '.svg'" alt="">
|
||||
<a v-html="source" href="/" class="font-fira_retina text-menu-text hover:text-white ml-4"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- MENU END -->
|
||||
|
||||
<!-- content -->
|
||||
<div class="flex flex-col lg:grid lg:grid-cols-2 h-full w-full">
|
||||
|
||||
<div id="left" class="w-full flex flex-col border-right">
|
||||
|
||||
<!-- windows tab desktop -->
|
||||
<div class="tab-height w-full hidden lg:flex border-bot items-center">
|
||||
<div class="flex items-center border-right h-full">
|
||||
<p v-html="config.dev.about.sections[currentSection].title" class="font-fira_regular text-menu-text text-sm px-3"></p>
|
||||
<img src="/icons/close.svg" alt="" class="mx-3">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- windows tab mobile -->
|
||||
<div id="tab-mobile" class="flex lg:hidden font-fira_retina">
|
||||
<span class="text-white">// </span>
|
||||
<h3 v-html="config.dev.about.sections[currentSection].title" class="text-white px-2"></h3>
|
||||
<span class="text-menu-text"> / </span>
|
||||
<h3 v-html="config.dev.about.sections[currentSection].info[folder].title" class="text-menu-text pl-2"></h3>
|
||||
</div>
|
||||
|
||||
<!-- text -->
|
||||
<div id="commented-text" class="flex h-full w-full lg:border-right overflow-hidden">
|
||||
|
||||
<div class="w-full h-full ml-5 mr-10 lg:my-5 overflow-scroll">
|
||||
<CommentedText :text="config.dev.about.sections[currentSection].info[folder].description" />
|
||||
</div>
|
||||
|
||||
<!-- scroll bar -->
|
||||
<div id="scroll-bar" class="h-full border-left hidden lg:flex justify-center py-1">
|
||||
<div id="scroll">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="right" class="max-w-full flex flex-col">
|
||||
|
||||
<!-- windows tab -->
|
||||
<div class="tab-height w-full h-full hidden lg:flex border-bot items-center">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- windows tab mobile -->
|
||||
<div class="tab-height w-full h-full flex-none lg:hidden items-center">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="gists-content" class="flex">
|
||||
|
||||
<div id="gists" class="flex flex-col lg:px-6 lg:py-4 w-full overflow-hidden">
|
||||
<!-- title -->
|
||||
<h3 class="text-white lg:text-menu-text mb-4 text-sm">// Code snippet showcase:</h3>
|
||||
|
||||
<div class="flex flex-col overflow-scroll">
|
||||
<!-- snippets -->
|
||||
<GistSnippet data-aos="fade-down" v-for="(gist, key) in config.public.dev.gists" :key="key" :id="gist" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- scroll bar -->
|
||||
<div id="scroll-bar" class="h-full border-left hidden lg:flex justify-center py-1">
|
||||
<div id="scroll"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
#sections {
|
||||
width: 5rem; /* 80px */
|
||||
height: 100%;
|
||||
display: none;
|
||||
border-right: 1px solid #1E2D3D;
|
||||
}
|
||||
|
||||
/* LG */
|
||||
@media (min-width: 1024px) {
|
||||
#sections {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#section-icon {
|
||||
@apply my-6 hover:cursor-pointer flex justify-center;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#section-icon.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#section-icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tab-height {
|
||||
min-height: 35px;
|
||||
max-height: 35px;
|
||||
}
|
||||
|
||||
#tab-mobile {
|
||||
padding: 25px 20px 0px 25px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#scroll-bar{
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#scroll {
|
||||
width: 14px;
|
||||
height: 7px;
|
||||
background-color: #607B96;
|
||||
}
|
||||
|
||||
#diple {
|
||||
@apply mx-3 w-2 max-w-fit;
|
||||
}
|
||||
|
||||
.open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.active {
|
||||
color:white;
|
||||
}
|
||||
|
||||
#right, #left {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#gists-content {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#gists-content {
|
||||
height: 100%;
|
||||
padding: 0px 25px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#about {
|
||||
min-height: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.section-arrow {
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
#section-content #contacts {
|
||||
padding: 0px 25px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentSection: 'personal-info',
|
||||
folder: 'bio',
|
||||
loading: true,
|
||||
}
|
||||
},
|
||||
/**
|
||||
* In setup we can define the data we want to use in the component before the component is created.
|
||||
*/
|
||||
setup() {
|
||||
const config = useRuntimeConfig()
|
||||
return {
|
||||
config
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// Set active class to current page link
|
||||
isActive() {
|
||||
return folder => this.folder === folder;
|
||||
},
|
||||
isSectionActive() {
|
||||
return section => this.currentSection === section;
|
||||
},
|
||||
isOpen() {
|
||||
return folder => this.folder === folder;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
focusCurrentSection(section) {
|
||||
this.currentSection = section.title
|
||||
this.folder = Object.keys(section.info)[0]
|
||||
|
||||
document.getElementById('folders-' + section.title).classList.toggle('hidden') // show folders
|
||||
document.getElementById('section-arrow-' + section.title).classList.toggle('rotate-90'); // rotate arrow
|
||||
},
|
||||
focusCurrentFolder(folder) {
|
||||
this.folder = folder.title
|
||||
// handle if folder belongs to the current section. It happens when you click on a folder from a different section in mobile view.
|
||||
this.currentSection = this.config.dev.about.sections[this.currentSection].info[folder.title] ? this.currentSection : Object.keys(this.config.dev.about.sections).find(section => this.config.dev.about.sections[section].info[folder.title])
|
||||
},
|
||||
/**
|
||||
* TODO: Hay que crear un método para que cuando se haga click en un folder, se muestren los archivos que contiene. Y si se hace click en un archivo, se muestre el contenido del archivo.
|
||||
* TODO: Además de girar el icono del diple.
|
||||
*/
|
||||
toggleFiles() {
|
||||
document.getElementById('file-' + this.folder).classList.toggle('hidden')
|
||||
},
|
||||
/* Mobile */
|
||||
showContacts() {
|
||||
document.getElementById('contacts').classList.toggle('hidden')
|
||||
document.getElementById('section-arrow').classList.toggle('rotate-90'); // rotate arrow
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,213 +0,0 @@
|
||||
<template>
|
||||
<main id="contact-me" class="page">
|
||||
|
||||
<div id="mobile-page-title">
|
||||
<h2>_contact-me</h2>
|
||||
</div>
|
||||
|
||||
<div id="page-menu" class="w-full h-full flex flex-col border-right">
|
||||
|
||||
<!-- contacts -->
|
||||
<div id="contacts" class="submenu">
|
||||
<div class="title" @click="open('contacts')">
|
||||
<img class="arrow" src="/icons/arrow.svg">
|
||||
<h3>
|
||||
contacts
|
||||
</h3>
|
||||
</div>
|
||||
<div id="links">
|
||||
<div v-for="(source, key) in contact.direct.sources" :key="key" class="link">
|
||||
<img :src="'/icons/' + key + '.svg'">
|
||||
<a v-html="source" href="/" class="font-fira_retina text-menu-text hover:text-white"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- find me also in -->
|
||||
<div id="find-me-in" class="submenu border-top">
|
||||
<div class="title" @click="open('find-me-in')">
|
||||
<img class="arrow" src="/icons/arrow.svg">
|
||||
<h3>
|
||||
find-me-also-in
|
||||
</h3>
|
||||
</div>
|
||||
<div id="links">
|
||||
<div v-for="(source, key) in contact.find_me_also_in.sources" :key="key" class="link">
|
||||
<img src="/icons/link.svg">
|
||||
<a :href="source.url + source.user" class="font-fira_retina text-menu-text hover:text-white" target="_blank">{{ source.title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
|
||||
<!-- windows tab -->
|
||||
<div class="tab-height w-full hidden lg:flex border-right border-bot items-center">
|
||||
|
||||
<div class="flex items-center border-right h-full">
|
||||
<p class="font-fira_regular text-menu-text text-sm px-3">contacts</p>
|
||||
<img src="/icons/close.svg" alt="" class="m-3">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- main -->
|
||||
<div class="flex lg:grid lg:grid-cols-2 h-full w-full">
|
||||
|
||||
<div id="left" class="h-full w-full flex flex-col border-right items-center">
|
||||
|
||||
<ContactForm :name="name" :email="email" :message="message" />
|
||||
|
||||
</div>
|
||||
|
||||
<div id="right" class="h-full w-full hidden lg:flex">
|
||||
|
||||
<div class="form-content">
|
||||
<FormContentCode :name="name" :email="email" :message="message" />
|
||||
</div>
|
||||
<!-- scroll bar -->
|
||||
<div id="scroll-bar" class="h-full border-left flex justify-center py-1">
|
||||
<div id="scroll"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
email: '',
|
||||
message: '',
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const contact = useRuntimeConfig().dev.contacts
|
||||
|
||||
return {
|
||||
contact
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(elementId) {
|
||||
const element = document.getElementById(elementId);
|
||||
const arrow = element.querySelector('.arrow');
|
||||
const links = element.querySelector('#links');
|
||||
|
||||
if (links.style.display === 'block') {
|
||||
links.style.display = 'none';
|
||||
arrow.style.transform = 'rotate(0deg)';
|
||||
} else {
|
||||
links.style.display = 'block';
|
||||
arrow.style.transform = 'rotate(90deg)';
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
const nameInput = document.getElementById('name-input');
|
||||
const emailInput = document.getElementById('email-input');
|
||||
const messageInput = document.getElementById('message-input');
|
||||
|
||||
nameInput.addEventListener('input', (event) => {
|
||||
const nameValue = document.getElementById('name-value')
|
||||
nameValue.innerHTML = event.target.value;
|
||||
})
|
||||
|
||||
emailInput.addEventListener('input', (event) => {
|
||||
const emailValue = document.getElementById('email-value')
|
||||
emailValue.innerHTML = event.target.value;
|
||||
})
|
||||
|
||||
messageInput.addEventListener('input', (event) => {
|
||||
const messageValue = document.getElementById('message-value')
|
||||
messageValue.innerHTML = event.target.value;
|
||||
})
|
||||
|
||||
/**
|
||||
* * Close all submenus
|
||||
* ! This is a temporary solution.
|
||||
* ! This is needed because when the page is loaded, height style on #links are not applied.
|
||||
*/
|
||||
const links = document.getElementsByClassName('submenu');
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
if(window.innerWidth > 1024){
|
||||
links[i].querySelector("#links").style.display = "block";
|
||||
links[i].querySelector(".arrow").style.transform = "rotate(90deg)";
|
||||
} else {
|
||||
links[i].querySelector("#links").style.display = "none";
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.arrow {
|
||||
transition: 0.1s;
|
||||
margin-right: 10px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.submenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.submenu .title h3 {
|
||||
@apply font-fira_regular;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 25px;
|
||||
}
|
||||
|
||||
.link img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#links {
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
padding: 75px 50px 0px 75px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
font-size: 15px;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
|
||||
.submenu .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #1E2D3D;
|
||||
padding: 0px 25px;
|
||||
height: 35px;
|
||||
padding: 0px 25px;
|
||||
}
|
||||
.submenu .title:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.submenu .title h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
335
pages/index.vue
335
pages/index.vue
@@ -1,335 +0,0 @@
|
||||
<template>
|
||||
<main v-if="!loading" id="hello">
|
||||
|
||||
<!-- gradients -->
|
||||
<div class="css-blurry-gradient-blue"></div>
|
||||
<div class="css-blurry-gradient-green"></div>
|
||||
|
||||
<section class="hero">
|
||||
|
||||
<div class="head">
|
||||
<span>
|
||||
Hi all, I am
|
||||
</span>
|
||||
<h1>{{ config.dev.name }}</h1>
|
||||
<span class="diple flex">
|
||||
>
|
||||
<h2 class="line-1 anim-typewriter max-w-fit"> {{ config.dev.role }} </h2>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="info">
|
||||
<span class="action">
|
||||
// complete the game to continue
|
||||
</span>
|
||||
<span :class="{hide: isMobile}">
|
||||
// you can also see it on my Github page
|
||||
</span>
|
||||
<span :class="{hide: !isMobile}">
|
||||
// find my profile on Github:
|
||||
</span>
|
||||
<p class="code">
|
||||
<span class="identifier">
|
||||
const
|
||||
</span>
|
||||
<span class="variable-name">
|
||||
githubLink
|
||||
</span>
|
||||
<span class="operator">
|
||||
=
|
||||
</span>
|
||||
<a class="string" :href="'https://github.com/' + config.public.dev.contacts.social.github.user">
|
||||
"https://github.com/{{ config.public.dev.contacts.social.github.user }}"
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-aos="fade-up" class="game" v-if="!isMobile">
|
||||
<SnakeGame />
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
const isMobile = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (window.innerWidth <= 1024) isMobile.value = true
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
function handleResize() {
|
||||
if (window.innerWidth <= 1024) {
|
||||
isMobile.value = true
|
||||
} else {
|
||||
isMobile.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#hello {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
padding-left: 275px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.game {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
/* align-items: center; */
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#hello .hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr)); */
|
||||
margin: 0rem;
|
||||
}
|
||||
|
||||
|
||||
#hello .head span {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: #E5E9F0;
|
||||
font-family: 'Fira Code Retina';
|
||||
}
|
||||
|
||||
#hello .head h1 {
|
||||
font-size: 58px;
|
||||
line-height: 1;
|
||||
color: #E5E9F0;
|
||||
font-family: 'Fira Code Regular';
|
||||
padding-top: 1rem; /* 16px */
|
||||
padding-bottom: 1rem; /* 16px */
|
||||
}
|
||||
|
||||
#hello .head h2, #hello .head .diple {
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
color: #4D5BCE;
|
||||
font-family: 'Fira Code Retina';
|
||||
}
|
||||
|
||||
.head {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
#info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#info > span {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: #607B96;
|
||||
font-family: 'Fira Code Retina';
|
||||
padding-bottom: 1rem; /* 16px */
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: 'Fira Code Medium';
|
||||
color: #E5E9F0;
|
||||
}
|
||||
|
||||
.code .identifier {
|
||||
color: #4D5BCE;
|
||||
}
|
||||
|
||||
.code .variable-name {
|
||||
color: #43D9AD;
|
||||
}
|
||||
|
||||
.code .operator {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.code .string {
|
||||
color: #E99287;
|
||||
text-decoration-line: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
#info {
|
||||
padding-block: 2.5rem;
|
||||
}
|
||||
|
||||
#info .action {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.css-blurry-gradient-blue {
|
||||
position: fixed;
|
||||
bottom: 25%;
|
||||
right: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 0% 0% 50% 50%;
|
||||
rotate: 10deg;
|
||||
filter: blur(70px);
|
||||
background: radial-gradient(circle at 50% 50%,rgba(77, 91, 206, 1), rgba(76, 0, 255, 0));
|
||||
opacity: 0.5;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.css-blurry-gradient-green {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: 30%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 0% 50% 0% 50%;
|
||||
filter: blur(70px);
|
||||
background: radial-gradient(circle at 50% 50%,rgba(67, 217, 173, 1), rgba(76, 0, 255, 0));
|
||||
opacity: 0.5;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#info {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Typewrite Animation */
|
||||
|
||||
.line-1 {
|
||||
width: fit-content;
|
||||
border-right: 3px solid rgba(255,255,255,.75);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.anim-typewriter{
|
||||
animation: typewriter 3.5s steps(40) 1s 1 normal both,
|
||||
blinkTextCursor 800ms steps(40) infinite normal;
|
||||
}
|
||||
|
||||
@keyframes typewriter{
|
||||
from{width: 0;}
|
||||
to{width: 100%;}
|
||||
}
|
||||
|
||||
@keyframes blinkTextCursor{
|
||||
from{border-right-color: rgba(255,255,255,.75);}
|
||||
to{border-right-color: transparent;}
|
||||
}
|
||||
|
||||
|
||||
/* mobile */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
#hello {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#hello .hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: 1.75rem; /* 28px */
|
||||
}
|
||||
.head {
|
||||
padding-top: 4rem; /* 40px */
|
||||
}
|
||||
|
||||
#hello .head h2, #hello .head .diple {
|
||||
font-size: 20px;
|
||||
color: #43D9AD;
|
||||
}
|
||||
|
||||
#info .action {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* tablet */
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
#hello {
|
||||
padding-left: 0;
|
||||
}
|
||||
#hello .hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 1.75rem; /* 28px */
|
||||
}
|
||||
.head {
|
||||
padding-top: 4rem; /* 40px */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) and (max-width: 1320px) {
|
||||
#hello {
|
||||
padding-left: 135px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* LG */
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
|
||||
.css-blurry-gradient-blue {
|
||||
position: fixed;
|
||||
bottom: 10%;
|
||||
right: 10%;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
opacity: 0.7;
|
||||
border-radius: 100% 50% 100% 0%;
|
||||
}
|
||||
|
||||
.css-blurry-gradient-green {
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
right: 35%;
|
||||
filter: blur(100px);
|
||||
rotate: 10deg;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
opacity: 0.5;
|
||||
border-radius: 100% 0% 0% 0%;
|
||||
rotate: 20deg;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px){
|
||||
#hello {
|
||||
padding-left: 310px;
|
||||
}
|
||||
#hello .head h1 {
|
||||
font-size: 62px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,224 +0,0 @@
|
||||
<template>
|
||||
<main class="flex flex-col flex-auto lg:flex-row overflow-hidden">
|
||||
|
||||
<div id="mobile-page-title">
|
||||
<h2>_projects</h2>
|
||||
</div>
|
||||
|
||||
<!-- section title (mobile) -->
|
||||
<div id="section-content-title" class="flex lg:hidden" @click="showFilters = !showFilters">
|
||||
<img :class="showFilters ? 'section-arrow rotate-90' : 'section-arrow'" src="/icons/arrow.svg">
|
||||
<span class="font-fira_regular text-white text-sm">projects</span>
|
||||
</div>
|
||||
|
||||
<div v-if="showFilters" id="filter-menu" class="w-full flex-col border-right font-fira_regular text-menu-text lg:flex">
|
||||
<!-- title -->
|
||||
<div id="section-content-title" class="hidden lg:flex items-center min-w-full">
|
||||
<img id="section-arrow-menu" src="/icons/arrow.svg" alt="" class="section-arrow mx-3">
|
||||
<p class="font-fira_regular text-white text-sm">projects</p>
|
||||
</div>
|
||||
|
||||
<!-- filter menu -->
|
||||
<nav id="filters" class="w-full flex-col">
|
||||
|
||||
<div v-for="tech in techs" :key="tech" class="flex items-center py-2">
|
||||
<input type="checkbox" :id="tech" @click="filterProjects(tech)">
|
||||
<img :id="'icon-tech-' + tech" :src="'/icons/techs/' + tech + '.svg'" alt="" class="tech-icon w-5 h-5 mx-4">
|
||||
<span :id="'title-tech-' + tech">{{ tech }}</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- content -->
|
||||
|
||||
<div class="flex flex-col w-full overflow-hidden">
|
||||
|
||||
<!-- windows tab -->
|
||||
<div class="tab-height w-full hidden lg:flex border-bot items-center">
|
||||
<div class="flex items-center border-right h-full">
|
||||
<p v-for="filter in filters" :key="filter" class="font-fira_regular text-menu-text text-sm px-3">{{ filter }};</p>
|
||||
<img src="/icons/close.svg" alt="" class="m-3">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- windows tab mobile -->
|
||||
<div id="tab" class="flex lg:hidden items-center">
|
||||
<span class="text-white"> // </span>
|
||||
<p class="font-fira_regular text-white text-sm px-3">projects</p>
|
||||
<span class="text-menu-text"> / </span>
|
||||
<p v-for="filter in filters" :key="filter" class="font-fira_regular text-menu-text text-sm px-3">{{ filter }};</p>
|
||||
</div>
|
||||
|
||||
<!-- projects -->
|
||||
<div id="projects-case" class="grid grid-cols-1 lg:grid-cols-2 max-w-full h-full overflow-scroll lg:self-center">
|
||||
<div id="not-found" class="hidden flex flex-col font-fira_retina text-menu-text my-5 h-full justify-center items-center">
|
||||
<span class="flex justify-center text-4xl pb-3">
|
||||
X__X
|
||||
</span>
|
||||
<span class="text-white flex justify-center text-xl">
|
||||
No matching projects
|
||||
</span>
|
||||
<span class="flex justify-center">
|
||||
for these technologies
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<project-card
|
||||
v-for="(project, key, index) in projects"
|
||||
:key="key"
|
||||
:index="index"
|
||||
:project="project"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
const techs = ['React', 'HTML', 'CSS', 'Vue', 'Angular', 'Gatsby', 'Flutter']
|
||||
const filters = ref(['all'])
|
||||
const showFilters = ref(true)
|
||||
const projects = ref(config.public.dev.projects)
|
||||
|
||||
function filterProjects(tech) {
|
||||
document.getElementById('icon-tech-' + tech).classList.toggle('active')
|
||||
document.getElementById('title-tech-' + tech).classList.toggle('active')
|
||||
|
||||
const check = document.getElementById(tech)
|
||||
if (check.checked) {
|
||||
filters.value = filters.value.filter((item) => item !== 'all')
|
||||
filters.value.push(tech)
|
||||
} else {
|
||||
filters.value = filters.value.filter((item) => item !== tech)
|
||||
filters.value.length === 0 ? filters.value.push('all') : null
|
||||
}
|
||||
filters.value[0] == 'all' ? projects.value = config.public.dev.projects : projects.value = filterProjectsBy(filters.value)
|
||||
|
||||
if (projects.value.length === 0) {
|
||||
document.getElementById('projects-case').classList.remove('grid')
|
||||
document.getElementById('not-found').classList.remove('hidden')
|
||||
} else {
|
||||
document.getElementById('projects-case').classList.add('grid')
|
||||
document.getElementById('not-found').classList.add('hidden')
|
||||
}
|
||||
}
|
||||
|
||||
function filterProjectsBy(filters) {
|
||||
const projectArray = Object.values(config.public.dev.projects)
|
||||
return projectArray.filter(project => {
|
||||
return filters.some(filter => project.tech.includes(filter))
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#filters {
|
||||
padding: 10px 25px;
|
||||
}
|
||||
|
||||
#tab {
|
||||
padding: 25px 25px 5px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tech-icon {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.tech-icon.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#title-tech.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#view-button {
|
||||
background-color: #1C2B3A;
|
||||
}
|
||||
|
||||
#view-button:hover {
|
||||
background-color: #263B50;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 0.15em;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background-color: currentColor;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.38587 7.2802L11.9718 0.693573L12.9856 1.70668L5.38587 9.30641L0.826172 4.74671L1.83928 3.73361L5.38587 7.2802Z' fill='white'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked:hover {
|
||||
box-shadow: #607b968b 0px 0px 0px 2px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not(:checked) {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover {
|
||||
cursor: pointer;
|
||||
background-color: currentColor;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.38587 7.2802L11.9718 0.693573L12.9856 1.70668L5.38587 9.30641L0.826172 4.74671L1.83928 3.73361L5.38587 7.2802Z' fill='white'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
box-shadow: #607b968b 0px 0px 0px 2px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover:not(:checked) {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
background-image: none;
|
||||
box-shadow: #607b968b 0px 0px 0px 2px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#projects-case {
|
||||
padding: 0px 25px 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#projects-case {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
padding: 50px 50px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1350px) {
|
||||
#projects-case {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
padding: 50px 80px 40px;
|
||||
/* padding: 100px 100px 40px; */
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animateToBottom {
|
||||
from {
|
||||
transform: translate3d(0, -200px, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
# `public/` Directory
|
||||
|
||||
The `public/` directory is used as a public server for static assets publicly available at a defined URL of your application.
|
||||
|
||||
You can get a file in the `public/` directory from your application's code or from a browser by the root URL `/`.
|
||||
|
||||
## Example
|
||||
|
||||
For example, referencing an image file in the public/img/ directory, available at the static URL `/img/nuxt.png`:
|
||||
|
||||
````html
|
||||
<template>
|
||||
<img src="/img/nuxt.png" alt="Discover Nuxt 3" />
|
||||
</template>
|
||||
````
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill-rule="evenodd" d="M81 36 64 0 47 36l-1 2-9-10a6 6 0 0 0-9 9l10 10h-2L0 64l36 17h2L28 91a6 6 0 1 0 9 9l9-10 1 2 17 36 17-36v-2l9 10a6 6 0 1 0 9-9l-9-9 2-1 36-17-36-17-2-1 9-9a6 6 0 1 0-9-9l-9 10v-2Zm-17 2-2 5c-4 8-11 15-19 19l-5 2 5 2c8 4 15 11 19 19l2 5 2-5c4-8 11-15 19-19l5-2-5-2c-8-4-15-11-19-19l-2-5Z" clip-rule="evenodd"/><path d="M118 19a6 6 0 0 0-9-9l-3 3a6 6 0 1 0 9 9l3-3Zm-96 4c-2 2-6 2-9 0l-3-3a6 6 0 1 1 9-9l3 3c3 2 3 6 0 9Zm0 82c-2-2-6-2-9 0l-3 3a6 6 0 1 0 9 9l3-3c3-2 3-6 0-9Zm96 4a6 6 0 0 1-9 9l-3-3a6 6 0 1 1 9-9l3 3Z"/><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style></svg>
|
||||
|
After Width: | Height: | Size: 696 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.50002 0.309143L8.75003 6.30914H0.25L4.50002 0.309143Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 181 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.74998 6.65186L0.499969 0.651856L9 0.651855L4.74998 6.65186Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 187 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="7" height="9" viewBox="0 0 7 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.25 4.37245L0.25 8.62247L0.25 0.122436L6.25 4.37245Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 179 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 6.2225L14.2225 0L16 1.7775L9.7775 8L16 14.2225L14.2225 16L8 9.7775L1.7775 16L0 14.2225L6.2225 8L0 1.7775L1.7775 0L8 6.2225Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 257 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H18V2H0V0ZM0 7H18V9H0V7ZM0 14H18V16H0V14Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 176 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.38587 7.2802L11.9718 0.693573L12.9856 1.70668L5.38587 9.30641L0.826172 4.74671L1.83928 3.73361L5.38587 7.2802Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 242 B |
@@ -1,10 +0,0 @@
|
||||
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_64_1646)">
|
||||
<path d="M9.34771 8.71879L13.0602 5.00629L14.1207 6.06679L10.4082 9.77929L14.1207 13.4918L13.0602 14.5523L9.34771 10.8398L5.63521 14.5523L4.57471 13.4918L8.28721 9.77929L4.57471 6.06679L5.63521 5.00629L9.34771 8.71879Z" fill="#607B96"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_64_1646">
|
||||
<rect width="18" height="18" fill="white" transform="translate(0.347656 0.779297)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 523 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.50002 0.309143L8.75003 6.30914H0.25L4.50002 0.309143Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 181 B |
@@ -1,28 +0,0 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_di_64_1307)">
|
||||
<circle cx="9.23047" cy="9.43109" r="6.5" fill="url(#paint0_radial_64_1307)"/>
|
||||
</g>
|
||||
<path d="M6.46094 11.7258L11.9995 7.13638M6.46094 7.13638L11.9995 11.7258" stroke="#093430"/>
|
||||
<defs>
|
||||
<filter id="filter0_di_64_1307" x="0.730469" y="0.931091" width="21" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="2" dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0359028 0 0 0 0 0.177018 0 0 0 0 0.195833 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_64_1307"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_64_1307" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.088125 0 0 0 0 0.391667 0 0 0 0 0.360374 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_64_1307"/>
|
||||
</filter>
|
||||
<radialGradient id="paint0_radial_64_1307" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.23047 6.43109) rotate(90) scale(9.5)">
|
||||
<stop offset="0.151042" stop-color="#164C51"/>
|
||||
<stop offset="1" stop-color="#0D3A40"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,28 +0,0 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_di_64_1313)">
|
||||
<circle cx="8.73047" cy="9.43109" r="6.5" fill="url(#paint0_radial_64_1313)"/>
|
||||
</g>
|
||||
<path d="M5.96094 11.7258L11.4995 7.13638M5.96094 7.13638L11.4995 11.7258" stroke="#163355"/>
|
||||
<defs>
|
||||
<filter id="filter0_di_64_1313" x="0.230469" y="0.931091" width="21" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="2" dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0709722 0 0 0 0 0.174244 0 0 0 0 0.304167 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_64_1313"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_64_1313" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.170868 0 0 0 0 0.343622 0 0 0 0 0.554167 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_64_1313"/>
|
||||
</filter>
|
||||
<radialGradient id="paint0_radial_64_1313" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.73047 6.43109) rotate(90) scale(9.5)">
|
||||
<stop offset="0.151042" stop-color="#234B7C"/>
|
||||
<stop offset="1" stop-color="#122E4F"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,28 +0,0 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_di_64_1304)">
|
||||
<circle cx="9.23047" cy="9.27106" r="6.5" fill="url(#paint0_radial_64_1304)"/>
|
||||
</g>
|
||||
<path d="M6.46094 11.5657L11.9995 6.97635M6.46094 6.97635L11.9995 11.5657" stroke="#114944"/>
|
||||
<defs>
|
||||
<filter id="filter0_di_64_1304" x="0.730469" y="0.771057" width="21" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="2" dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0525 0 0 0 0 0.2625 0 0 0 0 0.255726 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_64_1304"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_64_1304" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.101667 0 0 0 0 0.508333 0 0 0 0 0.466409 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_64_1304"/>
|
||||
</filter>
|
||||
<radialGradient id="paint0_radial_64_1304" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.23047 6.27106) rotate(90) scale(9.5)">
|
||||
<stop offset="0.151042" stop-color="#196C6A"/>
|
||||
<stop offset="1" stop-color="#114B4A"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,28 +0,0 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_di_64_1310)">
|
||||
<circle cx="8.73047" cy="9.27106" r="6.5" fill="url(#paint0_radial_64_1310)"/>
|
||||
</g>
|
||||
<path d="M5.96094 11.5657L11.4995 6.97635M5.96094 6.97635L11.4995 11.5657" stroke="#114944"/>
|
||||
<defs>
|
||||
<filter id="filter0_di_64_1310" x="0.230469" y="0.771057" width="21" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="2" dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0525 0 0 0 0 0.2625 0 0 0 0 0.255726 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_64_1310"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_64_1310" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.12184 0 0 0 0 0.504167 0 0 0 0 0.464752 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_64_1310"/>
|
||||
</filter>
|
||||
<radialGradient id="paint0_radial_64_1310" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.73047 6.27106) rotate(90) scale(9.5)">
|
||||
<stop offset="0.151042" stop-color="#217D7A"/>
|
||||
<stop offset="1" stop-color="#114B4A"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.69658 7.18971L0.746582 2.23971L2.16058 0.82571L8.52458 7.18971L2.16058 13.5537L0.746582 12.1397L5.69658 7.18971Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 244 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.811096 0H15.4108C15.6259 0 15.8322 0.0854545 15.9844 0.237565C16.1365 0.389675 16.2219 0.59598 16.2219 0.811096V13.7886C16.2219 14.0038 16.1365 14.2101 15.9844 14.3622C15.8322 14.5143 15.6259 14.5997 15.4108 14.5997H0.811096C0.59598 14.5997 0.389675 14.5143 0.237565 14.3622C0.0854545 14.2101 0 14.0038 0 13.7886V0.811096C0 0.59598 0.0854545 0.389675 0.237565 0.237565C0.389675 0.0854545 0.59598 0 0.811096 0ZM8.15963 7.04275L2.95888 2.62633L1.90851 3.86244L8.17017 9.17918L14.3191 3.85838L13.2582 2.6312L8.16044 7.04275H8.15963Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 663 B |
@@ -1,24 +0,0 @@
|
||||
<svg width="107" height="88" viewBox="0 0 107 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1_6)">
|
||||
<path d="M102 58.0054H97C93 58.0054 92 55.5054 92 53.5054V63.0054V68.0054V68.0054C92 70.7669 89.7614 73.0054 87 73.0054V73.0054H82H72C75 73.0054 77 75.0054 77 78.0054V83.0054C77 85.5054 79 88.0054 82 88.0054H87C89.5 88.0054 92 86.0054 92 83.0054V78.0054C92 75.0054 94 73.0054 97 73.0054H102C104.5 73.0054 107 71.0054 107 68.0054V63.0054C107 60.5054 105 58.0054 102 58.0054Z" fill="url(#paint0_linear_1_6)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9835 2.24004C27.0569 0.844368 25.493 0.00543213 23.8178 0.00543213H5C2.23858 0.00543213 0 2.24401 0 5.00543V68.0054C0 70.7669 2.23857 73.0054 5 73.0054H72H82C79.5 73.0054 77 71.0054 77 68.0054V63.0054C77 60.5054 79 58.0054 82 58.0054H87C90 58.0054 92 60.5054 92 63.0054V53.5054V44.0372V20.0689C92 17.3075 89.7614 15.0689 87 15.0689H39.1822C37.507 15.0689 35.9431 14.23 35.0165 12.8343L27.9835 2.24004ZM87 73.0054V73.0054C89.7614 73.0054 92 70.7669 92 68.0054V68.0054C92 70.5054 90 73.0054 87 73.0054Z" fill="url(#paint1_linear_1_6)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0.00544531V0.00544531C21.2386 0.00544531 19 2.24402 19 5.00545V10.0054C19 12.7669 21.2386 15.0054 24 15.0054H30.25C32.3211 15.0054 34 13.3265 34 11.2554V11.2554L28.7823 3.42893C28.5946 3.14733 28.4441 2.84229 28.2638 2.55587C27.6016 1.50385 26.033 0.103443 24.3662 0.00544531H24Z" fill="#00E9FD" fill-opacity="0.5"/>
|
||||
<rect x="38" y="15.0054" width="15" height="15" rx="5" fill="#00E9FD"/>
|
||||
<rect y="58.0054" width="15" height="15" rx="5" fill="#00E9FD"/>
|
||||
<rect x="62" y="58.0054" width="15" height="15" rx="5" fill="#00E9FD" fill-opacity="0.5"/>
|
||||
<rect x="77" y="30.0054" width="15" height="15" rx="5" fill="#00E9FD" fill-opacity="0.5"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1_6" x1="112" y1="0.00543883" x2="-5.00001" y2="79.5054" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00DF93"/>
|
||||
<stop offset="1" stop-color="#008BF8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1_6" x1="112" y1="0.00543883" x2="-5.00001" y2="79.5054" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00DF93"/>
|
||||
<stop offset="1" stop-color="#008BF8"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1_6">
|
||||
<rect width="107" height="88" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.0802 4.30056V12.9672C15.0802 13.1588 15.0041 13.3425 14.8687 13.4779C14.7332 13.6134 14.5495 13.6895 14.358 13.6895H1.35796C1.16642 13.6895 0.982719 13.6134 0.847276 13.4779C0.711833 13.3425 0.635742 13.1588 0.635742 12.9672V3.57834H14.358C14.5495 3.57834 14.7332 3.65443 14.8687 3.78988C15.0041 3.92532 15.0802 4.10902 15.0802 4.30056ZM8.15696 2.1339H0.635742V1.41168C0.635742 1.22013 0.711833 1.03643 0.847276 0.900987C0.982719 0.765544 1.16642 0.689453 1.35796 0.689453H6.71252L8.15696 2.1339Z" fill="#E99287"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 631 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.0802 3.98074V12.6474C15.0802 12.839 15.0041 13.0227 14.8687 13.1581C14.7332 13.2935 14.5495 13.3696 14.358 13.3696H1.35796C1.16642 13.3696 0.982719 13.2935 0.847276 13.1581C0.711833 13.0227 0.635742 12.839 0.635742 12.6474V3.25852H14.358C14.5495 3.25852 14.7332 3.33461 14.8687 3.47005C15.0041 3.60549 15.0802 3.78919 15.0802 3.98074ZM8.15696 1.81407H0.635742V1.09185C0.635742 0.900306 0.711833 0.716606 0.847276 0.581163C0.982719 0.44572 1.16642 0.369629 1.35796 0.369629H6.71252L8.15696 1.81407Z" fill="#43D9AD"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 632 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.0802 4.49392V13.1606C15.0802 13.3521 15.0041 13.5358 14.8687 13.6713C14.7332 13.8067 14.5495 13.8828 14.358 13.8828H1.35796C1.16642 13.8828 0.982719 13.8067 0.847276 13.6713C0.711833 13.5358 0.635742 13.3521 0.635742 13.1606V3.7717H14.358C14.5495 3.7717 14.7332 3.84779 14.8687 3.98324C15.0041 4.11868 15.0802 4.30238 15.0802 4.49392ZM8.15696 2.32726H0.635742V1.60503C0.635742 1.41349 0.711833 1.22979 0.847276 1.09435C0.982719 0.958904 1.16642 0.882813 1.35796 0.882812H6.71252L8.15696 2.32726Z" fill="#3A49A4"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 630 B |
@@ -1,10 +0,0 @@
|
||||
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_64_2282)">
|
||||
<path opacity="0.8" d="M4.19676 15.1709C3.49928 14.4753 2.94616 13.6486 2.56917 12.7385C2.19218 11.8284 1.99875 10.8528 2.00001 9.86768C2.00001 5.72543 5.35776 2.36768 9.50001 2.36768C13.6423 2.36768 17 5.72543 17 9.86768C17 14.0099 13.6423 17.3677 9.50001 17.3677H2.00001L4.19676 15.1709ZM6.50001 10.6177C6.50001 11.4133 6.81608 12.1764 7.37869 12.739C7.94129 13.3016 8.70436 13.6177 9.50001 13.6177C10.2957 13.6177 11.0587 13.3016 11.6213 12.739C12.1839 12.1764 12.5 11.4133 12.5 10.6177H6.50001Z" fill="#607B96"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_64_2282">
|
||||
<rect width="18" height="18" fill="white" transform="translate(0.5 0.867676)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 798 B |
@@ -1,10 +0,0 @@
|
||||
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_64_2285)">
|
||||
<path d="M9.06024 14.5627L3.77049 17.5237L4.95174 11.5777L0.500488 7.46168L6.52074 6.74768L9.06024 1.24268L11.5997 6.74768L17.62 7.46168L13.1687 11.5777L14.35 17.5237L9.06024 14.5627Z" fill="#607B96"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_64_2285">
|
||||
<rect width="18" height="18" fill="white" transform="translate(0.0600586 0.867676)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 489 B |
@@ -1,10 +0,0 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="1" clip-path="url(#clip0_64_1617)">
|
||||
<path d="M17 4.87793C18.5913 4.87793 20.1174 5.51007 21.2426 6.63529C22.3679 7.76051 23 9.28663 23 10.8779V14.8779C23 16.4692 22.3679 17.9954 21.2426 19.1206C20.1174 20.2458 18.5913 20.8779 17 20.8779H7C5.4087 20.8779 3.88258 20.2458 2.75736 19.1206C1.63214 17.9954 1 16.4692 1 14.8779V10.8779C1 9.28663 1.63214 7.76051 2.75736 6.63529C3.88258 5.51007 5.4087 4.87793 7 4.87793H17ZM10 9.87793H8V11.8779H6V13.8779H7.999L8 15.8779H10L9.999 13.8779H12V11.8779H10V9.87793ZM18 13.8779H16V15.8779H18V13.8779ZM16 9.87793H14V11.8779H16V9.87793Z" fill="#607B96"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_64_1617">
|
||||
<rect width="24" height="24" fill="white" transform="translate(0 0.87793)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 844 B |
@@ -1,10 +0,0 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="1" clip-path="url(#clip0_64_1620)">
|
||||
<path d="M5 20.6519H19V22.6519H5V20.6519ZM12 18.6519C9.87827 18.6519 7.84344 17.809 6.34315 16.3087C4.84285 14.8084 4 12.7736 4 10.6519C4 8.53012 4.84285 6.49529 6.34315 4.995C7.84344 3.49471 9.87827 2.65186 12 2.65186C14.1217 2.65186 16.1566 3.49471 17.6569 4.995C19.1571 6.49529 20 8.53012 20 10.6519C20 12.7736 19.1571 14.8084 17.6569 16.3087C16.1566 17.809 14.1217 18.6519 12 18.6519Z" fill="#607B96"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_64_1620">
|
||||
<rect width="24" height="24" fill="white" transform="translate(0 0.651855)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 699 B |
@@ -1,10 +0,0 @@
|
||||
<svg class="section-icon" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="1" clip-path="url(#clip0_64_1623)">
|
||||
<path d="M3 3.65186H21C21.2652 3.65186 21.5196 3.75721 21.7071 3.94475C21.8946 4.13228 22 4.38664 22 4.65186V20.6519C22 20.9171 21.8946 21.1714 21.7071 21.359C21.5196 21.5465 21.2652 21.6519 21 21.6519H3C2.73478 21.6519 2.48043 21.5465 2.29289 21.359C2.10536 21.1714 2 20.9171 2 20.6519V4.65186C2 4.38664 2.10536 4.13228 2.29289 3.94475C2.48043 3.75721 2.73478 3.65186 3 3.65186ZM12 15.6519V17.6519H18V15.6519H12ZM8.414 12.6519L5.586 15.4799L7 16.8949L11.243 12.6519L7 8.40886L5.586 9.82386L8.414 12.6519Z" fill="#607B96"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_64_1623">
|
||||
<rect width="24" height="24" fill="white" transform="translate(0 0.651855)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 836 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.22222 2.66667V4.44444H1.77778V14.2222H11.5556V9.77778H13.3333V15.1111C13.3333 15.3469 13.2397 15.573 13.073 15.7397C12.9063 15.9064 12.6802 16 12.4444 16H0.888889C0.653141 16 0.427048 15.9064 0.260349 15.7397C0.0936505 15.573 0 15.3469 0 15.1111V3.55556C0 3.31981 0.0936505 3.09372 0.260349 2.92702C0.427048 2.76032 0.653141 2.66667 0.888889 2.66667H6.22222ZM16 0V7.11111H14.2222V3.03378L7.29511 9.96178L6.03822 8.70489L12.9644 1.77778H8.88889V0H16Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 583 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.44684 0.832031H16.0466C16.2617 0.832031 16.468 0.917486 16.6201 1.0696C16.7722 1.22171 16.8577 1.42801 16.8577 1.64313V14.6207C16.8577 14.8358 16.7722 15.0421 16.6201 15.1942C16.468 15.3463 16.2617 15.4318 16.0466 15.4318H1.44684C1.23172 15.4318 1.02542 15.3463 0.873307 15.1942C0.721197 15.0421 0.635742 14.8358 0.635742 14.6207V1.64313C0.635742 1.42801 0.721197 1.22171 0.873307 1.0696C1.02542 0.917486 1.23172 0.832031 1.44684 0.832031ZM4.69122 10.9707V7.72635L6.31342 9.34854L7.93561 7.72635V10.9707H9.5578V5.29306H7.93561L6.31342 6.91525L4.69122 5.29306H3.06903V10.9707H4.69122ZM13.6133 8.53745V5.29306H11.9911V8.53745H10.3689L12.8022 10.9707L15.2355 8.53745H13.6133Z" fill="#81A1C1"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 806 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48.77" height="32" viewBox="0 0 256 168"><path fill="#00DC82" d="M143.618 167.029h95.166c3.023 0 5.992-.771 8.61-2.237a16.963 16.963 0 0 0 6.302-6.115a16.324 16.324 0 0 0 2.304-8.352c0-2.932-.799-5.811-2.312-8.35L189.778 34.6a16.966 16.966 0 0 0-6.301-6.113a17.626 17.626 0 0 0-8.608-2.238c-3.023 0-5.991.772-8.609 2.238a16.964 16.964 0 0 0-6.3 6.113l-16.342 27.473l-31.95-53.724a16.973 16.973 0 0 0-6.304-6.112A17.638 17.638 0 0 0 96.754 0c-3.022 0-5.992.772-8.61 2.237a16.973 16.973 0 0 0-6.303 6.112L2.31 141.975a16.302 16.302 0 0 0-2.31 8.35c0 2.932.793 5.813 2.304 8.352a16.964 16.964 0 0 0 6.302 6.115a17.628 17.628 0 0 0 8.61 2.237h59.737c23.669 0 41.123-10.084 53.134-29.758l29.159-48.983l15.618-26.215l46.874 78.742h-62.492l-15.628 26.214Zm-67.64-26.24l-41.688-.01L96.782 35.796l31.181 52.492l-20.877 35.084c-7.976 12.765-17.037 17.416-31.107 17.416Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 915 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.221 12.496V15.6825C16.2211 15.9107 16.1347 16.1304 15.9791 16.2973C15.8236 16.4642 15.6105 16.5659 15.3829 16.5819C14.9891 16.6089 14.6674 16.6234 14.4187 16.6234C6.45507 16.6234 0 10.1683 0 2.20468C0 1.95596 0.0135175 1.63424 0.0414537 1.24043C0.0574246 1.01283 0.159129 0.799769 0.326046 0.644225C0.492962 0.488682 0.712664 0.402241 0.940819 0.402344H4.12735C4.23913 0.402231 4.34696 0.44367 4.4299 0.518613C4.51283 0.593555 4.56495 0.69665 4.57613 0.80787C4.59686 1.01514 4.61578 1.18005 4.63381 1.30531C4.8129 2.55517 5.17992 3.77076 5.72242 4.91089C5.80803 5.09112 5.75215 5.3065 5.58994 5.42185L3.64522 6.81145C4.83427 9.58205 7.04222 11.79 9.81282 12.979L11.2006 11.0379C11.2573 10.9586 11.3401 10.9017 11.4345 10.8772C11.5288 10.8527 11.6288 10.862 11.717 10.9037C12.857 11.4451 14.0723 11.8112 15.3217 11.9896C15.4469 12.0076 15.6118 12.0274 15.8173 12.0472C15.9284 12.0586 16.0312 12.1108 16.106 12.1937C16.1807 12.2767 16.2221 12.3844 16.2219 12.496H16.221Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 12H9.5L10.5 8H7V6C7 4.97 7 4 9 4H10.5V0.64C10.174 0.597 8.943 0.5 7.643 0.5C4.928 0.5 3 2.157 3 5.2V8H0V12H3V20.5H7V12Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 253 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.9771 0.278076C5.45205 0.278076 0.977052 4.75308 0.977052 10.2781C0.975918 12.3774 1.63587 14.4237 2.86327 16.1268C4.09067 17.8298 5.8232 19.1031 7.81505 19.7661C8.31505 19.8531 8.50205 19.5531 8.50205 19.2901C8.50205 19.0531 8.48905 18.2661 8.48905 17.4281C5.97705 17.8911 5.32705 16.8161 5.12705 16.2531C5.01405 15.9651 4.52705 15.0781 4.10205 14.8401C3.75205 14.6531 3.25205 14.1901 4.08905 14.1781C4.87705 14.1651 5.43905 14.9031 5.62705 15.2031C6.52705 16.7151 7.96505 16.2901 8.53905 16.0281C8.62705 15.3781 8.88905 14.9411 9.17705 14.6911C6.95205 14.4411 4.62705 13.5781 4.62705 9.75308C4.62705 8.66508 5.01405 7.76608 5.65205 7.06508C5.55205 6.81508 5.20205 5.79008 5.75205 4.41508C5.75205 4.41508 6.58905 4.15308 8.50205 5.44108C9.31611 5.21514 10.1572 5.10142 11.0021 5.10308C11.8521 5.10308 12.7021 5.21508 13.5021 5.44008C15.4141 4.14008 16.2521 4.41608 16.2521 4.41608C16.8021 5.79108 16.4521 6.81608 16.3521 7.06608C16.9891 7.76608 17.3771 8.65308 17.3771 9.75308C17.3771 13.5911 15.0401 14.4411 12.8151 14.6911C13.1771 15.0031 13.4901 15.6031 13.4901 16.5411C13.4901 17.8781 13.4771 18.9531 13.4771 19.2911C13.4771 19.5531 13.6651 19.8651 14.1651 19.7651C16.1501 19.0949 17.875 17.8191 19.097 16.1172C20.3189 14.4154 20.9765 12.3732 20.9771 10.2781C20.9771 4.75308 16.5021 0.278076 10.9771 0.278076Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.383 2.15599C19.6196 2.49368 18.81 2.71546 17.981 2.81399C18.8548 2.29142 19.5087 1.469 19.821 0.499988C19.001 0.987988 18.102 1.32999 17.165 1.51499C16.5356 0.841567 15.7014 0.394951 14.792 0.244572C13.8826 0.0941939 12.9489 0.248479 12.1363 0.683441C11.3236 1.1184 10.6774 1.80967 10.2981 2.64978C9.91884 3.48989 9.82775 4.43177 10.039 5.32899C8.37611 5.24564 6.74933 4.81351 5.26429 4.06065C3.77924 3.30779 2.46913 2.25104 1.419 0.958988C1.04729 1.59744 0.851955 2.32321 0.853 3.06199C0.853 4.51199 1.591 5.79299 2.713 6.54299C2.04901 6.52208 1.39963 6.34277 0.819 6.01999V6.07199C0.8192 7.03769 1.15337 7.9736 1.76485 8.72105C2.37633 9.46849 3.22748 9.98146 4.174 10.173C3.55761 10.34 2.91131 10.3646 2.284 10.245C2.55087 11.0762 3.07101 11.8032 3.77159 12.3241C4.47218 12.845 5.31813 13.1338 6.191 13.15C5.32348 13.8313 4.33018 14.335 3.26788 14.6322C2.20558 14.9293 1.09513 15.0142 0 14.882C1.9117 16.1114 4.1371 16.7641 6.41 16.762C14.103 16.762 18.31 10.389 18.31 4.86199C18.31 4.68199 18.305 4.49999 18.297 4.32199C19.1159 3.73016 19.8226 2.99701 20.384 2.15699L20.383 2.15599Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="20" height="21" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.81172 0.560547L19.1117 3.88055L17.6937 16.1905L9.81172 20.5605L1.92972 16.1905L0.511719 3.88055L9.81172 0.560547ZM9.81172 2.77055L3.99772 15.8205H6.16572L7.33472 12.9005H12.2687L13.4387 15.8205H15.6057L9.81172 2.77055ZM11.5097 11.1005H8.11372L9.81172 7.01055L11.5097 11.1005Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 397 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.31109 0L2.66109 3.34H16.2511L15.8111 5.5H2.23109L1.57109 8.83H15.1611L14.4011 12.64L8.92109 14.45L4.17109 12.64L4.50109 11H1.16109L0.371094 15L8.22109 18L17.2711 15L18.4711 8.97L18.7111 7.76L20.2511 0H3.31109Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 343 B |
@@ -1,11 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="28" height="28" rx="2" fill="#F2A9B9"/>
|
||||
<g clip-path="url(#clip0_3054_915)">
|
||||
<path d="M14.0003 5.48259L21.9215 8.31037L20.7137 18.7953L14.0003 22.5174L7.28687 18.7953L6.0791 8.31037L14.0003 5.48259ZM14.0003 7.36494L9.04827 18.4801H10.8948L11.8905 15.9931H16.093L17.0895 18.4801H18.9353L14.0003 7.36494ZM15.4465 14.4599H12.554L14.0003 10.9763L15.4465 14.4599Z" fill="#011221"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3054_915">
|
||||
<rect width="20.4418" height="20.4418" fill="white" transform="translate(3.7793 3.77911)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 648 B |
@@ -1,11 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="28" height="28" rx="2" fill="#A0BDE1"/>
|
||||
<g clip-path="url(#clip0_3057_1005)">
|
||||
<path d="M8.1668 6.5L7.62513 9.28333H18.9501L18.5835 11.0833H7.2668L6.7168 13.8583H18.0418L17.4085 17.0333L12.8418 18.5417L8.88346 17.0333L9.15846 15.6667H6.37513L5.7168 19L12.2585 21.5L19.8001 19L20.8001 13.975L21.0001 12.9667L22.2835 6.5H8.1668Z" fill="#011221"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3057_1005">
|
||||
<rect width="20" height="20" fill="white" transform="translate(4 4)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 595 B |
@@ -1,11 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="28" height="28" rx="2" fill="#A0BDE1"/>
|
||||
<g clip-path="url(#clip0_3054_955)">
|
||||
<path d="M15.6258 5.48302L7.1084 14.0004L9.73431 16.6263L20.8751 5.48302H15.6258ZM15.6207 13.3173L11.0426 17.9346L15.6181 22.517H20.8896L16.3012 17.9176L20.8913 13.3182H15.6207V13.3173Z" fill="#011221"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3054_955">
|
||||
<rect width="20.4418" height="20.4418" fill="white" transform="translate(3.7793 3.77911)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 552 B |
@@ -1,11 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="28" height="28" rx="2" fill="#A456F0"/>
|
||||
<g clip-path="url(#clip0_3057_1036)">
|
||||
<path d="M14 4C8.5 4 4 8.5 4 14C4 19.5 8.5 24 14 24C19.5 24 24 19.5 24 14C24 8.5 19.5 4 14 4ZM8.429 19.571C6.929 18.071 6.143 16.071 6.143 14.143L13.929 21.857C11.929 21.786 9.929 21.071 8.429 19.571V19.571ZM15.714 21.643L6.357 12.286C7.143 8.786 10.286 6.143 14 6.143C16.643 6.143 18.929 7.429 20.357 9.357L19.286 10.286C18.07 8.643 16.143 7.57 14 7.57C11.214 7.57 8.857 9.356 7.929 11.856L16.143 20.07C18.214 19.356 19.786 17.57 20.286 15.428H16.857V14H21.857C21.857 17.714 19.214 20.857 15.714 21.643V21.643Z" fill="#011221"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3057_1036">
|
||||
<rect width="20.4418" height="20.4418" fill="white" transform="translate(4 4)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 869 B |
@@ -1,11 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="28" height="28" rx="2" fill="#F2A9B9"/>
|
||||
<g clip-path="url(#clip0_3057_1036)">
|
||||
<path d="M14.2207 20.3989L18.8407 19.1429L19.4637 12.3649H11.2467L11.0427 10.1109H19.6687L19.8957 7.89989H8.5457L9.1817 14.5779H17.0017L16.7407 17.4439L14.2207 18.1109L11.7007 17.4439L11.5427 15.5999H9.2727L9.6017 19.1439L14.2207 20.3989ZM5.2207 4.22089H23.2207L21.5977 22.2209L14.2207 24.2209L6.8437 22.2209L5.2207 4.22089Z" fill="#011221"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3057_1036">
|
||||
<rect width="20.4418" height="20.4418" fill="white" transform="translate(4 4)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 682 B |
@@ -1,11 +0,0 @@
|
||||
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.652832" y="0.695801" width="28" height="28" rx="2" fill="#86E1F9"/>
|
||||
<g clip-path="url(#clip0_3054_457)">
|
||||
<path d="M14.6532 15.9733C14.3144 15.9733 13.9894 15.8387 13.7498 15.5991C13.5102 15.3595 13.3756 15.0345 13.3756 14.6957C13.3756 14.3568 13.5102 14.0318 13.7498 13.7922C13.9894 13.5526 14.3144 13.418 14.6532 13.418C14.9921 13.418 15.317 13.5526 15.5566 13.7922C15.7962 14.0318 15.9308 14.3568 15.9308 14.6957C15.9308 15.0345 15.7962 15.3595 15.5566 15.5991C15.317 15.8387 14.9921 15.9733 14.6532 15.9733ZM14.2035 18.5234C14.3526 18.7022 14.5025 18.876 14.6532 19.0421C14.804 18.876 14.9539 18.7031 15.1029 18.5234C14.8032 18.5297 14.5033 18.5297 14.2035 18.5234ZM12.5043 18.4169C11.8502 18.3488 11.2004 18.2442 10.5581 18.1035C10.4942 18.4016 10.4456 18.6912 10.4133 18.9688C10.2514 20.3171 10.4771 21.1365 10.8204 21.3341C11.1637 21.5326 11.9856 21.3179 13.0733 20.5045C13.2973 20.3367 13.523 20.1502 13.7495 19.9466C13.3062 19.4604 12.8905 18.9497 12.5043 18.4169ZM18.7484 18.1035C18.1377 18.2397 17.4853 18.3454 16.8022 18.4169C16.416 18.9497 16.0003 19.4604 15.5569 19.9466C15.7835 20.151 16.0092 20.3367 16.2332 20.5045C17.3209 21.3179 18.1428 21.5326 18.4861 21.3341C18.8293 21.1365 19.0542 20.3171 18.894 18.9688C18.8589 18.6783 18.8106 18.3896 18.7492 18.1035H18.7484ZM19.9834 17.7738C20.4749 20.0216 20.2168 21.8111 19.1249 22.4414C18.0329 23.0717 16.3542 22.4005 14.6532 20.8512C12.9523 22.4005 11.2735 23.0708 10.1816 22.4405C9.08966 21.8102 8.83159 20.0216 9.32219 17.773C7.12981 17.0754 5.70996 15.9562 5.70996 14.6957C5.70996 13.4351 7.12981 12.3167 9.32219 11.6175C8.83159 9.36972 9.08966 7.58022 10.1816 6.94993C11.2735 6.31964 12.9523 6.99081 14.6532 8.54013C16.3542 6.99081 18.0329 6.32049 19.1249 6.95078C20.2168 7.58107 20.4749 9.36972 19.9843 11.6183C22.1766 12.3159 23.5965 13.4351 23.5965 14.6957C23.5965 15.9562 22.1766 17.0746 19.9843 17.7738H19.9834ZM13.7487 9.44468C13.5321 9.24861 13.3067 9.06246 13.0733 8.88679C11.9856 8.07337 11.1637 7.85874 10.8204 8.05719C10.4771 8.25479 10.2523 9.07417 10.4124 10.4225C10.4465 10.701 10.4942 10.9897 10.5572 11.2878C11.1999 11.1471 11.8499 11.0424 12.5043 10.9744C12.9089 10.4182 13.3262 9.90632 13.7495 9.44468H13.7487ZM16.8022 10.9744C17.4853 11.0459 18.1377 11.1524 18.7484 11.2878C18.8123 10.9897 18.8608 10.7001 18.8932 10.4225C19.055 9.07417 18.8293 8.25479 18.4861 8.05719C18.1428 7.85874 17.3209 8.07337 16.2332 8.88679C15.9995 9.06244 15.7738 9.24859 15.5569 9.44468C15.9802 9.90632 16.3976 10.4182 16.8022 10.9744ZM15.1029 10.8679C14.9539 10.6891 14.804 10.5153 14.6532 10.3492C14.5025 10.5153 14.3526 10.6882 14.2035 10.8679C14.5033 10.8616 14.8032 10.8616 15.1029 10.8679ZM11.5631 16.9988C11.4077 16.7425 11.2578 16.4829 11.1134 16.2203C11.0325 16.4392 10.9575 16.6547 10.8894 16.8684C11.1083 16.9161 11.3331 16.9596 11.5623 16.9988H11.5631ZM13.2087 17.1981C14.1704 17.2695 15.1361 17.2695 16.0978 17.1981C16.6405 16.4008 17.1234 15.5644 17.5423 14.6957C17.1234 13.8269 16.6405 12.9905 16.0978 12.1932C15.1361 12.1218 14.1704 12.1218 13.2087 12.1932C12.6659 12.9905 12.1831 13.8269 11.7641 14.6957C12.1831 15.5644 12.6659 16.4008 13.2087 17.1981ZM18.1931 13.171C18.274 12.9521 18.3489 12.7367 18.4171 12.5229C18.1938 12.4744 17.9694 12.431 17.7442 12.3925C17.8993 12.6488 18.049 12.9084 18.1931 13.171ZM9.65352 12.8533C9.36393 12.947 9.08966 13.0492 8.83244 13.16C7.58464 13.6949 6.98757 14.2996 6.98757 14.6957C6.98757 15.0917 7.58379 15.6964 8.83244 16.2313C9.08966 16.3421 9.36393 16.4443 9.65352 16.538C9.8426 15.9417 10.0768 15.3234 10.3562 14.6957C10.0878 14.0952 9.85316 13.4801 9.65352 12.8533ZM10.8885 12.5229C10.9575 12.7358 11.0325 12.9521 11.1134 13.1702C11.2578 12.9078 11.4077 12.6486 11.5631 12.3925C11.3331 12.4317 11.1083 12.4752 10.8894 12.5229H10.8885ZM19.6529 16.538C19.9425 16.4443 20.2168 16.3421 20.474 16.2313C21.7218 15.6964 22.3189 15.0917 22.3189 14.6957C22.3189 14.2996 21.7227 13.6949 20.474 13.16C20.2051 13.0454 19.9311 12.9431 19.6529 12.8533C19.4639 13.4496 19.2296 14.0679 18.9503 14.6957C19.2296 15.3234 19.4639 15.9409 19.6529 16.538ZM18.4179 16.8684C18.3489 16.6555 18.274 16.4392 18.1931 16.2211C18.0487 16.4835 17.8987 16.7428 17.7433 16.9988C17.9733 16.9596 18.1982 16.9161 18.4171 16.8684H18.4179Z" fill="#011221"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3054_457">
|
||||
<rect width="20.4418" height="20.4418" fill="white" transform="translate(4.43213 4.47485)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.4 KiB |
@@ -1,11 +0,0 @@
|
||||
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.652344" y="0.695801" width="28" height="28" rx="2" fill="#81D5AF"/>
|
||||
<g clip-path="url(#clip0_3054_407)">
|
||||
<path d="M5.2832 6.60425H8.69016L14.6523 16.8251L20.6145 6.60425H24.0215L14.6523 22.7873L5.2832 6.60425ZM12.6652 6.60425L14.6523 10.0112L16.6395 6.60425H20.0762L14.6523 15.9734L9.22846 6.60425H12.6652Z" fill="#011221"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3054_407">
|
||||
<rect width="20.4418" height="20.4418" fill="white" transform="translate(4.43164 4.47485)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 595 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.7207 0.841309L0.720703 10.8413L3.8037 13.9243L16.8837 0.841309H10.7207ZM10.7147 10.0393L5.3397 15.4603L10.7117 20.8403H16.9007L11.5137 15.4403L16.9027 10.0403H10.7147V10.0393Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 310 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.8115 0.700684C5.31152 0.700684 0.811523 5.20068 0.811523 10.7007C0.811523 16.2007 5.31152 20.7007 10.8115 20.7007C16.3115 20.7007 20.8115 16.2007 20.8115 10.7007C20.8115 5.20068 16.3115 0.700684 10.8115 0.700684ZM5.24052 16.2717C3.74052 14.7717 2.95452 12.7717 2.95452 10.8437L10.7405 18.5577C8.74052 18.4867 6.74052 17.7717 5.24052 16.2717ZM12.5255 18.3437L3.16852 8.98668C3.95452 5.48668 7.09752 2.84368 10.8115 2.84368C13.4545 2.84368 15.7405 4.12968 17.1685 6.05768L16.0975 6.98668C14.8815 5.34368 12.9545 4.27068 10.8115 4.27068C8.02552 4.27068 5.66852 6.05668 4.74052 8.55668L12.9545 16.7707C15.0255 16.0567 16.5975 14.2707 17.0975 12.1287H13.6685V10.7007H18.6685C18.6685 14.4147 16.0255 17.5577 12.5255 18.3437Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 853 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.81152 16.3181L14.4315 15.0621L15.0545 8.28414H6.83752L6.63352 6.03014H15.2595L15.4865 3.81914H4.13652L4.77252 10.4971H12.5925L12.3315 13.3631L9.81152 14.0301L7.29152 13.3631L7.13352 11.5191H4.86352L5.19252 15.0631L9.81152 16.3181ZM0.811523 0.140137H18.8115L17.1885 18.1401L9.81152 20.1401L2.43452 18.1401L0.811523 0.140137Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 457 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.3115 11.5C10.9137 11.5 10.5322 11.342 10.2509 11.0607C9.96956 10.7793 9.81152 10.3978 9.81152 9.99999C9.81152 9.60217 9.96956 9.22064 10.2509 8.93933C10.5322 8.65803 10.9137 8.49999 11.3115 8.49999C11.7093 8.49999 12.0909 8.65803 12.3722 8.93933C12.6535 9.22064 12.8115 9.60217 12.8115 9.99999C12.8115 10.3978 12.6535 10.7793 12.3722 11.0607C12.0909 11.342 11.7093 11.5 11.3115 11.5ZM10.7835 14.494C10.9585 14.704 11.1345 14.908 11.3115 15.103C11.4885 14.908 11.6645 14.705 11.8395 14.494C11.4876 14.5015 11.1355 14.5015 10.7835 14.494ZM8.78852 14.369C8.02058 14.2891 7.25772 14.1662 6.50352 14.001C6.42852 14.351 6.37152 14.691 6.33352 15.017C6.14352 16.6 6.40852 17.562 6.81152 17.794C7.21452 18.027 8.17952 17.775 9.45652 16.82C9.71952 16.623 9.98452 16.404 10.2505 16.165C9.73002 15.5941 9.24192 14.9945 8.78852 14.369ZM16.1195 14.001C15.4025 14.161 14.6365 14.285 13.8345 14.369C13.3811 14.9945 12.893 15.5941 12.3725 16.165C12.6385 16.405 12.9035 16.623 13.1665 16.82C14.4435 17.775 15.4085 18.027 15.8115 17.794C16.2145 17.562 16.4785 16.6 16.2905 15.017C16.2492 14.6759 16.1925 14.3369 16.1205 14.001H16.1195ZM17.5695 13.614C18.1465 16.253 17.8435 18.354 16.5615 19.094C15.2795 19.834 13.3085 19.046 11.3115 17.227C9.31452 19.046 7.34352 19.833 6.06152 19.093C4.77952 18.353 4.47652 16.253 5.05252 13.613C2.47852 12.794 0.811523 11.48 0.811523 9.99999C0.811523 8.51999 2.47852 7.20699 5.05252 6.38599C4.47652 3.74699 4.77952 1.64599 6.06152 0.905992C7.34352 0.165992 9.31452 0.953992 11.3115 2.77299C13.3085 0.953992 15.2795 0.166992 16.5615 0.906992C17.8435 1.64699 18.1465 3.74699 17.5705 6.38699C20.1445 7.20599 21.8115 8.51999 21.8115 9.99999C21.8115 11.48 20.1445 12.793 17.5705 13.614H17.5695ZM10.2495 3.83499C9.99521 3.6048 9.73061 3.38624 9.45652 3.17999C8.17952 2.22499 7.21452 1.97299 6.81152 2.20599C6.40852 2.43799 6.14452 3.39999 6.33252 4.98299C6.37252 5.30999 6.42852 5.64899 6.50252 5.99899C7.25705 5.83373 8.02025 5.71087 8.78852 5.63099C9.26352 4.97799 9.75352 4.37699 10.2505 3.83499H10.2495ZM13.8345 5.63099C14.6365 5.71499 15.4025 5.83999 16.1195 5.99899C16.1945 5.64899 16.2515 5.30899 16.2895 4.98299C16.4795 3.39999 16.2145 2.43799 15.8115 2.20599C15.4085 1.97299 14.4435 2.22499 13.1665 3.17999C12.8921 3.38622 12.6272 3.60477 12.3725 3.83499C12.8695 4.37699 13.3595 4.97799 13.8345 5.63099ZM11.8395 5.50599C11.6645 5.29599 11.4885 5.09199 11.3115 4.89699C11.1345 5.09199 10.9585 5.29499 10.7835 5.50599C11.1355 5.49852 11.4876 5.49852 11.8395 5.50599ZM7.68352 12.704C7.50108 12.4031 7.32504 12.0984 7.15552 11.79C7.06052 12.047 6.97252 12.3 6.89252 12.551C7.14952 12.607 7.41352 12.658 7.68252 12.704H7.68352ZM9.61552 12.938C10.7446 13.0219 11.8784 13.0219 13.0075 12.938C13.6447 12.0019 14.2116 11.0199 14.7035 9.99999C14.2116 8.98007 13.6447 7.99804 13.0075 7.06199C11.8784 6.97813 10.7446 6.97813 9.61552 7.06199C8.97832 7.99804 8.41143 8.98007 7.91952 9.99999C8.41143 11.0199 8.97832 12.0019 9.61552 12.938ZM15.4675 8.20999C15.5625 7.95299 15.6505 7.69999 15.7305 7.44899C15.4684 7.3921 15.205 7.34109 14.9405 7.29599C15.1226 7.5969 15.2983 7.90164 15.4675 8.20999ZM5.44152 7.83699C5.10152 7.94699 4.77952 8.06699 4.47752 8.19699C3.01252 8.82499 2.31152 9.53499 2.31152 9.99999C2.31152 10.465 3.01152 11.175 4.47752 11.803C4.77952 11.933 5.10152 12.053 5.44152 12.163C5.66352 11.463 5.93852 10.737 6.26652 9.99999C5.95135 9.29496 5.67592 8.57283 5.44152 7.83699ZM6.89152 7.44899C6.97252 7.69899 7.06052 7.95299 7.15552 8.20899C7.32505 7.90096 7.50109 7.59656 7.68352 7.29599C7.41352 7.34199 7.14952 7.39299 6.89252 7.44899H6.89152ZM17.1815 12.163C17.5215 12.053 17.8435 11.933 18.1455 11.803C19.6105 11.175 20.3115 10.465 20.3115 9.99999C20.3115 9.53499 19.6115 8.82499 18.1455 8.19699C17.8298 8.06249 17.5081 7.94237 17.1815 7.83699C16.9595 8.53699 16.6845 9.26299 16.3565 9.99999C16.6845 10.737 16.9595 11.462 17.1815 12.163ZM15.7315 12.551C15.6505 12.301 15.5625 12.047 15.4675 11.791C15.298 12.099 15.122 12.4034 14.9395 12.704C15.2095 12.658 15.4735 12.607 15.7305 12.551H15.7315Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.1 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.811523 0.92041H4.81152L11.8115 12.9204L18.8115 0.92041H22.8115L11.8115 19.9204L0.811523 0.92041ZM9.47852 0.92041L11.8115 4.92041L14.1445 0.92041H18.1795L11.8115 11.9204L5.44352 0.92041H9.47852Z" fill="#607B96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 327 B |
Binary file not shown.
|
Before Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 506 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 844 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 262 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 255 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 607 KiB |
BIN
public/logo.png
BIN
public/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user