mirror of
https://codeberg.org/theamazing0/portfolio.git
synced 2025-10-30 10:22:18 -04:00
home page, implemented designs for menu bar, title, subtitle, and started with icons
This commit is contained in:
parent
38000e8631
commit
7bbbf35464
11 changed files with 258 additions and 24 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -22,3 +22,6 @@ pnpm-debug.log*
|
|||
|
||||
# jetbrains setting folder
|
||||
.idea/
|
||||
|
||||
# personal
|
||||
personal/
|
||||
10
.vscode/settings.json
vendored
Normal file
10
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"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
|
||||
}
|
||||
136
package-lock.json
generated
136
package-lock.json
generated
|
|
@ -9,7 +9,9 @@
|
|||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.6.0",
|
||||
"@fontsource-variable/inter": "^5.0.18",
|
||||
"astro": "^4.7.1",
|
||||
"pollen-css": "^4.6.2",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
},
|
||||
|
|
@ -854,6 +856,11 @@
|
|||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource-variable/inter": {
|
||||
"version": "5.0.18",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.0.18.tgz",
|
||||
"integrity": "sha512-rJzSrtJ3b7djiGFvRuTe6stDfbYJGhdQSfn2SI2WfXviee7Er0yKAHE5u7FU7OWVQQQ1x3+cxdmx9NdiAkcrcA=="
|
||||
},
|
||||
"node_modules/@img/sharp-darwin-arm64": {
|
||||
"version": "0.33.3",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.3.tgz",
|
||||
|
|
@ -1966,6 +1973,11 @@
|
|||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
|
||||
},
|
||||
"node_modules/base-64": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz",
|
||||
|
|
@ -2036,11 +2048,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/braces": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
|
||||
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
|
||||
"dependencies": {
|
||||
"fill-range": "^7.0.1"
|
||||
"fill-range": "^7.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
|
|
@ -2107,6 +2119,14 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"node_modules/case": {
|
||||
"version": "1.6.3",
|
||||
"resolved": "https://registry.npmjs.org/case/-/case-1.6.3.tgz",
|
||||
"integrity": "sha512-mzDSXIPaFwVDvZAHqZ9VlbyF4yyXRuX6IvB06WvPYkqJVO24kX1PPhv9bfpKNFZyxYFmmgo03HUiD8iklmJYRQ==",
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ccount": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
|
||||
|
|
@ -2396,6 +2416,14 @@
|
|||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "9.5.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
|
||||
"integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
|
||||
"engines": {
|
||||
"node": "^12.20.0 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/common-ancestor-path": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz",
|
||||
|
|
@ -2427,6 +2455,15 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/css-vars-ponyfill": {
|
||||
"version": "2.4.9",
|
||||
"resolved": "https://registry.npmjs.org/css-vars-ponyfill/-/css-vars-ponyfill-2.4.9.tgz",
|
||||
"integrity": "sha512-aZyLue5bdiGVNCiCclNjo123D8I7kyoYNUaAvz+H1JalX1ye4Ilz7jNRRH5YbM+dYD6ucejiydGwk7lol/GCXQ==",
|
||||
"dependencies": {
|
||||
"balanced-match": "^1.0.2",
|
||||
"get-css-data": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
|
|
@ -2466,6 +2503,14 @@
|
|||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/deepmerge": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
|
||||
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dequal": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
|
||||
|
|
@ -2718,9 +2763,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
|
||||
"dependencies": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
},
|
||||
|
|
@ -2797,6 +2842,11 @@
|
|||
"node": "6.* || 8.* || >= 10.*"
|
||||
}
|
||||
},
|
||||
"node_modules/get-css-data": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/get-css-data/-/get-css-data-2.1.1.tgz",
|
||||
"integrity": "sha512-JpMa/f5P4mDXKg6l5/2cHL5xNY77Jap7tHyduMa6BF0E2a7bQ6Tvaz2BIMjeVYZYLcmOZ5w2Ro0yVJEI41tMbw=="
|
||||
},
|
||||
"node_modules/get-east-asian-width": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz",
|
||||
|
|
@ -3292,6 +3342,11 @@
|
|||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
|
||||
},
|
||||
"node_modules/javascript-stringify": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
|
||||
"integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg=="
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
|
|
@ -3351,6 +3406,14 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/lilconfig": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
|
||||
"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/load-yaml-file": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/load-yaml-file/-/load-yaml-file-0.2.0.tgz",
|
||||
|
|
@ -3461,6 +3524,17 @@
|
|||
"@jridgewell/sourcemap-codec": "^1.4.15"
|
||||
}
|
||||
},
|
||||
"node_modules/map-obj": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-5.0.2.tgz",
|
||||
"integrity": "sha512-K6K2NgKnTXimT3779/4KxSvobxOtMmx1LBZ3NwRxT/MDIR3Br/fQ4Q+WCX5QxjyUR8zg5+RV9Tbf2c5pAWTD2A==",
|
||||
"engines": {
|
||||
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/markdown-table": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
|
||||
|
|
@ -4621,6 +4695,38 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/pollen-css": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/pollen-css/-/pollen-css-4.6.2.tgz",
|
||||
"integrity": "sha512-uSkmTx51xXOFR+Jd6SOaKRBUyNXIjKQ50hB6+bjkDyWjvlOG8CVn3bzPJJM8eRmqKJTd13GUJaKCPbq1Zi11OA==",
|
||||
"dependencies": {
|
||||
"case": "^1.6.3",
|
||||
"commander": "^9.4.0",
|
||||
"css-vars-ponyfill": "^2.4.8",
|
||||
"deepmerge": "^4.2.2",
|
||||
"javascript-stringify": "^2.1.0",
|
||||
"lilconfig": "^2.0.6",
|
||||
"map-obj": "^5.0.2",
|
||||
"prettier": "^2.7.1"
|
||||
},
|
||||
"bin": {
|
||||
"pollen": "index.js"
|
||||
}
|
||||
},
|
||||
"node_modules/pollen-css/node_modules/prettier": {
|
||||
"version": "2.8.8",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
|
||||
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
||||
"bin": {
|
||||
"prettier": "bin-prettier.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.38",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
|
||||
|
|
@ -4674,6 +4780,22 @@
|
|||
"node": ">=8.15"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier": {
|
||||
"version": "3.2.5",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
|
||||
"integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"prettier": "bin/prettier.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/prismjs": {
|
||||
"version": "1.29.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
|
||||
|
|
|
|||
|
|
@ -10,8 +10,10 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^4.7.1",
|
||||
"@astrojs/check": "^0.6.0",
|
||||
"@fontsource-variable/inter": "^5.0.18",
|
||||
"astro": "^4.7.1",
|
||||
"pollen-css": "^4.6.2",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
1
public/bg.svg
Normal file
1
public/bg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 57 KiB |
1
public/git.svg
Normal file
1
public/git.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Git</title><path d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187"/></svg>
|
||||
|
After Width: | Height: | Size: 702 B |
1
public/mastodon.svg
Normal file
1
public/mastodon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
public/matrix.svg
Normal file
1
public/matrix.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg stroke="#9dac93" fill="#9dac93" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>
|
||||
|
After Width: | Height: | Size: 971 B |
42
src/components/NavItem.astro
Normal file
42
src/components/NavItem.astro
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
interface Props {
|
||||
text: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, text } = Astro.props;
|
||||
---
|
||||
|
||||
<div>
|
||||
<a href={href}>{text}</a>
|
||||
</div>
|
||||
|
||||
<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: 23px; */
|
||||
}
|
||||
|
||||
div:hover {
|
||||
background-color: #727d6b;
|
||||
a {
|
||||
color: #eaffd7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,9 @@ interface Props {
|
|||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
|
||||
import NavItem from "../components/NavItem.astro";
|
||||
import '@fontsource-variable/inter';
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
|
@ -17,10 +20,18 @@ const { title } = Astro.props;
|
|||
<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>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
@import "../../node_modules/pollen-css/pollen.css";
|
||||
|
||||
/* Radix Custom Palletes - https://www.radix-ui.com/colors/custom */
|
||||
|
||||
:root,
|
||||
|
|
@ -181,6 +192,26 @@ const { title } = Astro.props;
|
|||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: var(--color-background);
|
||||
background-size: 224px;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
background-color: #292e28;
|
||||
border-radius: 8px;
|
||||
width: fit-content;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-right: 3px;
|
||||
padding-left: 3px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter Variable";
|
||||
margin: auto;
|
||||
padding: 6rem;
|
||||
width: 900px;
|
||||
max-width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,20 +3,40 @@ import Layout from "../layouts/Layout.astro";
|
|||
import Card from "../components/Card.astro";
|
||||
---
|
||||
|
||||
<Layout title="Samvid's mini site">
|
||||
<Layout title="Samvid Konchada">
|
||||
<main>
|
||||
<h1>hey there!</h1>
|
||||
<h1 class="title">Samvid Konchada</h1>
|
||||
<p class="subtitle">
|
||||
Hey there! I'm Samvid, a high schooler interested in computer science and programming.
|
||||
</p>
|
||||
<div>
|
||||
<img src="../../public/matrix.svg" width="32px" height="32px" />
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
width: 800px;
|
||||
max-width: calc(100% - 2rem);
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
/* 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-weight: 700;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.subtitle {
|
||||
color: #c3d6b2;
|
||||
max-width: 50%;
|
||||
font-size: 1.6rem;
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue