Skip to content

Commit 16a9bca

Browse files
jonaspmjonaspm
committed
tweaks to animations and css
1 parent 7fcc760 commit 16a9bca

11 files changed

Lines changed: 1785 additions & 818 deletions

File tree

‎astro.config.mjs‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { defineConfig } from "astro/config";
22
import react from "@astrojs/react";
33
import tailwind from "@astrojs/tailwind";
44

5+
// https://astro.build/config
56
export default defineConfig({
67
site: "https://jonaspm.github.io",
78
integrations: [react(), tailwind()],
89
server: {
9-
host: true,
10-
},
11-
});
10+
host: true
11+
}
12+
});

‎package-lock.json‎

Lines changed: 1710 additions & 743 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@
99
"astro": "astro"
1010
},
1111
"dependencies": {
12-
"@astrojs/react": "^3.0.9",
13-
"@types/react": "^18.2.45",
14-
"@types/react-dom": "^18.2.18",
15-
"astro": "^4.1.3",
12+
"@types/react": "^18.2.74",
13+
"@types/react-dom": "^18.2.24",
14+
"astro": "^4.5.16",
1615
"react": "^18.2.0",
1716
"react-dom": "^18.2.0"
1817
},
1918
"devDependencies": {
19+
"@astrojs/react": "^3.1.1",
2020
"@astrojs/tailwind": "^5.1.0",
21-
"@biomejs/biome": "^1.5.2",
22-
"sass": "^1.69.5",
23-
"tailwindcss": "^3.4.1"
21+
"@biomejs/biome": "^1.6.4",
22+
"sass": "^1.74.1",
23+
"tailwindcss": "^3.4.3"
2424
}
2525
}

public/images/bg.jpeg renamed to src/assets/images/bg.jpeg

File renamed without changes.

‎src/components/Background.astro‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/components/HeaderProfile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ function HeaderProfile() {
55
return (
66
<Box className="header-profile !backdrop-blur-none p-5 !bg-secondary/0">
77
<Box className="aspect-square !rounded-full max-w-xs self-center profile-container">
8-
<div className="profile aspect-square w-full rounded-full"></div>
8+
<div className="profile aspect-square w-full rounded-full" />
99
</Box>
1010
</Box>
1111
);

‎src/components/MainBody.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,14 +85,14 @@ function MainBody({ projects }: { projects: Project[] }) {
8585
<ul className="flex justify-center gap-8 flex-row flex-wrap">
8686
{
8787
projects.map((project, index) => (
88-
<li key={index} className="flex w-5/6 xs:w-48 flex-col align-center">
88+
<li key={index} className="project flex w-5/6 xs:w-48 flex-col align-center">
8989
<a
90-
className="link flex flex-col items-center text-center p-4 shadow-md rounded-md hover:scale-110 transition-transform duration-200 bg-secondary/30"
90+
className="link flex flex-col items-center text-center p-4 shadow-md rounded-md tra transition-transform duration-200 bg-secondary/30"
9191
href={project.url}
9292
>
9393
<span>{project.name}</span>
9494
<img
95-
className="w-full rounded-sm object-contain hover:scale-110 transition-transform duration-200 delay-150 my-2"
95+
className="w-full rounded-sm object-contain transition-transform duration-200 delay-150 my-2"
9696
src={project.image.src}
9797
alt={project.name}
9898
/>

‎src/layouts/Layout.astro‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
---
22
import "@/styles/index.scss"
3-
import Background from "@/components/Background.astro"
43
import Header from "@/components/Header"
54
import Footer from "@/components/Footer"
5+
import bg from "@/assets/images/bg.jpeg"
6+
import { getImage } from "astro:assets"
7+
8+
const bgImage = await getImage({src: bg, format: 'avif'})
69
710
const { title } = Astro.props
811
---
912

1013
<!DOCTYPE html>
11-
<html lang="en">
14+
<html lang="en" class="min-h-dvh bg-cover bg-center bg-no-repeat bg-fixed">
1215
<head>
1316
<meta charset="UTF-8" />
1417
<meta name="viewport" content="width=device-width" />
@@ -23,12 +26,22 @@ const { title } = Astro.props
2326
})(window, document, "clarity", "script", "l5tvca8qee");
2427
</script>
2528
</head>
26-
<body>
27-
<Background />
28-
<Header />
29-
<main>
30-
<slot />
31-
</main>
32-
<Footer />
29+
<body class="h-full">
30+
<div class="app-container">
31+
<Header />
32+
<main>
33+
<slot />
34+
</main>
35+
<Footer />
36+
</div>
3337
</body>
38+
<style define:vars={{'bg-image': `url('${bgImage.src}')`}}>
39+
html {
40+
background-image: linear-gradient(
41+
315deg,
42+
rgba(255, 43, 43, 0.4),
43+
rgba(45, 101, 255, 0.4)
44+
), var(--bg-image);
45+
}
46+
</style>
3447
</html>

‎src/styles/Background.scss‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎src/styles/global.scss‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
// SASS VARIABLES
55

66
// COLORS
7+
$color-bg: rgba(255, 255, 255, 0.1);
78
$color-primary: rgb(255, 255, 255);
89
$color-secondary: rgb(49, 49, 49);
910
$font-family: "Nunito", sans-serif;
@@ -16,6 +17,7 @@ $font-color-secondary: rgba(255, 255, 255, 1);
1617

1718
:root {
1819
// COLORS
20+
--color-bg: #{$color-bg};
1921
--color-primary: #{$color-primary};
2022
--color-secondary: #{$color-secondary};
2123
--font-family: #{$font-family};
@@ -42,10 +44,43 @@ $font-color-secondary: rgba(255, 255, 255, 1);
4244
}
4345

4446
body {
45-
background-color: var(--color-primary);
47+
background-color: var(--color-bg);
4648
color: var(--font-color-primary);
4749
font-family: var(--font-family);
4850
font-weight: var(--font-weight);
4951
text-shadow: var(--font-shadow);
5052
font-size: var(--font-size);
53+
}
54+
55+
.app-container {
56+
animation-name: background-show;
57+
animation-duration: 2s;
58+
animation-iteration-count: 1;
59+
animation-fill-mode: forwards;
60+
animation-delay: 1s;
61+
opacity: 0;
62+
}
63+
64+
@keyframes background-show {
65+
from {
66+
opacity: 0;
67+
transform: scale(1.1);
68+
}
69+
70+
to {
71+
opacity: 1;
72+
}
73+
}
74+
75+
// Projects
76+
.project {
77+
78+
&:hover {
79+
& a {
80+
@apply scale-110;
81+
}
82+
& img {
83+
@apply scale-110;
84+
}
85+
}
5186
}

0 commit comments

Comments
 (0)