finished home page

RaphGL · May 2, 2023 · ed57b79 · ed57b79
1 parent 6c6e35e
commit ed57b79
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 28 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,12 +1,18 @@
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');
 
 :root {
-    --bg-color: #141519;
-    --fg-color: #ffffff; 
-    --hover-color: #506eff;
-    --radius-size: 0.5em;
-    font-family: 'Source Sans Pro', 'sans-serif';
-    font-size: 17pt;
-    background-color: var(--bg-color);
-    color: var(--fg-color);
-}
+	--bg-color: #141519;
+	--fg-color: #ffffff;
+	--hover-color: #506eff;
+	--radius-size: 0.5em;
+	font-family: 'Source Sans Pro', 'sans-serif';
+	font-size: 17pt;
+}
+
+body {
+	all: unset;
+    background: rgb(20,21,25);
+    background: radial-gradient(circle, rgba(20,21,25,1) 0%, rgba(16,17,20,1) 100%); 
+	background-attachment: fixed;
+	color: var(--fg-color);
+}
diff --git a/src/lib/BlogList.svelte b/src/lib/BlogList.svelte
@@ -0,0 +1,58 @@
+<div class="blog">
+	<h2>Blog</h2>
+	<ul>
+		<li>
+			<div class="blog-title">Poetry is a saner package manager</div>
+			<div class="blog-date">10 Oct 2022</div>
+		</li>
+		<li>
+			<div class="blog-title">Setting up NeoVim for Godot</div>
+			<div class="blog-date">10 Oct 2023</div>
+		</li>
+	</ul>
+	<button>View More</button>
+</div>
+
+<style>
+	.blog {
+		width: 30vw;;
+	}
+	.blog h2 {
+		text-align: center;
+	}
+
+	.blog button {
+		background: none;
+		border: none;
+		color: var(--fg-color);
+		font-size: 14pt;
+		text-decoration: underline;
+		width: 100%;
+		cursor: pointer;
+	}
+
+	.blog button:hover {
+		color: var(--hover-color);
+	}
+
+	.blog ul {
+		padding: 0;
+		list-style: none;
+	}
+
+	.blog li {
+		background: rgb(32, 33, 41);
+		background: linear-gradient(310deg, rgba(32, 33, 41, 1) 0%, rgba(40, 42, 54, 1) 100%);
+		padding: 1em;
+		border-radius: var(--radius-size);
+		margin-top: 1em;
+		font-size: 15pt;
+		display: flex;
+		justify-content: space-between;
+		gap: 4em;
+	}
+
+	.blog-date {
+		font-size: 13pt;
+	}
+</style>
diff --git a/src/lib/ProjectList.svelte b/src/lib/ProjectList.svelte
@@ -0,0 +1,92 @@
+<div class="project">
+	<h2>Projects</h2>
+	<ul>
+		<li>
+			<div class="project-name">Tuckr</div>
+			<div class="project-description">A dotfile manager inspired by GNU Stow</div>
+			<ul class="project-tags">
+				<li>Rust</li>
+				<li>Dotfiles</li>
+				<li>Automation</li>
+			</ul>
+		</li>
+		<li>
+			<div class="project-name">NeoSent</div>
+			<div class="project-description">Suckful Sent - Minimal presentation tool</div>
+			<ul class="project-tags">
+				<li>Rust</li>
+				<li>Dotfiles</li>
+				<li>Automation</li>
+			</ul>
+		</li>
+	</ul>
+	<button>View More</button>
+</div>
+
+<style>
+	.project {
+		width: 30vw;
+	}
+
+	.project li {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-content: center;
+		text-align: center;
+	}
+
+	.project-name {
+		font-weight: bold;
+		font-size: 18pt;
+	}
+
+	.project h2 {
+		text-align: center;
+	}
+
+	.project button {
+		background: none;
+		border: none;
+		color: var(--fg-color);
+		font-size: 14pt;
+		text-decoration: underline;
+		width: 100%;
+		cursor: pointer;
+	}
+
+	.project button:hover {
+		color: var(--hover-color);
+	}
+
+	.project ul {
+		padding: 0;
+		list-style: none;
+	}
+
+	.project li {
+		background: rgb(32, 33, 41);
+		background: linear-gradient(310deg, rgba(32, 33, 41, 1) 0%, rgba(40, 42, 54, 1) 100%);
+		border-radius: var(--radius-size);
+		margin-top: 1em;
+		font-size: 15pt;
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		padding: 2em 0;
+	}
+
+	.project-tags {
+		display: flex;
+		gap: 0.5em;
+		justify-content: center;
+	}
+
+	.project-tags li {
+		background: #383a59;
+		padding: 0.2em 1em;
+		font-size: 12pt;
+		width: auto;
+	}
+
+</style>
diff --git a/src/lib/navbar.svelte b/src/lib/navbar.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -10,7 +10,17 @@
 
 <slot />
 
+<footer>
+	<b>RaphGL</b> @2023
+</footer>
+
 <style>
+	footer {
+		text-align: center;
+		font-size: 14pt;
+		margin: 1.5em;
+	}
+
 	nav {
 		display: flex;
 		justify-content: center;
@@ -21,8 +31,8 @@
 	nav a {
 		text-decoration: none;
 		color: var(--fg-color);
-        width: 4em;
-        text-align: center;
+		width: 4em;
+		text-align: center;
 		transition: font-weight 0.1s ease-out;
 	}
 

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,3 +1,8 @@
+<script>
+	import BlogList from '../lib/BlogList.svelte';
+	import ProjectList from '../lib/ProjectList.svelte';
+</script>
+
 <section class="info">
 	<div>
 		<!-- svelte-ignore a11y-img-redundant-alt -->
@@ -11,15 +16,15 @@
 			<ul>
 				<li>
 					<div style="background-color:white;height: 1em; width: 1em;border-radius:0.2em;" />
-					<a href="Github">Github</a>
+					<a href="https://github.com/RaphGL">Github</a>
 				</li>
 				<li>
 					<div style="background-color:white;height: 1em; width: 1em;border-radius:0.2em;" />
-					<a href="Gitlab">Gitlab</a>
+					<a href="https://gitlab.com/RaphGL">Gitlab</a>
 				</li>
 				<li>
 					<div style="background-color:white;height: 1em; width: 1em;border-radius:0.2em;" />
-					<a href="Codeberg">Codeberg</a>
+					<a href="https://codeberg.org/RaphGL">Codeberg</a>
 				</li>
 			</ul>
 		</div>
@@ -31,7 +36,24 @@
 	Scroll for more
 </div>
 
+<section class="main-content">
+	<BlogList />
+	<ProjectList />
+</section>
+
 <style>
+	.main-content {
+		background-color: #18191f;
+		margin: 1em;
+		margin-top: 2em;
+		padding-top: 4em;
+		padding-bottom: 4em;
+		border-radius: 2em;
+		display: flex;
+		justify-content: center;
+		gap: 5em;
+	}
+
 	.info {
 		height: 100%;
 		width: 100%;
@@ -46,8 +68,8 @@
 	}
 
 	.info > div {
-		background: rgb(40, 42, 54);
-		background: linear-gradient(310deg, rgba(40, 42, 54, 1) 0%, rgba(32, 33, 41, 1) 100%);
+		background-color: rgb(40, 42, 54);
+		background-color: linear-gradient(310deg, rgba(40, 42, 54, 1) 0%, rgba(32, 33, 41, 1) 100%);
 		border-radius: var(--radius-size);
 		margin: auto;
 		padding: 1.3em;
@@ -87,7 +109,7 @@
 		gap: 0.5em;
 		padding: 0.6em;
 		border-radius: var(--radius-size);
-		background: var(--bg-color);
+		align-items: center;
 	}
 
 	.info-text li img {
@@ -97,9 +119,10 @@
 	.scroll {
 		display: flex;
 		justify-content: center;
-        flex-direction: column;
-        align-items: center;
+		flex-direction: column;
+		align-items: center;
 		font-size: 15pt;
-        gap: 1em;
+		gap: 1em;
+		cursor: default;
 	}
 </style>