Skip to content

Commit e35fde4

Browse files
EthanThatOneKidEthanThatOneKid
committed
Initial progress
Read: sveltejs/kit#6174
1 parent 92b15ab commit e35fde4

File tree

10 files changed

+355
-0
lines changed

10 files changed

+355
-0
lines changed

‎src/routes/portfolio/demo/+layout.svelte‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script>
2+
import NavBar from './navbar.svelte';
3+
</script>
4+
5+
<svelte:head>
6+
<title>Frank's Portfolio</title>
7+
<link rel="stylesheet" href="/global.css" />
8+
<link rel="stylesheet" href="/portfolio/demo/portfolio.css" />
9+
</svelte:head>
10+
11+
<NavBar />
12+
13+
<main>
14+
<slot />
15+
</main>
16+
17+
<style>
18+
main {
19+
margin: 1rem;
20+
font-size: 1.25rem;
21+
}
22+
</style>

‎src/routes/portfolio/demo/+page.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- Code copied mostly as-is from Dev workshop.
2+
See: https://github.com/acmCSUFDev/intro-to-web-dev -->
3+
<script>
4+
import About from './about.svelte';
5+
import Experiences from './experiences.svelte';
6+
import Projects from './projects.svelte';
7+
</script>
8+
9+
<About name={'Frank'} />
10+
<Experiences />
11+
<Projects />

‎src/routes/portfolio/demo/README.md‎

Whitespace-only changes.

‎src/routes/portfolio/demo/about.svelte‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts">
2+
export let name: string;
3+
</script>
4+
5+
<section>
6+
<div class="container__about" id="About">
7+
<img width={180} height={123} src="/assets/portfolio/demo/frank.svg" alt="" />
8+
<p class="header--small">Hi, I'm {name}</p>
9+
<p class="header--big">WELCOME TO MY PORTFOLIO</p>
10+
</div>
11+
</section>
12+
13+
<style>
14+
.container__about {
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
margin-top: 10rem;
19+
}
20+
21+
.header--small {
22+
font-size: 1.5rem;
23+
margin: 2rem 0 0 0;
24+
font-weight: 600;
25+
}
26+
27+
.header--big {
28+
font-size: 2rem;
29+
color: #2c91c6;
30+
font-weight: 700;
31+
}
32+
</style>

‎src/routes/portfolio/demo/experiences.svelte‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script>
2+
const exps = [
3+
{
4+
title: 'Shark Gang Lead',
5+
duration: 'Jan 2022 - Present',
6+
},
7+
{
8+
title: 'Vegan Shark',
9+
duration: 'Jan 2021 - Jan 2022',
10+
},
11+
{
12+
title: 'Junior Shark',
13+
duration: 'Jan 2020 - Jan 2021',
14+
},
15+
{
16+
title: 'Baby Shark',
17+
duration: 'Jan 2019 - Jan 2020',
18+
},
19+
];
20+
</script>
21+
22+
<section class="container__exps" id="Experiences">
23+
<p class="header--big">Experiences</p>
24+
{#each exps as { title, duration }}
25+
<div class="container__exp">
26+
<p class="header__title">{title}</p>
27+
<p class="header__duration">{duration}</p>
28+
</div>
29+
{/each}
30+
</section>
31+
32+
<style>
33+
.container__exps {
34+
margin-top: 10rem;
35+
display: flex;
36+
justify-content: center;
37+
flex-direction: column;
38+
}
39+
40+
.header--big {
41+
font-size: 2.5rem;
42+
font-weight: 780;
43+
}
44+
45+
.container__exp {
46+
background-color: #2c91c6;
47+
border-radius: 2rem;
48+
margin: 1rem;
49+
}
50+
51+
.header__title {
52+
font-size: 1.5rem;
53+
font-weight: 600;
54+
}
55+
</style>

‎src/routes/portfolio/demo/navbar.svelte‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<script lang="ts">
2+
import { onMount } from 'svelte';
3+
4+
const navItems = [
5+
{ title: 'About', url: '#About' },
6+
{ title: 'Experiences', url: '#Experiences' },
7+
{ title: 'Projects', url: '#Projects' },
8+
];
9+
let time = new Date(Date.now());
10+
const options = {
11+
weekday: 'long',
12+
} as const;
13+
14+
// Prevent automatic scrolling
15+
onMount(() => (history.scrollRestoration = 'manual'));
16+
</script>
17+
18+
<nav>
19+
<section class="container__nav" id="/">
20+
{#each navItems as { title, url }}
21+
<a href={url} class="nav__item">
22+
{title}
23+
</a>
24+
{/each}
25+
<p class="time">{time.toLocaleDateString(undefined, options)}</p>
26+
</section>
27+
</nav>
28+
29+
<style>
30+
.container__nav {
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
flex-direction: row;
35+
}
36+
37+
.nav__item {
38+
color: white;
39+
font-weight: 600;
40+
font-size: 2rem;
41+
margin: 0 2rem;
42+
transition: all 400ms;
43+
}
44+
45+
.nav__item:hover {
46+
color: rgb(0, 157, 255);
47+
}
48+
49+
.time {
50+
color: #1a1a1a;
51+
font-weight: 700;
52+
background-color: #2c91c6;
53+
padding: 0.35rem;
54+
margin: 0 2rem;
55+
border-radius: 12px;
56+
}
57+
</style>

‎src/routes/portfolio/demo/projects.svelte‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<script>
2+
const projects = [
3+
{
4+
title: 'acmcsuf.com',
5+
description: 'Developed acmcsuf.com website',
6+
url: 'https://github.com/EthanThatOneKid/acmcsuf.com',
7+
},
8+
{
9+
title: 'Intro to Web Dev',
10+
description: 'Beginner friendly Web Dev series by acmDev',
11+
url: 'https://github.com/acmCSUFDev/intro-to-web-dev',
12+
},
13+
{
14+
title: 'ICON',
15+
description: 'Notion Canvas integration for students',
16+
url: 'https://github.com/acmCSUFDev/ICON',
17+
},
18+
{
19+
title: 'Food Tinder',
20+
description: 'tinder for matching people by food places',
21+
url: 'https://github.com/acmCSUFDev/Food-Tinder',
22+
},
23+
];
24+
</script>
25+
26+
<section class="container__projects" id="Projects">
27+
<p class="header--big">Projects</p>
28+
{#each projects as { title, description, url }}
29+
<div class="container__project">
30+
<a href={url} target="_blank">
31+
<p class="header__title">{title}</p>
32+
</a>
33+
<p>{description}</p>
34+
</div>
35+
{/each}
36+
</section>
37+
38+
<style>
39+
.container__projects {
40+
margin-top: 10rem;
41+
display: flex;
42+
justify-content: center;
43+
flex-direction: column;
44+
}
45+
46+
.header--big {
47+
font-size: 2.5rem;
48+
font-weight: 780;
49+
}
50+
51+
.container__project {
52+
margin: 1rem;
53+
}
54+
55+
.header__title {
56+
color: white;
57+
font-size: 1.5rem;
58+
font-weight: 600;
59+
transition: 400ms all;
60+
}
61+
62+
.header__title:hover {
63+
color: #2c91c6;
64+
}
65+
</style>

‎static/assets/portfolio/demo/dev-logo.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎static/assets/portfolio/demo/frank,.svg‎

Lines changed: 19 additions & 0 deletions
Loading

‎static/assets/portfolio/demo/portfolio.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* SAME AS ORIGINAL */
2+
:root {
3+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
4+
font-size: 16px;
5+
line-height: 24px;
6+
font-weight: 400;
7+
8+
color-scheme: light dark;
9+
color: rgba(255, 255, 255, 0.87);
10+
background-color: #242424;
11+
12+
font-synthesis: none;
13+
text-rendering: optimizeLegibility;
14+
-webkit-font-smoothing: antialiased;
15+
-moz-osx-font-smoothing: grayscale;
16+
-webkit-text-size-adjust: 100%;
17+
}
18+
/* NEW */
19+
html {
20+
scroll-behavior: smooth;
21+
}
22+
/* SAME AS ORIGINAL */
23+
a {
24+
font-weight: 500;
25+
color: #646cff;
26+
text-decoration: inherit;
27+
}
28+
a:hover {
29+
color: #535bf2;
30+
}
31+
32+
body {
33+
margin: 0;
34+
display: flex;
35+
/* place-items: center; */
36+
min-width: 320px;
37+
min-height: 100vh;
38+
}
39+
40+
h1 {
41+
font-size: 3.2em;
42+
line-height: 1.1;
43+
}
44+
45+
.card {
46+
padding: 2em;
47+
}
48+
49+
#app {
50+
max-width: 1280px;
51+
margin: 0 auto;
52+
padding: 2rem;
53+
text-align: center;
54+
}
55+
56+
button {
57+
border-radius: 8px;
58+
border: 1px solid transparent;
59+
padding: 0.6em 1.2em;
60+
font-size: 1em;
61+
font-weight: 500;
62+
font-family: inherit;
63+
background-color: #1a1a1a;
64+
cursor: pointer;
65+
transition: border-color 0.25s;
66+
}
67+
button:hover {
68+
border-color: #646cff;
69+
}
70+
button:focus,
71+
button:focus-visible {
72+
outline: 4px auto -webkit-focus-ring-color;
73+
}
74+
75+
@media (prefers-color-scheme: light) {
76+
:root {
77+
color: #213547;
78+
background-color: #ffffff;
79+
}
80+
a:hover {
81+
color: #747bff;
82+
}
83+
button {
84+
background-color: #f9f9f9;
85+
}
86+
}

0 commit comments

Comments
 (0)