mirror of
https://codeberg.org/theamazing0/portfolio.git
synced 2025-10-30 02:12:19 -04:00
Implemented design for contact page
This commit is contained in:
parent
b3853c78de
commit
d6f535d11c
4 changed files with 107 additions and 0 deletions
1
public/email.svg
Normal file
1
public/email.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#9dac93"><path d="M7 9L12 12.5L17 9" stroke="#9dac93" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2 17V7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17Z" stroke="#9dac93" stroke-width="1.5"></path></svg>
|
||||||
|
After Width: | Height: | Size: 470 B |
1
public/signal.svg
Normal file
1
public/signal.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg role="img" fill="#9dac93" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Signal</title><path d="m9.12.35.27 1.09a10.845 10.845 0 0 0-3.015 1.248l-.578-.964A11.955 11.955 0 0 1 9.12.35zm5.76 0-.27 1.09a10.845 10.845 0 0 1 3.015 1.248l.581-.964A11.955 11.955 0 0 0 14.88.35zM1.725 5.797A11.955 11.955 0 0 0 .351 9.119l1.09.27A10.845 10.845 0 0 1 2.69 6.374zm-.6 6.202a10.856 10.856 0 0 1 .122-1.63l-1.112-.168a12.043 12.043 0 0 0 0 3.596l1.112-.169A10.856 10.856 0 0 1 1.125 12zm17.078 10.275-.578-.964a10.845 10.845 0 0 1-3.011 1.247l.27 1.091a11.955 11.955 0 0 0 3.319-1.374zM22.875 12a10.856 10.856 0 0 1-.122 1.63l1.112.168a12.043 12.043 0 0 0 0-3.596l-1.112.169a10.856 10.856 0 0 1 .122 1.63zm.774 2.88-1.09-.27a10.845 10.845 0 0 1-1.248 3.015l.964.581a11.955 11.955 0 0 0 1.374-3.326zm-10.02 7.875a10.952 10.952 0 0 1-3.258 0l-.17 1.112a12.043 12.043 0 0 0 3.597 0zm7.125-4.303a10.914 10.914 0 0 1-2.304 2.302l.668.906a12.019 12.019 0 0 0 2.542-2.535zM18.45 3.245a10.914 10.914 0 0 1 2.304 2.304l.906-.675a12.019 12.019 0 0 0-2.535-2.535zM3.246 5.549A10.914 10.914 0 0 1 5.55 3.245l-.675-.906A12.019 12.019 0 0 0 2.34 4.874zm19.029.248-.964.577a10.845 10.845 0 0 1 1.247 3.011l1.091-.27a11.955 11.955 0 0 0-1.374-3.318zM10.371 1.246a10.952 10.952 0 0 1 3.258 0L13.8.134a12.043 12.043 0 0 0-3.597 0zM3.823 21.957 1.5 22.5l.542-2.323-1.095-.257-.542 2.323a1.125 1.125 0 0 0 1.352 1.352l2.321-.532zm-2.642-3.041 1.095.255.375-1.61a10.828 10.828 0 0 1-1.21-2.952l-1.09.27a11.91 11.91 0 0 0 1.106 2.852zm5.25 2.437-1.61.375.255 1.095 1.185-.275a11.91 11.91 0 0 0 2.851 1.106l.27-1.091a10.828 10.828 0 0 1-2.943-1.217zM12 2.25a9.75 9.75 0 0 0-8.25 14.938l-.938 4 4-.938A9.75 9.75 0 1 0 12 2.25z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
54
src/components/ContactCard.astro
Normal file
54
src/components/ContactCard.astro
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
medium: string;
|
||||||
|
id: string;
|
||||||
|
link: string;
|
||||||
|
pgp: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { medium, id, link } = 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;">
|
||||||
|
<Icon icon={medium.toLowerCase()} size="50" />
|
||||||
|
</div>
|
||||||
|
<div style="margin-left:1rem; margin-bottom: 1rem;" class="cardText">
|
||||||
|
<h2>{medium}</h2>
|
||||||
|
<p style="word-break: break-all;">{id}</p>
|
||||||
|
<a href={link}>Open -></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#main {
|
||||||
|
background-color: #292e28;
|
||||||
|
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;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #e6fbd4;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-weight: 400;
|
||||||
|
color: #9dac93;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #e6fbd4;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
51
src/pages/contact.astro
Normal file
51
src/pages/contact.astro
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
---
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
import ContactCard from "../components/ContactCard.astro";
|
||||||
|
import Icon from "../components/Icon.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Samvid Konchada">
|
||||||
|
<main>
|
||||||
|
<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:
|
||||||
|
</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" />
|
||||||
|
</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-weight: 700;
|
||||||
|
margin-top: 3rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
color: #c3d6b2;
|
||||||
|
max-width: 55%;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
/* margin: 0px; */
|
||||||
|
}
|
||||||
|
.card-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</main></Layout
|
||||||
|
>
|
||||||
Loading…
Add table
Reference in a new issue