Fill in initial layout and resume details
This commit is contained in:
parent
28a4b45a34
commit
c801394771
|
|
@ -22,5 +22,8 @@
|
||||||
"typescript": "^5.0.4",
|
"typescript": "^5.0.4",
|
||||||
"vite": "^4.3.2"
|
"vite": "^4.3.2"
|
||||||
},
|
},
|
||||||
"packageManager": "yarn@3.5.1"
|
"packageManager": "yarn@3.5.1",
|
||||||
|
"dependencies": {
|
||||||
|
"tailwind-merge": "^1.12.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,32 @@
|
||||||
<script>
|
<script>
|
||||||
import Hero from './lib/components/Hero.svelte'
|
import Hero from './lib/components/Hero.svelte'
|
||||||
import headshotPhoto from './assets/headshot.jpg'
|
import headshotPhoto from './assets/headshot.jpg'
|
||||||
|
import SkillsSection from "./lib/SkillsSection.svelte";
|
||||||
|
import ExpSection from "./lib/ExpSection.svelte";
|
||||||
|
import ContactSection from "./lib/ContactSection.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="bg-gray-900">
|
<div class="pb-16 lg:pb-24">
|
||||||
|
<header class="bg-gray-900">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<Hero imageUrl={headshotPhoto} imageAlt="Headshot photograph of Dan Kotowski" title="Dan Kotowski" text="Senior web software engineer with strong technical and interpersonal skills"/>
|
<Hero
|
||||||
|
imageUrl={headshotPhoto}
|
||||||
|
imageAlt="Headshot photograph of Dan Kotowski"
|
||||||
|
title="Dan Kotowski"
|
||||||
|
>
|
||||||
|
<p class="mt-6 text-lg lg:text-xl text-gray-300">
|
||||||
|
Senior web software engineer with strong technical and interpersonal skills
|
||||||
|
</p>
|
||||||
|
<p class="mt-6 text-yellow-600 italic">
|
||||||
|
Note: This webpage is a work in progress.
|
||||||
|
</p>
|
||||||
|
</Hero>
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<SkillsSection />
|
||||||
|
<ExpSection />
|
||||||
|
<ContactSection />
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<script>
|
||||||
|
import Header from "./components/Header.svelte";
|
||||||
|
import GithubIcon from "./icons/GithubIcon.svelte";
|
||||||
|
import Link from "./components/Link.svelte";
|
||||||
|
import EnvelopeIcon from "./icons/EnvelopeIcon.svelte";
|
||||||
|
import LinkedInIcon from "./icons/LinkedInIcon.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="container mx-auto">
|
||||||
|
<Header>Contact</Header>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-center space-x-12 lg:space-x-20">
|
||||||
|
<div class="flex-initial">
|
||||||
|
<Link href="mailto:dan@dankotowski.dev" target="_blank" title="Email me">
|
||||||
|
<EnvelopeIcon class="w-12 h-12 lg:w-20 lg:h-20" />
|
||||||
|
<div class="sr-only">Email me: dan@dankotowski.dev</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div class="flex-initial">
|
||||||
|
<Link href="https://github.com/djkotowski" target="_blank">
|
||||||
|
<GithubIcon class="w-12 h-12 lg:w-20 lg:h-20" />
|
||||||
|
<div class="sr-only">Go to my Github account (@djkotowski)</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div class="flex-initial">
|
||||||
|
<Link href="https://linkedin.com/in/djkotowski" target="_blank">
|
||||||
|
<LinkedInIcon class="w-12 h-12 lg:w-20 lg:h-20" />
|
||||||
|
<div class="sr-only">Go to my LinkedIn account (@djkotowski)</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
<script>
|
||||||
|
import Header from "./components/Header.svelte";
|
||||||
|
import Link from "./components/Link.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="container mx-auto text-center">
|
||||||
|
<Header>Experience</Header>
|
||||||
|
|
||||||
|
<ul
|
||||||
|
role="list"
|
||||||
|
class="mx-auto grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-8"
|
||||||
|
>
|
||||||
|
<li class="rounded-2xl bg-gray-900 mx-2 px-8 py-10">
|
||||||
|
<h2 class="text-2xl font-bold ">
|
||||||
|
<Link href="https://brilliantmade.com/" target="_blank">Brilliant</Link>
|
||||||
|
</h2>
|
||||||
|
<div class="font-semibold mt-2 text-lg text-gray-300 ">
|
||||||
|
<span class="block lg:inline-block">Software Engineer</span>
|
||||||
|
<span class="block lg:inline-block">(Jul 2022 - Present)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="border-gray-700 my-4" />
|
||||||
|
|
||||||
|
<h5 class="font-semibold">Tech used:</h5>
|
||||||
|
<p>Ruby on Rails, React, TypeScript, Alpine.js, MySQL, Web Components, AWS, Redis, ActiveJob/Sidekiq</p>
|
||||||
|
</li>
|
||||||
|
<li class="rounded-2xl bg-gray-900 mx-2 px-8 py-10">
|
||||||
|
<h2 class="text-2xl font-bold ">
|
||||||
|
<Link href="https://buildout.com/" target="_blank">Buildout</Link>
|
||||||
|
</h2>
|
||||||
|
<ul class="font-semibold mt-2 text-lg text-gray-300 ">
|
||||||
|
<li class="pb-2">
|
||||||
|
<span class="block lg:inline-block">Lead Software Engineer</span>
|
||||||
|
<span class="block lg:inline-block">(May 2021 - Jun 2022)</span>
|
||||||
|
</li>
|
||||||
|
<li class="pb-2">
|
||||||
|
<span class="block lg:inline-block">Senior Software Engineer</span>
|
||||||
|
<span class="block lg:inline-block">(Oct 2019 - May 2021)</span>
|
||||||
|
</li>
|
||||||
|
<li class="pb-2">
|
||||||
|
<span class="block lg:inline-block">Software Engineer</span>
|
||||||
|
<span class="block lg:inline-block">(May 2017 - Oct 2019)</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<hr class="border-gray-700 my-4" />
|
||||||
|
|
||||||
|
<h5 class="font-semibold">Tech used:</h5>
|
||||||
|
<p>Ruby on Rails, React, TypeScript, Alpine.js, MySQL, AWS, Redis, Sidekiq</p>
|
||||||
|
</li>
|
||||||
|
<li class="rounded-2xl bg-gray-900 mx-2 px-8 py-10">
|
||||||
|
<h2 class="text-2xl font-bold ">
|
||||||
|
<Link href="https://cod.edu/" target="_blank">College of DuPage</Link>
|
||||||
|
</h2>
|
||||||
|
<div class="font-semibold mt-2 text-lg text-gray-300 ">
|
||||||
|
<span class="block lg:inline-block">Adjunct Faculty</span>
|
||||||
|
<span class="block lg:inline-block">(Aug 2014 - Dec 2017)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="border-gray-700 my-4" />
|
||||||
|
|
||||||
|
<h5 class="font-semibold">Courses taught:</h5>
|
||||||
|
<p>CIS 1510: GUI Programming</p>
|
||||||
|
<p>(using Visual Basic .NET)</p>
|
||||||
|
</li>
|
||||||
|
<li class="rounded-2xl bg-gray-900 mx-2 px-8 py-10">
|
||||||
|
<h2 class="text-2xl font-bold ">
|
||||||
|
<Link href="https://enova.com/" target="_blank">Enova International</Link>
|
||||||
|
</h2>
|
||||||
|
<ul class="font-semibold mt-2 text-lg text-gray-300 ">
|
||||||
|
<li class="pb-2">
|
||||||
|
<span class="block lg:inline-block">Internal Learning Coordinator</span>
|
||||||
|
<span class="block lg:inline-block">(Dec 2014 - Mar 2017)</span>
|
||||||
|
</li>
|
||||||
|
<li class="pb-2">
|
||||||
|
<span class="block lg:inline-block">Software Engineer</span>
|
||||||
|
<span class="block lg:inline-block">(Aug 2014 - Dec 2014)</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<hr class="border-gray-700 my-4" />
|
||||||
|
|
||||||
|
<h5 class="font-semibold">Tech used:</h5>
|
||||||
|
<p>Ruby on Rails, Sinatra, Sidekiq</p>
|
||||||
|
</li>
|
||||||
|
<li class="rounded-2xl bg-gray-900 mx-2 px-8 py-10">
|
||||||
|
<h2 class="text-2xl font-bold ">
|
||||||
|
<Link
|
||||||
|
href="https://www.accenture.com/us-en/services/supply-chain-management-and-operations-index"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Blue Horseshoe Solutions
|
||||||
|
</Link>
|
||||||
|
<br />
|
||||||
|
<span class="block font-normal text-sm italic mt-0 pt-0">(now part of Accenture)</span>
|
||||||
|
</h2>
|
||||||
|
<div class="font-semibold mt-2 text-lg text-gray-300 ">
|
||||||
|
<span class="inline-block">Consultant</span>
|
||||||
|
<span class="inline-block">(May 2011 - Jan 2013)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="border-gray-700 my-4" />
|
||||||
|
|
||||||
|
<h5 class="font-semibold">Tech used:</h5>
|
||||||
|
<p>C#, ASP.NET MVC 3, Microsoft SQL Server, jQuery, Manhattan SCALE</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script>
|
||||||
|
import Header from "./components/Header.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="container mx-auto px-4">
|
||||||
|
<Header>Skills</Header>
|
||||||
|
|
||||||
|
<div class="content-center lg:text-lg">
|
||||||
|
<table class="mx-auto sm:whitespace-nowrap">
|
||||||
|
<tr>
|
||||||
|
<th class="block sm:table-cell font-bold w-auto pr-3 lg:pr-5 text-left">Backend:</th>
|
||||||
|
<td class="block pb-4 sm:pb-0 sm:table-cell text-left">Ruby, Ruby on Rails, Node.js, Sinatra</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="block sm:table-cell font-bold w-auto pr-3 lg:pr-5 text-left">Frontend:</th>
|
||||||
|
<td class="block pb-4 sm:pb-0 sm:table-cell text-left">ES6, TypeScript, React, Redux, Svelte, CSS/Sass, Webpack, Vite</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="block sm:table-cell font-bold w-auto pr-3 lg:pr-5 text-left">Data Stores/Indexes:</th>
|
||||||
|
<td class="block pb-4 sm:pb-0 sm:table-cell text-left">PostgreSQL, MySQL, Redis, Elasticsearch</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<h1 class="text-center text-white text-3xl font-bold mt-20 mb-10">
|
||||||
|
<slot />
|
||||||
|
</h1>
|
||||||
|
|
@ -5,10 +5,10 @@
|
||||||
export let imageAlt: string;
|
export let imageAlt: string;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="px-6 py-1 pb-10 sm:py-32 lg:px-8">
|
<div class="px-6 py-1 pb-10 sm:pt-32 sm:pb-24 lg:px-8">
|
||||||
<div class="mx-auto max-w-2xl text-center">
|
<div class="mx-auto max-w-2xl text-center">
|
||||||
<img class="mx-auto mb-6 w-32 h-32 lg:w-48 lg:h-48 rounded-full" src={imageUrl} alt={imageAlt} />
|
<img class="mx-auto mb-6 w-32 h-32 lg:w-48 lg:h-48 rounded-full" src={imageUrl} alt={imageAlt} />
|
||||||
<h2 class="text-4xl lg:text-6xl font-bold tracking-tight text-gray-100 sm:text-6x1">{title}</h2>
|
<h2 class="text-4xl lg:text-6xl font-bold tracking-tight text-gray-100 sm:text-6x1">{title}</h2>
|
||||||
<p class="mt-6 text-lg lg:text-xl leading-8 text-gray-300">{text}</p>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import type { HTMLAnchorAttributes } from 'svelte/elements'
|
||||||
|
|
||||||
|
export let href: string
|
||||||
|
export let target: HTMLAnchorAttributes['target']
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a class="text-cyan-200 hover:text-cyan-400 hover:border-b border-dotted" {href} {target}><slot /></a>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!--suppress ReservedWordAsName -->
|
||||||
|
<script>
|
||||||
|
let className
|
||||||
|
export { className as class }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class={className}>
|
||||||
|
<path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
|
||||||
|
<path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
|
||||||
|
</svg>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!--suppress ReservedWordAsName -->
|
||||||
|
<script>
|
||||||
|
let className
|
||||||
|
export { className as class }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class={className}>
|
||||||
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||||
|
</svg>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!--suppress ReservedWordAsName -->
|
||||||
|
<script>
|
||||||
|
let className
|
||||||
|
export { className as class }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class={className} fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
||||||
|
</svg>
|
||||||
|
|
@ -1526,6 +1526,7 @@ __metadata:
|
||||||
postcss: ^8.4.23
|
postcss: ^8.4.23
|
||||||
svelte: ^3.58.0
|
svelte: ^3.58.0
|
||||||
svelte-check: ^3.3.1
|
svelte-check: ^3.3.1
|
||||||
|
tailwind-merge: ^1.12.0
|
||||||
tailwindcss: ^3.3.2
|
tailwindcss: ^3.3.2
|
||||||
tslib: ^2.5.0
|
tslib: ^2.5.0
|
||||||
typescript: ^5.0.4
|
typescript: ^5.0.4
|
||||||
|
|
@ -2050,6 +2051,13 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"tailwind-merge@npm:^1.12.0":
|
||||||
|
version: 1.12.0
|
||||||
|
resolution: "tailwind-merge@npm:1.12.0"
|
||||||
|
checksum: 5ef323eec1051c4aa9626e29498f6c058dbbb242ca8156aa298de41ada3eda05a8f5f1260a57112c155f63b2e94c4b4ccab5386d60fae54de07aac6d9dbc60e4
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"tailwindcss@npm:^3.3.2":
|
"tailwindcss@npm:^3.3.2":
|
||||||
version: 3.3.2
|
version: 3.3.2
|
||||||
resolution: "tailwindcss@npm:3.3.2"
|
resolution: "tailwindcss@npm:3.3.2"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue