darkicewolf50_site/src/routes/+page.svelte

<script>
	import Contact from '$lib/components/contact.svelte';
	import Experience from '$lib/components/experience.svelte';
	import Projects from '$lib/components/projects/projects.svelte';
	import TechCat from '$lib/components/techs/techCat.svelte';

	let languages = ['Rust', 'Python', 'YAML', 'HTML5', 'CSS', 'JavaScript', 'Markdown'];
	let backend = ['Actix', 'FastAPI', 'Dioxus', 'Diesel'];
	let frontend = ['React', 'Dioxus', 'SvelteKit'];
	let databases = ['Sqlite', 'PostgreSQL', 'Mongodb', 'DynamoDB'];
	let tools = [
		'Vs Code',
		'Git',
		'Prettier',
		'Firefox',
		'Github Actions',
		'Traefik',
		'Docker',
		'Kubernetes',
		'Terraform'
	];
	let platforms = ['AWS', 'Cloudflare', 'Vercel', 'Netlify', 'Gitea', 'Github'];
</script>

<title>Brock Tomlinson - Home</title>
<div>
	<div id="home-intro">
		<h1>Hi I'm Brock</h1>
		<p>
			a fourth year Software Engineering Student specializing in full-stack development with a
			strong focus on backend technologies. I am developing the language of how to design, develop,
			and create programs that are to industry standards and reasonably efficent. I bring the
			lessons learned from each project I have completed, learning from the mistakes I have made and
			bringing improved versions forward into the next project.
		</p>
		<p>
			As of writing this I intend to bring the knowledge learned from my time at university in
			Software Engineering onto a Baja SAE car, where we can collect data remotely and graph data
			for instantaneous and future analysis, during vechile operation.
		</p>
		<p>
			I grew up in a small ski town where, I started learning about programming, from of course
			Minecraft, where I thought the application of this was so futuristic and downright cool that I
			knew I wanted to persue it further. While living there I spend a majority of my time outside
			of school swimming competitively, where I ranked top 10 in BC. Along with swimming I spend a
			lot of time volunteering with fundraising events and coaching the local Special Olympics swim
			team.
		</p>
		<p>
			I adore problem solving and building cool stuff, I'm happy to jump in and get started!
			<a href="/contact"> <button>Let's create something great together!</button></a>
		</p>
	</div>
</div>
<div class="technologies">
	<h2>Technology</h2>
	<p>Here is what I prefer to use and their self assessed skill</p>
	<!-- <p>Here is what I developed skills in.</p> -->
	<div class="technologies-cat">
		<TechCat cat="Languages" tech_vec={languages} />
		<TechCat cat="Backend" , tech_vec={backend} />
		<TechCat cat="Frontend" , tech_vec={frontend} />
		<TechCat cat="Databases" , tech_vec={databases} />
		<TechCat cat="Platforms" , tech_vec={platforms} />
		<TechCat cat="Tools" , tech_vec={tools} />
	</div>
</div>

<Contact />

<Projects independent_page={false} />

<div id="experience">
	<h2>Experience</h2>
	<div>
		<Experience professional_jobs={true} />
		<Experience professional_jobs={false} />
	</div>
</div>

<style>
	#home-intro {
		display: flex;
		flex-direction: column;
		width: 90%;
		margin: 2svh auto;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
	}

	h1 {
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
		display: flex;
		margin: 2svh 2svw;
		padding: 0svh 2svw;
		padding-bottom: 1svh;
	}

	div:first-of-type p {
		margin: 1svh 4svw;
		padding: 0svh 2svw;
		padding-bottom: 1svh;
	}

	button {
		display: block;
		background-color: transparent;
		color: inherit;
		border-radius: var(--card-border-radius);
		background-color: var(--card-background-color);
		border: 2px solid purple;
		padding: 2svh 0.5svw;
		margin: 2svh 0svw;
		cursor: pointer;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	a:hover {
		color: #91a4d2;
	}

	.technologies {
		display: flex;
		flex-direction: column;
	}

	.technologies-cat {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		column-gap: 1svw;
		row-gap: 1svh;
	}

	#experience {
		display: flex;
		flex-direction: column;
		margin-bottom: 4svh;
	}

	#experience div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		margin: 4svh 0px;
	}
</style>