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 }
|
||||
5029
package-lock.json
generated
5029
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -10,10 +10,13 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.6.0",
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"@fontsource-variable/inter": "^5.0.18",
|
||||
"astro": "^4.7.1",
|
||||
"pollen-css": "^4.6.2",
|
||||
"astro": "^5.12.1",
|
||||
"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>
|
||||
|
|
@ -3,42 +3,55 @@ interface Props {
|
|||
medium: string;
|
||||
id: 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";
|
||||
---
|
||||
|
||||
<div id="main">
|
||||
<div style="display:flex">
|
||||
<div style="display: flex; align-items: center; margin-right: 0.2rem; margin-left: 0.7rem;">
|
||||
<div
|
||||
style="display: flex; align-items: center; margin-right: 0.2rem; margin-left: 1.75rem;"
|
||||
>
|
||||
<Icon icon={medium.toLowerCase()} size="50" />
|
||||
</div>
|
||||
<div style="margin-left:1rem; margin-bottom: 1rem;" class="cardText">
|
||||
<div style="margin-left:1rem; margin-bottom: 1rem" class="cardText">
|
||||
<h2>{medium}</h2>
|
||||
<p style="word-break: break-all;">{id}</p>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
#main {
|
||||
background-color: #292e28;
|
||||
border-radius: 8px;
|
||||
width: fit-content;
|
||||
min-width: 25vw;
|
||||
/* width: fit-content; */
|
||||
padding: 0.5rem;
|
||||
line-height: 1;
|
||||
max-width: 35%;
|
||||
margin: 1rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
.cardText {
|
||||
h2 {
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
color: #e6fbd4;
|
||||
}
|
||||
p {
|
||||
|
|
@ -48,7 +61,28 @@ import Icon from "../components/Icon.astro";
|
|||
}
|
||||
a {
|
||||
color: #e6fbd4;
|
||||
font-size: 1.3rem;
|
||||
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 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) {
|
||||
#main {
|
||||
width: 18.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,17 +2,27 @@
|
|||
interface Props {
|
||||
text: string;
|
||||
href: string;
|
||||
newtab?: boolean;
|
||||
}
|
||||
|
||||
const { href, text } = Astro.props;
|
||||
const { href, text, newtab = false } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
newtab ? (
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href={href}>
|
||||
{text}
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<a href={href}>{text}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
/* display: inline; */
|
||||
padding-right: 5px;
|
||||
|
|
@ -27,16 +37,18 @@ const { href, text } = Astro.props;
|
|||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: var(--scale-2);
|
||||
/* font-size: var(--scale-2); */
|
||||
font-weight: 500;
|
||||
color: #9dac93;
|
||||
/* font-size: 23px; */
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
div:hover {
|
||||
background-color: #727d6b;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #9dac93;
|
||||
/* background-color: #727d6b;
|
||||
a {
|
||||
color: #eaffd7;
|
||||
}
|
||||
} */
|
||||
}
|
||||
</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>
|
||||
|
|
@ -6,7 +6,10 @@ interface Props {
|
|||
const { title } = Astro.props;
|
||||
|
||||
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>
|
||||
|
|
@ -14,204 +17,78 @@ import '@fontsource-variable/inter';
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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="preload"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
href={interWoff2}
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="navbar">
|
||||
<NavItem text="home" href="hi" />
|
||||
<NavItem text="projects" href="hi" />
|
||||
<NavItem text="contact" href="hi" />
|
||||
<NavItem text="cv" href="hi" />
|
||||
</div>
|
||||
<div id="container">
|
||||
<Navbar>
|
||||
<NavItem text="home" href="/" />
|
||||
<NavItem text="blog" href="blog" />
|
||||
<NavItem text="projects" href="projects" />
|
||||
<NavItem text="contact" href="contact" />
|
||||
<NavItem text="now" href="now" />
|
||||
<!-- <NavItem text="setup" href="setup" />
|
||||
<NavItem text="gallery" href="gallery" /> -->
|
||||
</Navbar>
|
||||
<main>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style is:global>
|
||||
@import "../../node_modules/pollen-css/pollen.css";
|
||||
|
||||
/* Radix Custom Palletes - https://www.radix-ui.com/colors/custom */
|
||||
|
||||
:root,
|
||||
.dark,
|
||||
.dark-theme {
|
||||
--lime-1: #1b1e1a;
|
||||
--lime-2: #1f221d;
|
||||
--lime-3: #293025;
|
||||
--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;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: var(--color-background);
|
||||
}
|
||||
font-size: 17px;
|
||||
|
||||
#navbar {
|
||||
background-color: #292e28;
|
||||
border-radius: 8px;
|
||||
width: fit-content;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-right: 3px;
|
||||
padding-left: 3px;
|
||||
display: flex;
|
||||
font-family: "Inter Variable", sans-serif;
|
||||
background: var(#1b1e1a);
|
||||
|
||||
background-image: url("bg.svg");
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
min-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
/* height: 100vh; */
|
||||
/* overflow-y: hidden; */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter Variable";
|
||||
margin: auto;
|
||||
padding: 6rem;
|
||||
width: 900px;
|
||||
max-width: calc(100% - 2rem);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) {
|
||||
html {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0rem;
|
||||
}
|
||||
|
||||
#container {
|
||||
margin: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,41 +5,45 @@ import Icon from "../components/Icon.astro";
|
|||
---
|
||||
|
||||
<Layout title="Samvid Konchada">
|
||||
<main>
|
||||
<div>
|
||||
<h1 class="header">Contact</h1>
|
||||
<p class="subtitle">I would love to talk to you!</p>
|
||||
<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;"
|
||||
>privacy-friendly</span
|
||||
> and <span style="font-weight: 700;">secure</span> communication:
|
||||
</p>
|
||||
<div class="card-container">
|
||||
<ContactCard medium="Email" id="samvidk@proton.me" link="mailto:samvidk@proton.me" pgp="false" />
|
||||
<ContactCard medium="Signal" id="samvidk.85" link="mailto:samvidk@proton.me" pgp="false" />
|
||||
<ContactCard medium="Matrix" id="@theamazing0@tchncs.de" link="mailto:samvidk@proton.me" pgp="false" />
|
||||
<ContactCard
|
||||
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>
|
||||
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;
|
||||
}
|
||||
.header {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-top: 3rem;
|
||||
/* margin-top: 3rem; */
|
||||
margin-bottom: 1.5rem;
|
||||
color: #e6fbd4;
|
||||
}
|
||||
.subtitle {
|
||||
color: #c3d6b2;
|
||||
max-width: 55%;
|
||||
font-size: 1.6rem;
|
||||
/* max-width: 65%; */
|
||||
/* font-size: 1rem; */
|
||||
/* margin: 0px; */
|
||||
}
|
||||
.card-container {
|
||||
|
|
@ -47,5 +51,5 @@ import Icon from "../components/Icon.astro";
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
</main></Layout
|
||||
>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -2,46 +2,55 @@
|
|||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
import Icon from "../components/Icon.astro";
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Samvid Konchada">
|
||||
<main>
|
||||
<div>
|
||||
<h1 class="title">Samvid Konchada</h1>
|
||||
<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
|
||||
interested in programming, cybersecurity, native plants, and more! Check
|
||||
out what I'm doing <a href="now">now</a>.
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
I have experience with fullstack and mobile development with Python,
|
||||
Javascript, and more. Check out different <a href="projects">projects</a> I've
|
||||
worked on!
|
||||
</p>
|
||||
<div style="margin-top:2rem">
|
||||
<Icon icon="matrix" size="32"></Icon>
|
||||
<Icon icon="mastodon" size="32"></Icon>
|
||||
<Icon icon="git" size="32"></Icon>
|
||||
<Icon icon="matrix" size="32" />
|
||||
<Icon icon="mastodon" size="32" />
|
||||
<Icon icon="git" size="32" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<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 {
|
||||
font-size: 4rem;
|
||||
font-size: 2.75rem;
|
||||
font-weight: 700;
|
||||
margin-top: 3rem;
|
||||
/* margin-top: 3rem; */
|
||||
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 {
|
||||
color: #c3d6b2;
|
||||
max-width: 55%;
|
||||
font-size: 1.6rem;
|
||||
margin: 0px;
|
||||
/* max-width: 55%; */
|
||||
font-size: 1.1rem;
|
||||
/* margin: 0px; */
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) {
|
||||
.subtitle {
|
||||
max-width: 65%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -5,27 +5,15 @@ import Icon from "../components/Icon.astro";
|
|||
---
|
||||
|
||||
<Layout title="Samvid Konchada">
|
||||
<main>
|
||||
<div>
|
||||
<h1 class="header">Projects</h1>
|
||||
<div>
|
||||
<ProjectCard name="hi" />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<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;
|
||||
}
|
||||
.header {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue