Skip to content

Commit 22dcfcf

Browse files
sophie-mc-devsophie-mc-dev
committed
ADD: section placeholders + footer component + darkmode component
1 parent 31dea3a commit 22dcfcf

File tree

11 files changed

+159
-18
lines changed

11 files changed

+159
-18
lines changed

‎src/app.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html class="dark" lang="en">
33

44
<head>
55
<meta charset="utf-8" />
@@ -14,7 +14,7 @@
1414
<link
1515
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
1616
rel="stylesheet">
17-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
17+
<link rel="icon" href="%sveltekit.assets%/logo.png" />
1818
<meta name="viewport" content="width=device-width, initial-scale=1" />
1919
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.4.1/flowbite.min.css" rel="stylesheet" />
2020
%sveltekit.head%

‎src/lib/components/Darkmode.svelte

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script>
2+
import { DarkMode } from "flowbite-svelte";
3+
4+
let btnClass =
5+
"text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-xl p-2";
6+
</script>
7+
8+
9+
<div class="menu top-right">
10+
<DarkMode {btnClass} />
11+
12+
</div>
13+
14+
<style>
15+
.menu {
16+
position: fixed;
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
}
21+
22+
.top-right {
23+
top: 20px;
24+
right: 100px;
25+
}
26+
</style>

‎src/lib/components/Footer.svelte

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
import { Footer, FooterCopyright } from "flowbite-svelte";
3+
</script>
4+
5+
<Footer class="absolute bottom-0 left-0 z-20 w-full p-4 shadow">
6+
<div class="flex flex-col items-center justify-center">
7+
<img src="src/lib/images/logo.png" alt="Logo" class="h-16 mb-3" />
8+
<FooterCopyright href="/" by="Sofia Merino Costa" year={2024} />
9+
</div>
10+
</Footer>

‎src/lib/components/TopMenu.svelte

+7-7
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,23 @@
22
import MaterialSymbolsHome from "~icons/material-symbols/home";
33
import MdiUser from '~icons/mdi/user';
44
import TablerCode from '~icons/tabler/code';
5-
import MdiBriefcase from '~icons/mdi/briefcase';
65
import IcBaselineEmail from '~icons/ic/baseline-email';
6+
import ClarityLightbulbSolid from '~icons/clarity/lightbulb-solid';
77
88
export let icons = [
9-
{ href: "#home", component: MaterialSymbolsHome },
10-
{ href: "#aboutme", component: MdiUser },
11-
{ href: "#projects", component: TablerCode },
12-
{ href: "#experience", component: MdiBriefcase },
13-
{ href: "#contactme", component: IcBaselineEmail },
9+
{ href: "#home", component: MaterialSymbolsHome, title: "Home" },
10+
{ href: "#aboutme", component: MdiUser, title: "About Me" },
11+
{ href: "#skills", component: ClarityLightbulbSolid, title: "Skills" },
12+
{ href: "#projects", component: TablerCode, title: "Projects" },
13+
{ href: "#contactme", component: IcBaselineEmail, title: "Contact Me" },
1414
];
1515
</script>
1616

1717
<div class="menu top-left-menu">
1818
<div class="menu-line"></div>
1919
<div class="menu-icons">
2020
{#each icons as icon}
21-
<a href={icon.href} class="menu-icon">
21+
<a href={icon.href} class="menu-icon" title={icon.title}>
2222
<svelte:component this={icon.component} />
2323
</a>
2424
{/each}

‎src/lib/images/logo.png

73.3 KB
Loading

‎src/lib/sections/Contact.svelte

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script>
2+
</script>
3+
4+
<section id="contactme" class="contacts-section">
5+
<h1>Contact Me</h1>
6+
<div class="contacts-content"></div>
7+
</section>
8+
9+
<style>
10+
.contacts-section {
11+
padding: 50px 20px;
12+
text-align: center;
13+
justify-content: center;
14+
color: white;
15+
display: flex;
16+
flex-direction: column;
17+
gap: 40px;
18+
}
19+
h1 {
20+
font-size: 36px;
21+
margin-bottom: 40px;
22+
}
23+
.contacts-content {
24+
display: flex;
25+
flex-direction: row;
26+
justify-content: center;
27+
align-items: center;
28+
gap: 50px;
29+
}
30+
p {
31+
max-width: 500px;
32+
text-align: left;
33+
font-size: 16px;
34+
line-height: 3em;
35+
}
36+
</style>

‎src/lib/sections/Projects.svelte

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script>
2+
</script>
3+
4+
<section id="projects" class="projects-section">
5+
<h1>My Projects</h1>
6+
<div class="projects-content"></div>
7+
</section>
8+
9+
<style>
10+
.projects-section {
11+
padding: 50px 20px;
12+
text-align: center;
13+
justify-content: center;
14+
color: white;
15+
display: flex;
16+
flex-direction: column;
17+
gap: 40px;
18+
}
19+
h1 {
20+
font-size: 36px;
21+
margin-bottom: 40px;
22+
}
23+
.projects-content {
24+
display: flex;
25+
flex-direction: row;
26+
justify-content: center;
27+
align-items: center;
28+
gap: 50px;
29+
}
30+
p {
31+
max-width: 500px;
32+
text-align: left;
33+
font-size: 16px;
34+
line-height: 3em;
35+
}
36+
</style>

‎src/lib/sections/Skills.svelte

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script>
2+
</script>
3+
4+
<section id="skills" class="skills-section">
5+
<h1>My Skills</h1>
6+
<div class="skills-content"></div>
7+
</section>
8+
9+
<style>
10+
.skills-section {
11+
padding: 50px 20px;
12+
text-align: center;
13+
justify-content: center;
14+
color: white;
15+
display: flex;
16+
flex-direction: column;
17+
gap: 40px;
18+
}
19+
h1 {
20+
font-size: 36px;
21+
margin-bottom: 40px;
22+
}
23+
.skills-content {
24+
display: flex;
25+
flex-direction: row;
26+
justify-content: center;
27+
align-items: center;
28+
gap: 50px;
29+
}
30+
p {
31+
max-width: 500px;
32+
text-align: left;
33+
font-size: 16px;
34+
line-height: 3em;
35+
}
36+
</style>

‎src/routes/+layout.svelte

-7
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@
44
let y;
55
let innerHeight = 0;
66
let innerWidth = 0;
7-
8-
function goTop() {
9-
document.body.scrollIntoView();
10-
}
117
</script>
128

139
<div
@@ -19,9 +15,6 @@
1915
? "opacity-full pointer-events-auto"
2016
: "pointer-events-none opacity-0")}
2117
>
22-
<button>
23-
<i class="fa-solid fa-arrow-up"></i>
24-
</button>
2518
</div>
2619
<slot />
2720
</div>

‎src/routes/+page.svelte

+6-2
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,26 @@
22
import Home from "$lib/sections/Home.svelte";
33
import About from "$lib/sections/About.svelte";
44
import Projects from "$lib/sections/Projects.svelte";
5-
import Experience from "$lib/sections/Projects.svelte";
5+
import Skills from "$lib/sections/Skills.svelte";
66
import Contact from "$lib/sections/Contact.svelte";
77
import TopMenu from "$lib/components/TopMenu.svelte";
88
import BottomMenu from "$lib/components/BottomMenu.svelte";
9+
import Footer from "$lib/components/Footer.svelte";
10+
import Darkmode from "$lib/components/Darkmode.svelte";
911
</script>
1012

1113
<main>
1214
<TopMenu />
1315
<BottomMenu />
16+
<Darkmode />
1417

1518
<div class="content">
1619
<Home />
1720
<About />
21+
<Skills />
1822
<Projects />
19-
<Experience />
2023
<Contact />
24+
<Footer />
2125
</div>
2226
</main>
2327

‎static/logo.png

73.3 KB
Loading

0 commit comments

Comments
 (0)