Skip to content

Commit 23d0b72

Browse files
rushiiMachinerushiiMachine
committed
wip: more content
1 parent da1fb2d commit 23d0b72

File tree

7 files changed

+106
-43
lines changed

7 files changed

+106
-43
lines changed

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
<meta name="darkreader-lock">
77
<meta name="viewport" content="width=device-width, initial-scale=1"/>
88
<meta name="theme-color" content="#000000"/>
9+
<meta name="description" content="personal dev site">
910
<meta name="og:title" content="rushii.dev"/>
10-
<meta name="og:description" content="I'm a software engineer living on the US west coast.
11+
<meta name="og:description" content="I'm a self-taught student developer living on the US west coast.
1112
I love reverse engineering Android apps, writing apps with Jetpack Compose, and working with Kotlin/Rust."/>
1213
<meta name="og:image" content="https://avatars.githubusercontent.com/u/33725716?v=4">
1314
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.0.2/inter.css" integrity="sha512-hijzqbP8sLpfqc1R7Sn4uta4OW5x4KQ5jBY3gPgxOHVZnDX/xzfgMLKZye+qM+kIGjE8YAUeeKWcnwiTx3kK7g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

‎public/robots.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
User-agent: *
2+
Allow: /

‎src/App.tsx‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,48 @@
1-
import type { Component } from 'solid-js';
2-
import { GITHUB } from "./constants";
1+
import { JSX } from 'solid-js';
2+
import { GITHUB_PROFILE_URL } from "./constants";
33
import { Link } from "./Link";
4-
import { OcMarkgithub2 } from "solid-icons/oc";
4+
import { Socials } from "./Socials";
55

6-
const App: Component = () => {
6+
function App(): JSX.Element {
77
return <>
88
<div class="w-screen h-screen flex flex-col pt-16 pl-16 pr-16 site-background">
9-
<div class="flex flex-col space-y-5 grow pt-[5%] pl-[25%] pr-[25%] text-gray-200 text-base">
10-
<div class="flex justify-between align-top">
9+
<div class="flex flex-col space-y-10 h-full pt-[2%] text-gray-200 text-base">
10+
<div class="flex justify-between align-top pl-[25%] pr-[25%]">
1111
<div class="grow">
1212
<Bio/>
1313
</div>
1414
<Socials/>
1515
</div>
16+
1617
<Divider/>
18+
19+
<div class="flex justify-evenly space-x-20 h-full pl-5 pr-5">
20+
21+
<div class="backdrop-brightness-[1.8] w-full rounded-md hover-offset hover:backdrop-brightness-[1.9]"/>
22+
<div class="backdrop-brightness-[1.8] w-full rounded-md hover-offset hover:backdrop-brightness-[1.9]"/>
23+
<div class="backdrop-brightness-[1.8] w-full rounded-md hover-offset hover:backdrop-brightness-[1.9]"/>
24+
</div>
1725
</div>
1826
<Footer/>
1927
</div>
2028
</>;
21-
};
22-
23-
const Socials: Component = () => {
24-
return <>
25-
<div class="flex flex-col w-1/6 justify-evenly items-end pe-8">
26-
<a href={GITHUB} rel="noopener" referrerPolicy="strict-origin">
27-
<div class="group flex space-x-3 text-lg
28-
transition hover:-translate-y-0.5 hover:translate-x-0.5">
29-
<OcMarkgithub2 size={32} color="#FFFFFF"/>
30-
<p class="pt-1 underline-offset-2 text-pink-100 group-hover:underline group-hover:text-pink-300">GitHub</p>
31-
</div>
32-
</a>
33-
</div>
34-
</>
35-
};
29+
}
3630

37-
const Divider: Component = () => {
31+
function Divider(): JSX.Element {
3832
return <div class="h-[1px] bg-white opacity-30"/>;
39-
};
33+
}
4034

41-
const Bio: Component = () => {
35+
function Bio(): JSX.Element {
4236
return <div>
4337
<div class="flex space-x-8 items-center mb-5">
4438
<p class="text-5xl font-semibold">Hi, I'm {" "}
4539
<span class="text-pink-300 font-bold">rushii</span>!</p>
46-
<Link secure url="http://ipa-reader.xyz/?text=%2Fru%CB%90%CA%83i%2F">
47-
<span
48-
class="text-xl text-gray-300 font-semibold hover:text-pink-100 transition-colors no-underline">/ruːʃi/</span>
40+
<Link secure noReferrer
41+
url="http://ipa-reader.xyz/?text=%2Fru%CB%90%CA%83i%2F"
42+
class="text-nowrap text-2xl font-semibold text-gray-300
43+
transition-colors hover:text-pink-100
44+
no-underline hover-offset">
45+
/ruːʃi/
4946
</Link>
5047
</div>
5148
<p>I'm a self-taught student developer living on the US west coast.</p>
@@ -56,15 +53,16 @@ const Bio: Component = () => {
5653
<p class="mt-3.5">You can find me in various communities you've probably never heard of.</p>
5754
<p class="mt-3.5">I am available for freelance work/jobs/internships.</p>
5855
</div>
59-
};
56+
}
6057

61-
const Footer: Component = () => {
58+
function Footer(): JSX.Element {
6259
return <>
6360
<div class="h-20 w-full flex flex-col justify-center items-center text-center text-xs text-gray-300 font-bold">
6461
<p>rushii © All rights reserved</p>
65-
<Link url={`${GITHUB}/rushii.dev`}>Source Code <span class="text-red-500">❤️</span> GitHub</Link>
62+
<Link url={`${GITHUB_PROFILE_URL}/rushii.dev`}>Source Code <span
63+
class="text-red-500">❤️</span> GitHub</Link>
6664
</div>
6765
</>
68-
};
66+
}
6967

7068
export default App;

‎src/Link.tsx‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
1-
import { Component, JSX } from "solid-js";
1+
import { JSX } from "solid-js";
22

3-
type LinkProps<P = {}> = P & { children?: JSX.Element, url: string, secure?: boolean };
4-
type LinkComponent<P = {}> = Component<LinkProps<P>>;
3+
interface LinkProps {
4+
children: JSX.Element,
5+
url: string,
6+
class?: string,
7+
secure?: boolean,
8+
noReferrer?: boolean,
9+
}
510

6-
export const Link: LinkComponent = (props: LinkProps) => {
7-
let rel = props.secure ? "noopener noreferrer" : "noopener";
8-
return <a href={props.url} rel={rel} class="transition-colors text-pink-100 hover:text-pink-200">{props.children}</a>;
9-
}
11+
export function Link(props: LinkProps): JSX.Element {
12+
let rel = props.secure
13+
? "noopener noreferrer"
14+
: "noopener";
15+
let referrer: JSX.HTMLReferrerPolicy = props.noReferrer
16+
? "no-referrer"
17+
: "strict-origin"
18+
19+
return <>
20+
<a href={props.url}
21+
rel={rel}
22+
referrerpolicy={referrer}
23+
class={`transition-colors text-pink-100 hover:text-pink-200
24+
underline underline-offset-2 hover:underline hover:decoration-pink-300 ${props.class ?? ""}`}>
25+
{props.children}
26+
</a>
27+
</>;
28+
}

‎src/Socials.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { For, JSX } from "solid-js";
2+
import { Link } from "./Link";
3+
import { BLOG_URL, GITHUB_PROFILE_URL } from "./constants";
4+
import { ImBlog } from "solid-icons/im";
5+
import { OcMarkgithub2 } from "solid-icons/oc";
6+
7+
const SOCIALS = [
8+
{
9+
name: "GitHub",
10+
url: GITHUB_PROFILE_URL,
11+
icon: () => <OcMarkgithub2 size={32} color="#FFFFFF"/>,
12+
},
13+
{
14+
name: "Blog",
15+
url: BLOG_URL,
16+
icon: () => <ImBlog size={32} color="#FFFFFF"/>,
17+
}
18+
]
19+
20+
function SocialsItem(props: (typeof SOCIALS)[0]): JSX.Element {
21+
return <>
22+
<Link secure url={props.url}>
23+
<div class="group flex space-x-3 text-lg hover-offset">
24+
{props.icon()}
25+
<p class="pt-1 text-pink-100 no-underline group-hover:underline group-hover:text-pink-300">{props.name}</p>
26+
</div>
27+
</Link>
28+
</>;
29+
}
30+
31+
export function Socials(): JSX.Element {
32+
return <>
33+
<div class="flex flex-col justify-center space-y-5 items-start
34+
border-l-[0.5px] border-white border-opacity-30 pl-10">
35+
<For each={SOCIALS}>
36+
{(item) => SocialsItem(item)}
37+
</For>
38+
</div>
39+
</>;
40+
}

‎src/constants.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
/** My current GitHub profile. */
2-
export const GITHUB: string = "https://github.com/rushiiMachine";
1+
export const GITHUB_PROFILE_URL: string = "https://github.com/rushiiMachine";
2+
export const BLOG_URL: string = "https://rushii.materii.dev"

‎src/index.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ a {
1313
.site-background {
1414
background-size: 100%;
1515
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
16-
url("/background.webp")
17-
no-repeat;
16+
url("/background.webp") no-repeat;
17+
}
18+
19+
.hover-offset {
20+
@apply transition hover:-translate-y-0.5 hover:translate-x-0.5
1821
}

0 commit comments

Comments
 (0)