mirror of
https://codeberg.org/theamazing0/portfolio.git
synced 2025-10-30 02:12:19 -04:00
Fixed up home and contact to be responsive and renewed
This commit is contained in:
parent
d6f535d11c
commit
ac4e0cc562
13 changed files with 2595 additions and 3210 deletions
|
|
@ -1,4 +0,0 @@
|
||||||
{
|
|
||||||
"tabWidth": 4,
|
|
||||||
"printWidth": 100
|
|
||||||
}
|
|
||||||
10
.vscode/settings.json
vendored
10
.vscode/settings.json
vendored
|
|
@ -1,10 +0,0 @@
|
||||||
{
|
|
||||||
"cssvar.files": [
|
|
||||||
// Or your custom Pollen bundle
|
|
||||||
"./node_modules/pollen-css/pollen.css"
|
|
||||||
],
|
|
||||||
// Do not ignore css files in node_modules, which is ignored by default
|
|
||||||
"cssvar.ignore": [],
|
|
||||||
// Use Pollen's inbuilt variable ordering
|
|
||||||
"cssvar.disableSort": true
|
|
||||||
}
|
|
||||||
5
.zed/settings.json
Normal file
5
.zed/settings.json
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
// Folder-specific settings
|
||||||
|
//
|
||||||
|
// For a full list of overridable settings, and general information on folder-specific settings,
|
||||||
|
// see the documentation: https://zed.dev/docs/configuring-zed#settings-files
|
||||||
|
{ "tab_size": 2 }
|
||||||
5035
package-lock.json
generated
5035
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -10,10 +10,13 @@
|
||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/check": "^0.6.0",
|
"@astrojs/check": "^0.9.4",
|
||||||
"@fontsource-variable/inter": "^5.0.18",
|
"@fontsource-variable/inter": "^5.0.18",
|
||||||
"astro": "^4.7.1",
|
"astro": "^5.12.1",
|
||||||
"pollen-css": "^4.6.2",
|
|
||||||
"typescript": "^5.4.5"
|
"typescript": "^5.4.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"prettier": "^3.6.2",
|
||||||
|
"prettier-plugin-astro": "^0.14.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
---
|
|
||||||
interface Props {
|
|
||||||
title: string;
|
|
||||||
body: string;
|
|
||||||
href: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { href, title, body } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<li class="link-card">
|
|
||||||
<a href={href}>
|
|
||||||
<h2>
|
|
||||||
{title}
|
|
||||||
<span>→</span>
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
{body}
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<style>
|
|
||||||
.link-card {
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
padding: 1px;
|
|
||||||
background-color: #23262d;
|
|
||||||
background-image: none;
|
|
||||||
background-size: 400%;
|
|
||||||
border-radius: 7px;
|
|
||||||
background-position: 100%;
|
|
||||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
|
||||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
.link-card > a {
|
|
||||||
width: 100%;
|
|
||||||
text-decoration: none;
|
|
||||||
line-height: 1.4;
|
|
||||||
padding: calc(1.5rem - 1px);
|
|
||||||
border-radius: 8px;
|
|
||||||
color: white;
|
|
||||||
background-color: #23262d;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.link-card:is(:hover, :focus-within) {
|
|
||||||
background-position: 0;
|
|
||||||
background-image: var(--accent-gradient);
|
|
||||||
}
|
|
||||||
.link-card:is(:hover, :focus-within) h2 {
|
|
||||||
color: rgb(var(--accent-light));
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,54 +1,88 @@
|
||||||
---
|
---
|
||||||
interface Props {
|
interface Props {
|
||||||
medium: string;
|
medium: string;
|
||||||
id: string;
|
id: string;
|
||||||
link: string;
|
link: string;
|
||||||
pgp: string;
|
pgp?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { medium, id, link } = Astro.props;
|
const { medium, id, link, pgp } = Astro.props;
|
||||||
|
|
||||||
import Icon from "../components/Icon.astro";
|
import Icon from "../components/Icon.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<div style="display:flex">
|
<div style="display:flex">
|
||||||
<div style="display: flex; align-items: center; margin-right: 0.2rem; margin-left: 0.7rem;">
|
<div
|
||||||
<Icon icon={medium.toLowerCase()} size="50" />
|
style="display: flex; align-items: center; margin-right: 0.2rem; margin-left: 1.75rem;"
|
||||||
</div>
|
>
|
||||||
<div style="margin-left:1rem; margin-bottom: 1rem;" class="cardText">
|
<Icon icon={medium.toLowerCase()} size="50" />
|
||||||
<h2>{medium}</h2>
|
|
||||||
<p style="word-break: break-all;">{id}</p>
|
|
||||||
<a href={link}>Open -></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div style="margin-left:1rem; margin-bottom: 1rem" class="cardText">
|
||||||
|
<h2>{medium}</h2>
|
||||||
|
<div>
|
||||||
|
<p style="margin-bottom: 0.25rem;">
|
||||||
|
{id}
|
||||||
|
</p>
|
||||||
|
{
|
||||||
|
pgp ? (
|
||||||
|
<a id="pgp" href="/">
|
||||||
|
PGP Key
|
||||||
|
</a>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div style={pgp ? "padding-top: 1rem" : "padding-top: 1.8rem"}>
|
||||||
|
<a href={link}>Open -></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
#main {
|
||||||
|
background-color: #292e28;
|
||||||
|
border-radius: 8px;
|
||||||
|
/* width: fit-content; */
|
||||||
|
padding: 0.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
h2 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #e6fbd4;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-weight: 400;
|
||||||
|
color: #9dac93;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #e6fbd4;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pgp {
|
||||||
|
text-decoration: underline;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #9dac93;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
#main {
|
#main {
|
||||||
background-color: #292e28;
|
width: 100%;
|
||||||
border-radius: 8px;
|
|
||||||
width: fit-content;
|
|
||||||
min-width: 25vw;
|
|
||||||
padding: 0.5rem;
|
|
||||||
line-height: 1;
|
|
||||||
max-width: 35%;
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
}
|
||||||
.cardText {
|
}
|
||||||
h2 {
|
|
||||||
font-weight: 500;
|
@media only screen and (min-width: 769px) {
|
||||||
font-size: 1.5rem;
|
#main {
|
||||||
color: #e6fbd4;
|
width: 18.5rem;
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-weight: 400;
|
|
||||||
color: #9dac93;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #e6fbd4;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,54 @@
|
||||||
---
|
---
|
||||||
interface Props {
|
interface Props {
|
||||||
text: string;
|
text: string;
|
||||||
href: string;
|
href: string;
|
||||||
|
newtab?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { href, text } = Astro.props;
|
const { href, text, newtab = false } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div>
|
{
|
||||||
<a href={href}>{text}</a>
|
newtab ? (
|
||||||
</div>
|
<div>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href={href}>
|
||||||
|
{text}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<a href={href}>{text}</a>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
div {
|
||||||
|
/* display: inline; */
|
||||||
|
padding-right: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
padding-left: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
padding-top: 6px;
|
||||||
|
margin-top: 4px;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
border-radius: 7px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
/* font-size: var(--scale-2); */
|
||||||
|
font-weight: 500;
|
||||||
|
color: #9dac93;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
div {
|
div:hover {
|
||||||
/* display: inline; */
|
text-decoration: underline;
|
||||||
padding-right: 5px;
|
text-decoration-color: #9dac93;
|
||||||
margin-right: 5px;
|
/* background-color: #727d6b;
|
||||||
padding-left: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
padding-top: 6px;
|
|
||||||
margin-top: 4px;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
border-radius: 7px;
|
|
||||||
}
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
color: #eaffd7;
|
||||||
font-size: var(--scale-2);
|
} */
|
||||||
font-weight: 500;
|
}
|
||||||
color: #9dac93;
|
|
||||||
/* font-size: 23px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
div:hover {
|
|
||||||
background-color: #727d6b;
|
|
||||||
a {
|
|
||||||
color: #eaffd7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
23
src/components/Navbar.astro
Normal file
23
src/components/Navbar.astro
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<div id="navbar">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#navbar {
|
||||||
|
background-color: #292e28;
|
||||||
|
padding-top: 2px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
padding-right: 3px;
|
||||||
|
padding-left: 3px;
|
||||||
|
display: flex;
|
||||||
|
/* justify-content: center; */
|
||||||
|
overflow: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
@media only screen and (min-width: 769px) {
|
||||||
|
justify-content: unset;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,217 +1,94 @@
|
||||||
---
|
---
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title } = Astro.props;
|
const { title } = Astro.props;
|
||||||
|
|
||||||
import NavItem from "../components/NavItem.astro";
|
import NavItem from "../components/NavItem.astro";
|
||||||
import '@fontsource-variable/inter';
|
import Navbar from "../components/Navbar.astro";
|
||||||
|
import "@fontsource-variable/inter";
|
||||||
|
import interWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2";
|
||||||
|
// import { ViewTransitions } from "astro:transitions";
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="description" content="Astro description" />
|
<meta name="description" content="Astro description" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<link
|
||||||
<title>{title}</title>
|
rel="preload"
|
||||||
</head>
|
as="font"
|
||||||
<body>
|
type="font/woff2"
|
||||||
<div id="navbar">
|
href={interWoff2}
|
||||||
<NavItem text="home" href="hi" />
|
crossorigin="anonymous"
|
||||||
<NavItem text="projects" href="hi" />
|
/>
|
||||||
<NavItem text="contact" href="hi" />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<NavItem text="cv" href="hi" />
|
<title>{title}</title>
|
||||||
</div>
|
</head>
|
||||||
<slot />
|
<div id="container">
|
||||||
</body>
|
<Navbar>
|
||||||
</html>
|
<NavItem text="home" href="/" />
|
||||||
<style is:global>
|
<NavItem text="blog" href="blog" />
|
||||||
@import "../../node_modules/pollen-css/pollen.css";
|
<NavItem text="projects" href="projects" />
|
||||||
|
<NavItem text="contact" href="contact" />
|
||||||
/* Radix Custom Palletes - https://www.radix-ui.com/colors/custom */
|
<NavItem text="now" href="now" />
|
||||||
|
<!-- <NavItem text="setup" href="setup" />
|
||||||
:root,
|
<NavItem text="gallery" href="gallery" /> -->
|
||||||
.dark,
|
</Navbar>
|
||||||
.dark-theme {
|
<main>
|
||||||
--lime-1: #1b1e1a;
|
<slot />
|
||||||
--lime-2: #1f221d;
|
</main>
|
||||||
--lime-3: #293025;
|
</div>
|
||||||
--lime-4: #323d2a;
|
|
||||||
--lime-5: #3b4832;
|
|
||||||
--lime-6: #46553a;
|
|
||||||
--lime-7: #516444;
|
|
||||||
--lime-8: #5e744e;
|
|
||||||
--lime-9: #d3e7c5;
|
|
||||||
--lime-10: #c9ddbb;
|
|
||||||
--lime-11: #a9c197;
|
|
||||||
--lime-12: #d6eac8;
|
|
||||||
|
|
||||||
--lime-a1: #00000000;
|
|
||||||
--lime-a2: #e8ebb405;
|
|
||||||
--lime-a3: #c6f8a015;
|
|
||||||
--lime-a4: #befa8c24;
|
|
||||||
--lime-a5: #c5fe9a30;
|
|
||||||
--lime-a6: #cafc9b3f;
|
|
||||||
--lime-a7: #c7fda050;
|
|
||||||
--lime-a8: #c9fea262;
|
|
||||||
--lime-a9: #e9ffd9e4;
|
|
||||||
--lime-a10: #e8ffd7d9;
|
|
||||||
--lime-a11: #dfffc7b9;
|
|
||||||
--lime-a12: #e9fedae8;
|
|
||||||
|
|
||||||
--lime-contrast: #1a2611;
|
|
||||||
--lime-surface: #23262080;
|
|
||||||
--lime-indicator: #d3e7c5;
|
|
||||||
--lime-track: #d3e7c5;
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (color: color(display-p3 1 1 1)) {
|
|
||||||
@media (color-gamut: p3) {
|
|
||||||
:root,
|
|
||||||
.dark,
|
|
||||||
.dark-theme {
|
|
||||||
--lime-1: oklch(23% 0.009 132.4);
|
|
||||||
--lime-2: oklch(24.7% 0.009 132.4);
|
|
||||||
--lime-3: oklch(29.8% 0.02 132.4);
|
|
||||||
--lime-4: oklch(34.3% 0.034 132.4);
|
|
||||||
--lime-5: oklch(38.5% 0.041 132.4);
|
|
||||||
--lime-6: oklch(42.9% 0.047 132.4);
|
|
||||||
--lime-7: oklch(47.8% 0.054 132.4);
|
|
||||||
--lime-8: oklch(53.1% 0.063 132.4);
|
|
||||||
--lime-9: oklch(90.4% 0.05 132.4);
|
|
||||||
--lime-10: oklch(87.4% 0.05 132.4);
|
|
||||||
--lime-11: oklch(78.2% 0.063 132.4);
|
|
||||||
--lime-12: oklch(91.4% 0.05 132.4);
|
|
||||||
|
|
||||||
--lime-a1: color(display-p3 0 0 0 / 0);
|
|
||||||
--lime-a2: color(display-p3 0.984 0.992 0.757 / 0.018);
|
|
||||||
--lime-a3: color(display-p3 0.796 1 0.69 / 0.08);
|
|
||||||
--lime-a4: color(display-p3 0.792 1 0.616 / 0.138);
|
|
||||||
--lime-a5: color(display-p3 0.824 1 0.651 / 0.187);
|
|
||||||
--lime-a6: color(display-p3 0.831 1 0.663 / 0.245);
|
|
||||||
--lime-a7: color(display-p3 0.839 1 0.678 / 0.307);
|
|
||||||
--lime-a8: color(display-p3 0.839 1 0.686 / 0.378);
|
|
||||||
--lime-a9: color(display-p3 0.937 1 0.871 / 0.889);
|
|
||||||
--lime-a10: color(display-p3 0.933 1 0.863 / 0.845);
|
|
||||||
--lime-a11: color(display-p3 0.906 1 0.808 / 0.72);
|
|
||||||
--lime-a12: color(display-p3 0.933 1 0.871 / 0.903);
|
|
||||||
|
|
||||||
--lime-contrast: #1a2611;
|
|
||||||
--lime-surface: color(display-p3 0.141 0.149 0.133 / 0.5);
|
|
||||||
--lime-indicator: oklch(90.4% 0.05 132.4);
|
|
||||||
--lime-track: oklch(90.4% 0.05 132.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:root,
|
|
||||||
.dark,
|
|
||||||
.dark-theme {
|
|
||||||
--gray-1: #1c1e1a;
|
|
||||||
--gray-2: #222420;
|
|
||||||
--gray-3: #2a2d28;
|
|
||||||
--gray-4: #2f332d;
|
|
||||||
--gray-5: #353933;
|
|
||||||
--gray-6: #3d413a;
|
|
||||||
--gray-7: #484e45;
|
|
||||||
--gray-8: #5e6659;
|
|
||||||
--gray-9: #687461;
|
|
||||||
--gray-10: #75806e;
|
|
||||||
--gray-11: #adb7a8;
|
|
||||||
--gray-12: #eceeea;
|
|
||||||
|
|
||||||
--gray-a1: #9b1e1a02;
|
|
||||||
--gray-a2: #fbdeda08;
|
|
||||||
--gray-a3: #fcffed11;
|
|
||||||
--gray-a4: #f0fee418;
|
|
||||||
--gray-a5: #f1fde81f;
|
|
||||||
--gray-a6: #f4fee628;
|
|
||||||
--gray-a7: #ecfce237;
|
|
||||||
--gray-a8: #ecfede52;
|
|
||||||
--gray-a9: #e3fed362;
|
|
||||||
--gray-a10: #e8fdd970;
|
|
||||||
--gray-a11: #f1feebae;
|
|
||||||
--gray-a12: #fdfffbec;
|
|
||||||
|
|
||||||
--gray-contrast: #ffffff;
|
|
||||||
--gray-surface: rgba(0, 0, 0, 0.05);
|
|
||||||
--gray-indicator: #687461;
|
|
||||||
--gray-track: #687461;
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (color: color(display-p3 1 1 1)) {
|
|
||||||
@media (color-gamut: p3) {
|
|
||||||
:root,
|
|
||||||
.dark,
|
|
||||||
.dark-theme {
|
|
||||||
--gray-1: oklch(23% 0.008 133.2);
|
|
||||||
--gray-2: oklch(25.7% 0.008 133.2);
|
|
||||||
--gray-3: oklch(29.1% 0.009 133.2);
|
|
||||||
--gray-4: oklch(31.5% 0.01 133.2);
|
|
||||||
--gray-5: oklch(33.9% 0.012 133.2);
|
|
||||||
--gray-6: oklch(37% 0.014 133.2);
|
|
||||||
--gray-7: oklch(41.7% 0.018 133.2);
|
|
||||||
--gray-8: oklch(50.1% 0.023 133.2);
|
|
||||||
--gray-9: oklch(54.3% 0.032 133.2);
|
|
||||||
--gray-10: oklch(58.5% 0.03 133.2);
|
|
||||||
--gray-11: oklch(76.6% 0.023 133.2);
|
|
||||||
--gray-12: oklch(94.7% 0.006 133.2);
|
|
||||||
|
|
||||||
--gray-a1: color(display-p3 0 0 0 / 0);
|
|
||||||
--gray-a2: color(display-p3 0.984 0.992 0.976 / 0.027);
|
|
||||||
--gray-a3: color(display-p3 0.988 0.996 0.922 / 0.067);
|
|
||||||
--gray-a4: color(display-p3 0.945 0.996 0.894 / 0.094);
|
|
||||||
--gray-a5: color(display-p3 0.961 1 0.922 / 0.12);
|
|
||||||
--gray-a6: color(display-p3 0.965 1 0.933 / 0.156);
|
|
||||||
--gray-a7: color(display-p3 0.937 0.996 0.91 / 0.214);
|
|
||||||
--gray-a8: color(display-p3 0.933 1 0.886 / 0.32);
|
|
||||||
--gray-a9: color(display-p3 0.91 0.996 0.851 / 0.383);
|
|
||||||
--gray-a10: color(display-p3 0.929 1 0.875 / 0.436);
|
|
||||||
--gray-a11: color(display-p3 0.957 1 0.929 / 0.68);
|
|
||||||
--gray-a12: color(display-p3 0.992 1 0.984 / 0.925);
|
|
||||||
|
|
||||||
--gray-contrast: #ffffff;
|
|
||||||
--gray-surface: color(display-p3 0 0 0 / 5%);
|
|
||||||
--gray-indicator: oklch(54.3% 0.032 133.2);
|
|
||||||
--gray-track: oklch(54.3% 0.032 133.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:root,
|
|
||||||
.dark,
|
|
||||||
.dark-theme,
|
|
||||||
:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
|
|
||||||
--color-background: #1b1e1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
html {
|
html {
|
||||||
font-family: system-ui, sans-serif;
|
font-size: 17px;
|
||||||
background: var(--color-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
#navbar {
|
font-family: "Inter Variable", sans-serif;
|
||||||
background-color: #292e28;
|
background: var(#1b1e1a);
|
||||||
border-radius: 8px;
|
|
||||||
width: fit-content;
|
background-image: url("bg.svg");
|
||||||
padding-top: 2px;
|
background-attachment: fixed;
|
||||||
padding-bottom: 2px;
|
background-position: center;
|
||||||
padding-right: 3px;
|
background-repeat: no-repeat;
|
||||||
padding-left: 3px;
|
background-size: cover;
|
||||||
display: flex;
|
|
||||||
|
min-width: 100vw;
|
||||||
|
overflow-x: hidden;
|
||||||
|
/* height: 100vh; */
|
||||||
|
/* overflow-y: hidden; */
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Inter Variable";
|
margin: 0;
|
||||||
margin: auto;
|
|
||||||
padding: 6rem;
|
|
||||||
width: 900px;
|
|
||||||
max-width: calc(100% - 2rem);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
a {
|
||||||
|
color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 769px) {
|
||||||
|
html {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
margin: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -5,47 +5,51 @@ import Icon from "../components/Icon.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Samvid Konchada">
|
<Layout title="Samvid Konchada">
|
||||||
<main>
|
<div>
|
||||||
<h1 class="header">Contact</h1>
|
<h1 class="header">Contact</h1>
|
||||||
<p class="subtitle">I would love to talk to you!</p>
|
<p class="subtitle">I would love to talk to you!</p>
|
||||||
<p class="subtitle">
|
<p class="subtitle">
|
||||||
The following methods support <strong>privacy-friendly</strong> and <strong>secure</strong> communication:
|
The following methods support <span style="font-weight: 700;"
|
||||||
</p>
|
>privacy-friendly</span
|
||||||
<div class="card-container">
|
> and <span style="font-weight: 700;">secure</span> communication:
|
||||||
<ContactCard medium="Email" id="samvidk@proton.me" link="mailto:samvidk@proton.me" pgp="false" />
|
</p>
|
||||||
<ContactCard medium="Signal" id="samvidk.85" link="mailto:samvidk@proton.me" pgp="false" />
|
<div class="card-container">
|
||||||
<ContactCard medium="Matrix" id="@theamazing0@tchncs.de" link="mailto:samvidk@proton.me" pgp="false" />
|
<ContactCard
|
||||||
</div>
|
medium="Email"
|
||||||
|
id="me@samvid.dev"
|
||||||
|
link="mailto:hi@samvid.dev"
|
||||||
|
pgp
|
||||||
|
/>
|
||||||
|
<ContactCard
|
||||||
|
medium="Signal"
|
||||||
|
id="samvidk.85"
|
||||||
|
link="https://signal.me/#eu/eFj_OirfNWU7IkLM_0rHhusUBVuQQaoPGYH_1LrhdmSKuW-TIflE6ovHlxGkB-Vq"
|
||||||
|
/>
|
||||||
|
<ContactCard
|
||||||
|
medium="Matrix"
|
||||||
|
id="@theamazing0:tchncs.de"
|
||||||
|
link="https://matrix.to/#/@theamazing0:tchncs.de"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
main {
|
.header {
|
||||||
color: white;
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
font-size: 20px;
|
/* margin-top: 3rem; */
|
||||||
/* line-height: 1.6; */
|
margin-bottom: 1.5rem;
|
||||||
}
|
color: #e6fbd4;
|
||||||
html {
|
}
|
||||||
background-image: url("bg.svg");
|
.subtitle {
|
||||||
background-attachment: fixed;
|
color: #c3d6b2;
|
||||||
background-repeat: no-repeat;
|
/* max-width: 65%; */
|
||||||
background-size: cover;
|
/* font-size: 1rem; */
|
||||||
}
|
/* margin: 0px; */
|
||||||
.header {
|
}
|
||||||
font-size: 2.5rem;
|
.card-container {
|
||||||
font-weight: 700;
|
display: flex;
|
||||||
margin-top: 3rem;
|
flex-wrap: wrap;
|
||||||
margin-bottom: 1.5rem;
|
}
|
||||||
}
|
</style>
|
||||||
.subtitle {
|
</div>
|
||||||
color: #c3d6b2;
|
</Layout>
|
||||||
max-width: 55%;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
/* margin: 0px; */
|
|
||||||
}
|
|
||||||
.card-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</main></Layout
|
|
||||||
>
|
|
||||||
|
|
|
||||||
|
|
@ -2,46 +2,55 @@
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Card from "../components/Card.astro";
|
import Card from "../components/Card.astro";
|
||||||
import Icon from "../components/Icon.astro";
|
import Icon from "../components/Icon.astro";
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Samvid Konchada">
|
<Layout title="Samvid Konchada">
|
||||||
<main>
|
<div>
|
||||||
<h1 class="title">Samvid Konchada</h1>
|
<h1 class="title">Samvid Konchada</h1>
|
||||||
<p class="subtitle">
|
<p class="subtitle">
|
||||||
Hey there! I'm Samvid, a high schooler interested in computer science and programming.
|
Hi, welcome to my website! I'm high-schooler from Atlanta, GA. I'm
|
||||||
</p>
|
interested in programming, cybersecurity, native plants, and more! Check
|
||||||
<div style="margin-top:2rem">
|
out what I'm doing <a href="now">now</a>.
|
||||||
<Icon icon="matrix" size="32"></Icon>
|
</p>
|
||||||
<Icon icon="mastodon" size="32"></Icon>
|
<p class="subtitle">
|
||||||
<Icon icon="git" size="32"></Icon>
|
I have experience with fullstack and mobile development with Python,
|
||||||
</div>
|
Javascript, and more. Check out different <a href="projects">projects</a> I've
|
||||||
</main>
|
worked on!
|
||||||
</Layout>
|
</p>
|
||||||
|
<div style="margin-top:2rem">
|
||||||
|
<Icon icon="matrix" size="32" />
|
||||||
|
<Icon icon="mastodon" size="32" />
|
||||||
|
<Icon icon="git" size="32" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
main {
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
font-size: 20px;
|
|
||||||
/* line-height: 1.6; */
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
background-image: url("bg.svg");
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 4rem;
|
font-size: 2.75rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-top: 3rem;
|
/* margin-top: 3rem; */
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
|
/* background: linear-gradient(to bottom, #e6fbd4 0%, #292e28 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
text-fill-color: transparent; */
|
||||||
|
|
||||||
|
color: #e6fbd4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
color: #c3d6b2;
|
color: #c3d6b2;
|
||||||
max-width: 55%;
|
/* max-width: 55%; */
|
||||||
font-size: 1.6rem;
|
font-size: 1.1rem;
|
||||||
margin: 0px;
|
/* margin: 0px; */
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
@media only screen and (min-width: 769px) {
|
||||||
|
.subtitle {
|
||||||
|
max-width: 65%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -5,31 +5,19 @@ import Icon from "../components/Icon.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Samvid Konchada">
|
<Layout title="Samvid Konchada">
|
||||||
<main>
|
<div>
|
||||||
<h1 class="header">Projects</h1>
|
<h1 class="header">Projects</h1>
|
||||||
<div>
|
<div>
|
||||||
<ProjectCard name="hi" />
|
<ProjectCard name="hi" />
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
main {
|
.header {
|
||||||
color: white;
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
font-size: 20px;
|
margin-top: 3rem;
|
||||||
/* line-height: 1.6; */
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
html {
|
|
||||||
background-image: url("bg.svg");
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-top: 3rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue