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 Main from './pages/Main'
|
||||
import About from './pages/About'
|
||||
import { Route, Routes } from "react-router-dom";
|
||||
import Main from "./pages/Main";
|
||||
import About from "./pages/About";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
index
|
||||
element={<Main />}
|
||||
/>
|
||||
<Route
|
||||
path="/about"
|
||||
element={<About />}
|
||||
/>
|
||||
<Route path="/" index element={<Main />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
</Routes>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { ReactNode } from 'react'
|
||||
import { ReactNode } from "react";
|
||||
|
||||
interface BoldProps {
|
||||
children: ReactNode;
|
||||
|
@ -6,9 +6,5 @@ interface BoldProps {
|
|||
}
|
||||
|
||||
export const B = ({ children, col = "var(--textcolor)" }: BoldProps) => {
|
||||
return (
|
||||
<span style={{fontWeight: "bold", color: col}}>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return <span style={{ fontWeight: "bold", color: col }}>{children}</span>;
|
||||
};
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Children, ReactNode } from 'react'
|
||||
import { Children, ReactNode } from "react";
|
||||
|
||||
interface BulletProps {
|
||||
indents?: number;
|
||||
|
@ -6,12 +6,11 @@ interface BulletProps {
|
|||
}
|
||||
|
||||
function Bullet({ indents, children }: BulletProps) {
|
||||
|
||||
return (
|
||||
<div style={{ textIndent: indents ? `${indents}em` : "0em" }}>
|
||||
• {children}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Bullet;
|
||||
|
|
|
@ -7,7 +7,11 @@ export interface DescriptionProps extends TextProps {
|
|||
noBackground?: boolean;
|
||||
}
|
||||
|
||||
export const Description = ({ noBackground, main, children }: DescriptionProps) => {
|
||||
export const Description = ({
|
||||
noBackground,
|
||||
main,
|
||||
children,
|
||||
}: DescriptionProps) => {
|
||||
return (
|
||||
<div
|
||||
className={noBackground ? "description no-background" : "description"}
|
||||
|
|
|
@ -15,7 +15,8 @@ export interface TextLinks extends GenericProps {
|
|||
export const Header = ({ fadeIn, links }: TextLinks) => {
|
||||
return (
|
||||
<div className={fadeIn ? "header fade-in" : "header"}>
|
||||
{links && links.map((link) => {
|
||||
{links &&
|
||||
links.map((link) => {
|
||||
return (
|
||||
<Link
|
||||
className="header-link"
|
||||
|
|
|
@ -6,11 +6,5 @@ export interface MessageProps {
|
|||
}
|
||||
|
||||
export const Message = ({ className, children }: MessageProps) => {
|
||||
return (
|
||||
<div
|
||||
className={"message zoom-in" + " " + className}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
return <div className={"message zoom-in" + " " + className}>{children}</div>;
|
||||
};
|
||||
|
|
|
@ -12,7 +12,7 @@ export const Title = ({ children, noBackground, glow }: TitleProps) => {
|
|||
let result = "title";
|
||||
|
||||
if (noBackground) {
|
||||
result += " no-background"
|
||||
result += " no-background";
|
||||
}
|
||||
|
||||
if (glow) {
|
||||
|
@ -20,10 +20,9 @@ export const Title = ({ children, noBackground, glow }: TitleProps) => {
|
|||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<div>
|
||||
<p className={determineClasses()}>{children}</p>
|
||||
</div>
|
||||
|
|
|
@ -3,11 +3,14 @@ body {
|
|||
animation: zoom-in 0.3s;
|
||||
}
|
||||
|
||||
.at:link, .at:visited {
|
||||
.at:link,
|
||||
.at:visited {
|
||||
color: var(--main);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.15s, transform 0.15s;
|
||||
transition:
|
||||
opacity 0.15s,
|
||||
transform 0.15s;
|
||||
}
|
||||
|
||||
.at:hover {
|
||||
|
@ -32,7 +35,8 @@ body {
|
|||
color 0s;
|
||||
}
|
||||
|
||||
.reg-link:link, .reg-link:visited {
|
||||
.reg-link:link,
|
||||
.reg-link:visited {
|
||||
color: var(--main);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
@ -1,14 +1,21 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
import { B, Description, Header, Message, Title, TextLink } from '../components'
|
||||
import Bullet from '../components/Bullet'
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
B,
|
||||
Description,
|
||||
Header,
|
||||
Message,
|
||||
Title,
|
||||
TextLink,
|
||||
} from "../components";
|
||||
import Bullet from "../components/Bullet";
|
||||
|
||||
function About() {
|
||||
const links: TextLink[] = [
|
||||
{
|
||||
text: "Back",
|
||||
link: "/"
|
||||
}
|
||||
]
|
||||
link: "/",
|
||||
},
|
||||
];
|
||||
|
||||
const serverLink = (
|
||||
<Link
|
||||
|
@ -41,11 +48,7 @@ function About() {
|
|||
);
|
||||
|
||||
const neovimLink = (
|
||||
<Link
|
||||
className="reg-link"
|
||||
target="_blank"
|
||||
to="https://neovim.io"
|
||||
>
|
||||
<Link className="reg-link" target="_blank" to="https://neovim.io">
|
||||
Neovim
|
||||
</Link>
|
||||
);
|
||||
|
@ -63,25 +66,26 @@ function About() {
|
|||
</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>
|
||||
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.
|
||||
</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>
|
||||
</Description>
|
||||
</Message>
|
||||
|
||||
<Message>
|
||||
<Description>
|
||||
<p>
|
||||
So far, I've managed to famaliarize myself with these...
|
||||
</p>
|
||||
<p>So far, I've managed to famaliarize myself with these...</p>
|
||||
|
||||
<B>Languages:</B>
|
||||
<Bullet>HTML/CSS</Bullet>
|
||||
|
@ -107,7 +111,7 @@ function About() {
|
|||
</Description>
|
||||
</Message>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default About;
|
||||
|
|
|
@ -30,8 +30,8 @@ function Main() {
|
|||
},
|
||||
{
|
||||
text: "About",
|
||||
link: "/about"
|
||||
}
|
||||
link: "/about",
|
||||
},
|
||||
];
|
||||
|
||||
const buttons: Buttons[] = [
|
||||
|
@ -70,7 +70,17 @@ function Main() {
|
|||
return (
|
||||
<>
|
||||
<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 id="main" style={{ display: displayed }}>
|
||||
|
@ -87,15 +97,21 @@ function Main() {
|
|||
height={130}
|
||||
src="/potato.png"
|
||||
/>
|
||||
<p className={checkTimesClicked() ? "easter-egg" : "easter-egg hidden"}>
|
||||
<p
|
||||
className={checkTimesClicked() ? "easter-egg" : "easter-egg hidden"}
|
||||
>
|
||||
Stop that!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<ButtonRow buttons={buttons} fadeIn />
|
||||
|
|
Loading…
Reference in a new issue