Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@aleksanderbrymora
aleksanderbrymora committed Jan 15, 2022
0 parents commit b17f597
Show file tree
Hide file tree
Showing 67 changed files with 2,298 additions and 0 deletions.
20 changes: 20 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['svelte3', '@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
'svelte3/typescript': () => require('typescript')
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020
},
env: {
browser: true,
es2017: true,
node: true
}
};
8 changes: 8 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
1 change: 1 addition & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
engine-strict=true
6 changes: 6 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100
}
41 changes: 41 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm init svelte@next

# create a new project in my-app
npm init svelte@next my-app
```

> Note: the `@next` is temporary
## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:

```bash
npm run build
```

> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.

<a href="https://iconscout.com/icon-pack/programming-language-logos" target="_blank">Programming Language Logos Icon Pack</a> by <a href="https://iconscout.com/contributors/icon-mafia">Icon Mafia</a> on <a href="https://iconscout.com">Iconscout</a>
43 changes: 43 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"name": "portfolio",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build",
"package": "svelte-kit package",
"preview": "svelte-kit preview",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"@types/lodash.sample": "^4.2.6",
"@types/lodash.samplesize": "^4.2.6",
"@types/node": "^17.0.8",
"@typescript-eslint/eslint-plugin": "^4.31.1",
"@typescript-eslint/parser": "^4.31.1",
"autoprefixer": "^10.4.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1",
"postcss": "^8.4.5",
"prettier": "^2.4.1",
"prettier-plugin-svelte": "^2.4.0",
"svelte": "^3.44.0",
"svelte-check": "^2.2.6",
"svelte-preprocess": "^4.10.1",
"tailwindcss": "^3.0.13",
"tslib": "^2.3.1",
"typescript": "^4.4.3"
},
"type": "module",
"dependencies": {
"clsx": "^1.1.1",
"lodash.sample": "^4.2.1",
"lodash.samplesize": "^4.2.0",
"sass": "^1.48.0"
}
}
6 changes: 6 additions & 0 deletions postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};
13 changes: 13 additions & 0 deletions src/app.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="%svelte.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
<body>
<div id="svelte">%svelte.body%</div>
</body>
</html>
26 changes: 26 additions & 0 deletions src/components/About.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<script>
import clsx from 'clsx';
</script>

<section class="grid md:grid-cols-3 gap-12">
<img
src="profile.jpg"
alt="My face"
class={clsx([
// grid
'md:col-start-1 md:row-span-2',
// styling
'rounded-full aspect-square w-32 mx-auto md:w-full'
])}
/>
<p class="text-4xl font-bold md:col-start-2 md:col-span-2 leading-normal">
Hi, I'm Aleks. I create full stack web apps for fun!
</p>
<p class="md:col-start-2 md:col-span-2 text-xl leading-relaxed font-bold rounded-xl">
I love using anything programming-related to turn some of my passions into projects for others
to enjoy. I use many technologies to achieve that and I'm always looking for something better or
to improve upon.<br />
I also love metal music, producing music, 3D printing, mechanical keyboards and woodworking.
<a href="/other" class="text-red-600 underline">Learn more about my hobbies here!</a>
</p>
</section>
83 changes: 83 additions & 0 deletions src/components/Bio.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<script lang="ts">
import { fly, fade } from 'svelte/transition';
import clsx from 'clsx';
type SelectedPeriod = 'uon' | 'ga' | 'pl';
interface Period {
short: SelectedPeriod;
full: string;
img: string;
description: string;
}
const periodData: Period[] = [
{
short: 'uon',
full: 'University of Newcastle',
img: 'uon-logo.gif',
description: `I attended Computer Systems Engineering at University of Newcastle in Australia in 2019, where I discovered a true passion for programming. At that point I knew I wanted to do more of it, so I made a decision to fast track my career and went to a Sydney based Bootcamp - Software Engineering Immersive at General Assembly.`
},
{
short: 'ga',
full: 'General Assembly',
img: 'ga-logo.png',
description: `It was a big gamble to discontinue my university education, but it paid off in specialised knowledge and a kickstart for more learning. After finishing a 3 month Bootcamp I immediately was offered a job there as an Instructional Associate. I stayed there, helping newcomers to programming, learn all the basics and more.`
},
{
short: 'pl',
full: 'Poland',
img: 'poland.gif',
description: `After 6 months of work for General Assembly I moved back to Poland, where I focused on bettering and honing in my programming skills in the evenings, all while working at various physical jobs at farm and construction during the day. After a year of that I'm committing fully to programming, so if you're hiring - contact is in the corner!`
}
];
let selected: Period = periodData[0];
const handleClick = (period: Period) => (selected = period);
</script>

<section class="grid xl:grid-cols-2 gap-10 xl:h-[32rem] xl:items-center ">
<div class="flex justify-between flex-col gap-3 xl:gap-10 h-min">
{#each periodData as period}
<div class="flex">
{#if period.short === selected.short}
<svg
transition:fly={{ x: -10 }}
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 absolute left-16"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
{/if}
<button
on:click={() => handleClick(period)}
class={clsx(
'text-3xl xl:text-5xl font-bold flex gap-2 items-center h-8 text-zinc-400',
selected.short === period.short && 'text-white'
)}
>
<p class="text-left">{period.full}</p>
</button>
</div>
{/each}
</div>

{#key selected.short}
<figure
in:fly={{ x: -10 }}
class="flex flex-col gap-5 h-[20rem] bg-zinc-100 p-5 rounded-xl shadow-md text-zinc-900"
>
<div in:fade class="flex gap-5 items-center">
<img src={selected.img} class="rounded-md w-32" alt={`${selected.full} logo`} />
<p class="text-5xl font-extrabold">{selected.full}</p>
</div>
<figcaption in:fade={{ delay: 200 }}>{selected.description}</figcaption>
</figure>
{/key}
</section>
Empty file added src/components/Contact.svelte
Empty file.
33 changes: 33 additions & 0 deletions src/components/Hero.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<section class="grid md:grid-cols-2 gap-10 md:gap-0">
<div class="md:col-start-2 h-full md:row-start-1 row-start-2 grid gap-3 grid-cols-1 z-10">
<h2 class="text-3xl leading-normal font-semibold">
I'm a full-stack developer passionate about making usefull things in the best way possible.
</h2>
<div class="flex items-center gap-3 flex-col md:flex-row">
<button
class="bg-zinc-100 text-black w-56 rounded-full h-16 font-medium whitespace-nowrap px-4"
>Read about me</button
>
<button
class="text-zinc-100 border-2 border-zinc-500 w-56 rounded-full h-16 font-medium px-4 whitespace-nowrap"
>Check out my projects</button
>
</div>
</div>
<h1 class="md:w-min mx-auto text-center text-red-800 col-start-1 row-start-1">
Hi Im <br /> Aleks
</h1>
</section>

<style>
h1 {
font-family: Heartless, sans-serif;
font-size: clamp(6.25rem, -11.54rem + 76.92vw, 12.5rem);
text-shadow: 1px 1px 10px rgb(51, 0, 0), 1px 1px 10px rgb(104, 0, 0);
line-height: 90%;
}
h2 {
font-size: clamp(1.44rem, 1.09rem + 1.76vw, 2.34rem);
}
</style>
65 changes: 65 additions & 0 deletions src/components/Languages.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<script lang="ts">
import clsx from 'clsx';
import sample from 'lodash.sample';
import sampleSize from 'lodash.samplesize';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
export let paths: string[];
let randomImgs: Img[] = [];
$: allImg = paths.map((p) => ({
src: p,
alt: p.replace('tech-icons/', '').replace(/\.\w+/, '')
}));
interface Img {
src: string;
alt: string;
}
const getRandomInRange = (min = 3000, max = 5000) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
};
const newImg = () => {
const toDelete = sample(randomImgs);
randomImgs = [...randomImgs.filter((i) => i.src !== toDelete.src)];
let newImg: Img;
do {
newImg = sample(allImg);
} while (randomImgs.findIndex((i) => i.src === newImg.src) !== -1);
randomImgs.push(newImg);
};
onMount(() => {
randomImgs = sampleSize(allImg, 25);
const interval = setInterval(newImg, 500);
return () => clearInterval(interval);
});
</script>

<section class="bg-zinc-200 rounded-3xl h-96 overflow-hidden relative">
<div class="absolute h-full p-10 z-20 ">
<p
class="text-7xl text-zinc-50 font-extrabold bg-zinc-800 w-min p-5 z-20 bg-opacity-90 rounded-xl"
>
What do I use
</p>
</div>
<div class="absolute h-full w-full">
<div class="relative h-full filter blur-sm">
{#each randomImgs as i (i.src)}
<img
transition:fade
class={clsx('h-16 absolute z-0')}
style={`left: ${getRandomInRange(0, 100)}%; top: ${getRandomInRange(0, 100)}%;`}
src={i.src}
alt={i.alt}
/>
{/each}
</div>
</div>
</section>
11 changes: 11 additions & 0 deletions src/components/Nav.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<nav class="flex justify-between py-3 mt-10 mb-36 container mx-auto px-3">
<a href="/" class="flex items-center">
<img src="favicon-32x32.png" alt="Aleksander Brymora logo" />
<p class="text-zinc-900 dark:text-white ml-5 font-medium text-xl">Aleksander Brymora</p>
</a>
<ul class="flex gap-8 font-bold dark:text-zinc-400">
<li><a href="/" class="whitespace-nowrap">Main Page</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/other">Other</a></li>
</ul>
</nav>
1 change: 1 addition & 0 deletions src/components/SectionBreak.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div class="my-24 border w-full border-zinc-800" />
1 change: 1 addition & 0 deletions src/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="@sveltejs/kit" />
5 changes: 5 additions & 0 deletions src/lib/removeSelf.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const removeSelf = (node: HTMLElement, { time }: { time: number }) => {
setTimeout(() => {
node.dispatchEvent(new CustomEvent('remove'));
}, time);
};
9 changes: 9 additions & 0 deletions src/routes/__layout.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script>
import Nav from '../components/Nav.svelte';
import '../style.css';
</script>

<Nav />
<div class="container mx-auto px-10">
<slot />
</div>
Loading

0 comments on commit b17f597

Please sign in to comment.