Prettier
This commit is contained in:
parent
83075ef125
commit
bab35d0ad5
21
src/App.tsx
21
src/App.tsx
|
@ -1,21 +1,14 @@
|
||||||
import { Route, Routes } from 'react-router-dom'
|
import { Route, Routes } from "react-router-dom";
|
||||||
import Main from './pages/Main'
|
import Main from "./pages/Main";
|
||||||
import About from './pages/About'
|
import About from "./pages/About";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route
|
<Route path="/" index element={<Main />} />
|
||||||
path="/"
|
<Route path="/about" element={<About />} />
|
||||||
index
|
|
||||||
element={<Main />}
|
|
||||||
/>
|
|
||||||
<Route
|
|
||||||
path="/about"
|
|
||||||
element={<About />}
|
|
||||||
/>
|
|
||||||
</Routes>
|
</Routes>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App
|
export default App;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { ReactNode } from 'react'
|
import { ReactNode } from "react";
|
||||||
|
|
||||||
interface BoldProps {
|
interface BoldProps {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
|
@ -6,9 +6,5 @@ interface BoldProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const B = ({ children, col = "var(--textcolor)" }: BoldProps) => {
|
export const B = ({ children, col = "var(--textcolor)" }: BoldProps) => {
|
||||||
return (
|
return <span style={{ fontWeight: "bold", color: col }}>{children}</span>;
|
||||||
<span style={{fontWeight: "bold", color: col}}>
|
};
|
||||||
{children}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Children, ReactNode } from 'react'
|
import { Children, ReactNode } from "react";
|
||||||
|
|
||||||
interface BulletProps {
|
interface BulletProps {
|
||||||
indents?: number;
|
indents?: number;
|
||||||
|
@ -6,12 +6,11 @@ interface BulletProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
function Bullet({ indents, children }: BulletProps) {
|
function Bullet({ indents, children }: BulletProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{textIndent: indents ? `${indents}em` : "0em"}}>
|
<div style={{ textIndent: indents ? `${indents}em` : "0em" }}>
|
||||||
• {children}
|
• {children}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Bullet;
|
export default Bullet;
|
||||||
|
|
|
@ -7,11 +7,15 @@ export interface DescriptionProps extends TextProps {
|
||||||
noBackground?: boolean;
|
noBackground?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Description = ({ noBackground, main, children }: DescriptionProps) => {
|
export const Description = ({
|
||||||
|
noBackground,
|
||||||
|
main,
|
||||||
|
children,
|
||||||
|
}: DescriptionProps) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={noBackground ? "description no-background" : "description"}
|
className={noBackground ? "description no-background" : "description"}
|
||||||
style={main ? {margin: "14px"} : {}}
|
style={main ? { margin: "14px" } : {}}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,7 +15,8 @@ export interface TextLinks extends GenericProps {
|
||||||
export const Header = ({ fadeIn, links }: TextLinks) => {
|
export const Header = ({ fadeIn, links }: TextLinks) => {
|
||||||
return (
|
return (
|
||||||
<div className={fadeIn ? "header fade-in" : "header"}>
|
<div className={fadeIn ? "header fade-in" : "header"}>
|
||||||
{links && links.map((link) => {
|
{links &&
|
||||||
|
links.map((link) => {
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
className="header-link"
|
className="header-link"
|
||||||
|
|
|
@ -6,11 +6,5 @@ export interface MessageProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Message = ({ className, children }: MessageProps) => {
|
export const Message = ({ className, children }: MessageProps) => {
|
||||||
return (
|
return <div className={"message zoom-in" + " " + className}>{children}</div>;
|
||||||
<div
|
|
||||||
className={"message zoom-in" + " " + className}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -12,7 +12,7 @@ export const Title = ({ children, noBackground, glow }: TitleProps) => {
|
||||||
let result = "title";
|
let result = "title";
|
||||||
|
|
||||||
if (noBackground) {
|
if (noBackground) {
|
||||||
result += " no-background"
|
result += " no-background";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (glow) {
|
if (glow) {
|
||||||
|
@ -20,10 +20,9 @@ export const Title = ({ children, noBackground, glow }: TitleProps) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<p className={determineClasses()}>{children}</p>
|
<p className={determineClasses()}>{children}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,11 +3,14 @@ body {
|
||||||
animation: zoom-in 0.3s;
|
animation: zoom-in 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.at:link, .at:visited {
|
.at:link,
|
||||||
|
.at:visited {
|
||||||
color: var(--main);
|
color: var(--main);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: opacity 0.15s, transform 0.15s;
|
transition:
|
||||||
|
opacity 0.15s,
|
||||||
|
transform 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.at:hover {
|
.at:hover {
|
||||||
|
@ -32,7 +35,8 @@ body {
|
||||||
color 0s;
|
color 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reg-link:link, .reg-link:visited {
|
.reg-link:link,
|
||||||
|
.reg-link:visited {
|
||||||
color: var(--main);
|
color: var(--main);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,21 @@
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from "react-router-dom";
|
||||||
import { B, Description, Header, Message, Title, TextLink } from '../components'
|
import {
|
||||||
import Bullet from '../components/Bullet'
|
B,
|
||||||
|
Description,
|
||||||
|
Header,
|
||||||
|
Message,
|
||||||
|
Title,
|
||||||
|
TextLink,
|
||||||
|
} from "../components";
|
||||||
|
import Bullet from "../components/Bullet";
|
||||||
|
|
||||||
function About() {
|
function About() {
|
||||||
const links: TextLink[] = [
|
const links: TextLink[] = [
|
||||||
{
|
{
|
||||||
text: "Back",
|
text: "Back",
|
||||||
link: "/"
|
link: "/",
|
||||||
}
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
const serverLink = (
|
const serverLink = (
|
||||||
<Link
|
<Link
|
||||||
|
@ -41,11 +48,7 @@ function About() {
|
||||||
);
|
);
|
||||||
|
|
||||||
const neovimLink = (
|
const neovimLink = (
|
||||||
<Link
|
<Link className="reg-link" target="_blank" to="https://neovim.io">
|
||||||
className="reg-link"
|
|
||||||
target="_blank"
|
|
||||||
to="https://neovim.io"
|
|
||||||
>
|
|
||||||
Neovim
|
Neovim
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
|
@ -63,25 +66,26 @@ function About() {
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
You've probably met me online and checked out my website, I know you IRL, or you're interested in me.
|
You've probably met me online and checked out my website, I know you
|
||||||
|
IRL, or you're interested in me.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
I got very interested in programming at young age, and while my skills have improved a lot, I'm only 16 and got a lot to learn.
|
I got very interested in programming at young age, and while my
|
||||||
|
skills have improved a lot, I'm only 16 and got a lot to learn.
|
||||||
Despite that, I'm proud of what I've done and learned so far.
|
Despite that, I'm proud of what I've done and learned so far.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
You can check out some of my favorite projects, like Simple Review {serverLink} + {clientLink}, and {assistantLink}.
|
You can check out some of my favorite projects, like Simple Review{" "}
|
||||||
|
{serverLink} + {clientLink}, and {assistantLink}.
|
||||||
</p>
|
</p>
|
||||||
</Description>
|
</Description>
|
||||||
</Message>
|
</Message>
|
||||||
|
|
||||||
<Message>
|
<Message>
|
||||||
<Description>
|
<Description>
|
||||||
<p>
|
<p>So far, I've managed to famaliarize myself with these...</p>
|
||||||
So far, I've managed to famaliarize myself with these...
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<B>Languages:</B>
|
<B>Languages:</B>
|
||||||
<Bullet>HTML/CSS</Bullet>
|
<Bullet>HTML/CSS</Bullet>
|
||||||
|
@ -107,7 +111,7 @@ function About() {
|
||||||
</Description>
|
</Description>
|
||||||
</Message>
|
</Message>
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default About;
|
export default About;
|
||||||
|
|
|
@ -30,8 +30,8 @@ function Main() {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "About",
|
text: "About",
|
||||||
link: "/about"
|
link: "/about",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const buttons: Buttons[] = [
|
const buttons: Buttons[] = [
|
||||||
|
@ -69,11 +69,21 @@ function Main() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div id="loader" style={{display: displayed === "" ? "none" : "flex"}}>
|
<div id="loader" style={{ display: displayed === "" ? "none" : "flex" }}>
|
||||||
<img src="/three-dots.svg" height={48} style={{display: "block", marginLeft: "auto", marginRight: "auto", marginTop: "20%", width: "50%"}}/>
|
<img
|
||||||
|
src="/three-dots.svg"
|
||||||
|
height={48}
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
marginLeft: "auto",
|
||||||
|
marginRight: "auto",
|
||||||
|
marginTop: "20%",
|
||||||
|
width: "50%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="main" style={{display: displayed}}>
|
<div id="main" style={{ display: displayed }}>
|
||||||
<Header links={links} fadeIn />
|
<Header links={links} fadeIn />
|
||||||
|
|
||||||
<div className="easter-egg-box">
|
<div className="easter-egg-box">
|
||||||
|
@ -87,15 +97,21 @@ function Main() {
|
||||||
height={130}
|
height={130}
|
||||||
src="/potato.png"
|
src="/potato.png"
|
||||||
/>
|
/>
|
||||||
<p className={checkTimesClicked() ? "easter-egg" : "easter-egg hidden"}>
|
<p
|
||||||
|
className={checkTimesClicked() ? "easter-egg" : "easter-egg hidden"}
|
||||||
|
>
|
||||||
Stop that!
|
Stop that!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="head zoom-in">
|
<div className="head zoom-in">
|
||||||
<Title noBackground glow>@powermaker450</Title>
|
<Title noBackground glow>
|
||||||
|
@powermaker450
|
||||||
|
</Title>
|
||||||
|
|
||||||
<Description noBackground main>Professional FOSS Enjoyer</Description>
|
<Description noBackground main>
|
||||||
|
Professional FOSS Enjoyer
|
||||||
|
</Description>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ButtonRow buttons={buttons} fadeIn />
|
<ButtonRow buttons={buttons} fadeIn />
|
||||||
|
|
Loading…
Reference in a new issue