Merge pull request #2 from Guz013/deploy

Deploy
This commit is contained in:
Guz
2022-03-30 09:58:17 -03:00
committed by GitHub
20 changed files with 239 additions and 8 deletions

2
.github/TODO.md vendored
View File

@@ -8,7 +8,7 @@
- [ ] Create more pages and a simple but dynamic navigation bar. [^](../src/pages/index.tsx#L7)
#### Improvements
- [ ] Add `<meta/>` tags and [schemas](https://schema.org) for better Search Engine Optimization (SEO).
- [x] `1.0.1` Add `<meta/>` tags and [schemas](https://schema.org) for better Search Engine Optimization (SEO).
- [ ] Import dynamically the social media icons based on the socials.json file to get the paths or file names without needing to manually go and add a new switch statement. [^](../src/components/SocialIcon.tsx#L6)

View File

@@ -2,4 +2,18 @@
module.exports = {
reactStrictMode: true,
extends: ['plugin:@next/next/recommended'],
async redirects() {
return [
{
source: '/2022',
destination: '/202X',
permanent: true,
},
{
source: '/2023',
destination: '/202X',
permanent: true,
},
];
},
};

View File

@@ -1,7 +1,7 @@
{
"name": "website",
"private": true,
"version": "1.0.0",
"version": "1.0.1",
"scripts": {
"dev": "next dev",
"build": "tsm src && tcm src && next build",

View File

@@ -1,4 +1,5 @@
{
"name": "Gustavo \"Guz\" L. de Mello",
"support": {
"url": "https://ko-fi.com/guz013",
"platform": "Ko-Fi"

View File

@@ -13,7 +13,7 @@ const Footer = () => {
</a>
<p className={style.copyright}>
By Gustavo &quot;Guz&quot; L. de Mello {new Date().getFullYear()}
By {info.name} {new Date().getFullYear()}
</p>
<a href={info.source.repo} target='_blank' rel='noreferrer'>

39
src/components/Meta.tsx Normal file
View File

@@ -0,0 +1,39 @@
import socials from '@content/socials.json';
import info from '@content/info.json';
const commons = {
title: 'Guz013 - Someone who\'s trying to improve.',
description: 'Personal website of Guz013, where to find social medias and professional contact.',
image: 'https://pbs.twimg.com/profile_images/1477086304856911879/H0Vx9YxM_400x400.jpg',
};
function Meta() {
return (
<>
<meta name='description' content={commons.description}/>
<meta name='author' content={info.name}/>
{/* Schema.org markup */}
<meta itemProp='name' content={commons.title}/>
<meta itemProp='description' content={commons.description}/>
<meta itemProp='image' content={commons.image}/>
{/* Twitter Card: */}
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content={`@${socials.find(i => { return i.name === 'twitter'; })?.username}`}/>
<meta name='twitter:title' content={commons.title}/>
<meta name='twitter:description' content={commons.description}/>
<meta name='twitter:image:src' content={commons.image}/>
{/* Open Graph */}
<meta property='og:type' content='website'/>
<meta property='og:title' content={commons.title}/>
<meta property='og:description' content={commons.description}/>
<meta property='og:url' content='https://guz.vercel.app'/>
<meta property='og:site_name' content={'Guz\'s Website'}/>
<meta property='og:image' content={commons.image}/>
</>
);
}
export default Meta;

27
src/pages/202X.tsx Normal file
View File

@@ -0,0 +1,27 @@
import type { NextPage } from 'next';
import Head from 'next/head';
import style from '@modules/pages/202X';
const Page: NextPage = () => {
return (
<>
<Head>
<title>202X</title>
</Head>
<main className={style.main}>
<div>
<p className={`${style.glitch} ${style.date}`}>
XX/XX/<span className={style.year}></span>
</p>
<p className={`${style.glitch} ${style.quote}`}>
Sometimes, is better just wait
</p>
<p className={style.coming}>coming soon</p>
</div>
</main>
</>
);
};
export default Page;

View File

@@ -1,6 +1,6 @@
import Link from 'next/link';
import style from '@modules/error';
import style from '@modules/pages/error';
const Card = () => {
return (

View File

@@ -1,12 +1,18 @@
import '../styles/globals.scss';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import Footer from '@components/Footer';
import Background from '@components/Background';
import Meta from '@components/Meta';
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<title>Guz</title>
<Meta />
</Head>
<Component {...pageProps} />
<Footer />
<Background />

View File

@@ -1,6 +1,6 @@
import Link from 'next/link';
import style from '@modules/error';
import style from '@modules/pages/error';
const Error = ({ statusCode }) => {
return (

View File

@@ -1,6 +1,6 @@
import type { NextPage } from 'next';
import style from '@modules/index';
import style from '@modules/pages/index';
import Card from '@components/Card';
/*

View File

@@ -8,6 +8,7 @@
color: $main-color;
}
body {
margin: 0;
padding: 0;

78
src/styles/mixins.scss Normal file
View File

@@ -0,0 +1,78 @@
@mixin glitchShadow($shadow1Pos, $shadow2Pos) {
$shadow-color-1: #f00;
$shadow-color-2: #0ff;
text-shadow: $shadow1Pos 0 $shadow-color-1, $shadow2Pos 0 $shadow-color-2;
}
@mixin glitchTextEffect($changeStyle: true, $shadow: true, $time: 2s) {
$animationId: unique-id();
$steps: 50;
@keyframes glitchAnim-#{$animationId} {
@for $i from 1 to $steps {
$step: calc(100% / $steps * $i);
$text-style: (
normal,
normal,
normal,
italic,
normal,
);
$text-trans: (
none,
none,
uppercase,
none,
none,
lowercase,
capitalize,
none
);
$text-decor: (
none,
none,
line-through,
underline,
none,
);
$transIndex: random(length($text-trans));
$styleIndex: random(length($text-style));
$decorIndex: random(length($text-decor));
#{$step} {
@if $shadow {
@include glitchShadow(
#{random(4)}px #{random(4)}px,
#{calc(random(4) * -1)}px #{calc(random(4) * -1)}px
);
}
@if $changeStyle {
font-style: nth($text-style, $styleIndex);
text-transform: nth($text-trans, $transIndex);
text-decoration: nth($text-decor, $decorIndex);
}
}
}
}
animation: glitchAnim-#{$animationId} $time infinite;
}
@mixin changingText($text1, $text2, $time: 10s) {
$animationId: unique-id();
$steps: 50;
@keyframes changingText-#{$animationId} {
@for $i from 1 to $steps {
$step: calc(100% / $steps * $i);
#{$step} {
@if random(60) > 50 {
content: '#{$text1}';
} @else {
content: '#{$text2}';
}
}
}
}
animation: changingText-#{$animationId} $time infinite;
}

View File

@@ -0,0 +1,56 @@
@import '../../variables.scss';
@import '../../commons.scss';
@import '../../mixins.scss';
$index: 100;
.main {
z-index: $index + 1;
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #000;
color: #fff;
font-family: $guz-font;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.glitch {
@include glitchTextEffect(true, false, 5s);
}
.date {
font-size: 1.7em;
$spacing: 0.5em;
letter-spacing: $spacing;
padding-left: $spacing;
margin: 0;
.year {
&:after {
content: '2022';
@include changingText('2022', '2023');
}
}
}
.quote {
font-family: $console-font;
font-size: 0.9em;
margin: 10px;
}
.coming {
font-family: $console-font;
font-size: 0.6em;
opacity: 0.2;
}
}

View File

@@ -0,0 +1,8 @@
export const changingTextUrdt288: string;
export const coming: string;
export const date: string;
export const glitch: string;
export const glitchAnimUrdt27P: string;
export const main: string;
export const quote: string;
export const year: string;

View File

@@ -1,5 +1,5 @@
@import '../variables.scss';
@import '../commons.scss';
@import '../../variables.scss';
@import '../../commons.scss';
.body {
* {

View File

@@ -18,6 +18,7 @@
"paths": {
"@public/*": [ "./public/*" ],
"@content/*": [ "./public/content/*" ],
"@meta/*": [ "./public/content/meta/*" ],
"@fonts/*": [ "./public/fonts/*" ],
"@icons/*": [ "./public/icons/*" ],
"@images/*": [ "./public/images/*" ],