2
.github/TODO.md
vendored
2
.github/TODO.md
vendored
@@ -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)
|
||||
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{
|
||||
"name": "Gustavo \"Guz\" L. de Mello",
|
||||
"support": {
|
||||
"url": "https://ko-fi.com/guz013",
|
||||
"platform": "Ko-Fi"
|
||||
|
||||
@@ -13,7 +13,7 @@ const Footer = () => {
|
||||
</a>
|
||||
|
||||
<p className={style.copyright}>
|
||||
By Gustavo "Guz" 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
39
src/components/Meta.tsx
Normal 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
27
src/pages/202X.tsx
Normal 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;
|
||||
@@ -1,6 +1,6 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
import style from '@modules/error';
|
||||
import style from '@modules/pages/error';
|
||||
|
||||
const Card = () => {
|
||||
return (
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
import style from '@modules/error';
|
||||
import style from '@modules/pages/error';
|
||||
|
||||
const Error = ({ statusCode }) => {
|
||||
return (
|
||||
|
||||
@@ -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';
|
||||
/*
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
78
src/styles/mixins.scss
Normal file
78
src/styles/mixins.scss
Normal 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;
|
||||
}
|
||||
56
src/styles/modules/pages/202X.module.scss
Normal file
56
src/styles/modules/pages/202X.module.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
8
src/styles/modules/pages/202X.module.scss.d.ts
vendored
Normal file
8
src/styles/modules/pages/202X.module.scss.d.ts
vendored
Normal 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;
|
||||
@@ -1,5 +1,5 @@
|
||||
@import '../variables.scss';
|
||||
@import '../commons.scss';
|
||||
@import '../../variables.scss';
|
||||
@import '../../commons.scss';
|
||||
|
||||
.body {
|
||||
* {
|
||||
@@ -18,6 +18,7 @@
|
||||
"paths": {
|
||||
"@public/*": [ "./public/*" ],
|
||||
"@content/*": [ "./public/content/*" ],
|
||||
"@meta/*": [ "./public/content/meta/*" ],
|
||||
"@fonts/*": [ "./public/fonts/*" ],
|
||||
"@icons/*": [ "./public/icons/*" ],
|
||||
"@images/*": [ "./public/images/*" ],
|
||||
|
||||
Reference in New Issue
Block a user