36 |
57 | )
58 | }
--------------------------------------------------------------------------------
/src/components/Drawer.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { SITE, LINKS } from "@consts"
3 | import { cn } from "@lib/utils"
4 | const { pathname } = Astro.url
5 | const subpath = pathname.match(/[^/]+/g)
6 | ---
7 |
8 |
37 |
38 |
41 |
42 | {(query().length >= 2 && results().length >= 1) && (
43 |
44 |
55 | )}
56 |
45 | Found {results().length} results for {`'${query()}'`}
46 |
47 | -
48 | {results().map(result => (
49 |
-
50 |
51 |
52 | ))}
53 |
9 |
18 |
19 |
36 |
37 |
42 |
--------------------------------------------------------------------------------
/src/components/ArrowCard.tsx:
--------------------------------------------------------------------------------
1 | import { formatDate } from "@lib/utils"
2 | import type { CollectionEntry } from "astro:content"
3 |
4 | type Props = {
5 | entry: CollectionEntry<"blog"> | CollectionEntry<"projects">
6 | pill?: boolean
7 | }
8 |
9 | export default function ArrowCard({entry, pill}: Props) {
10 | return (
11 |
12 |
20 |
27 |
28 |
29 |
32 |
33 |
34 |
35 |
13 |
38 |
42 |
43 | )
44 | }
--------------------------------------------------------------------------------
/public/social.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/content/legal/terms.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Terms of Use"
3 | date: "03/07/2024"
4 | ---
5 |
6 | Please read these Terms of Use ("Terms", "Terms of Use") carefully before using the [Your Website URL] website (the "Service") operated by [Your Company Name] ("us", "we", or "our").
7 |
8 | #### Agreement to Terms
9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
10 |
11 | #### Intellectual Property Rights
12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
13 |
14 | #### User Representations
15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
16 |
17 | #### Links to Other Websites
18 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
19 |
20 | #### Termination
21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
22 |
23 | #### Governing Law
24 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
25 |
26 | #### Changes to These Terms of Use
27 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
--------------------------------------------------------------------------------
/src/components/TwinklingStars.astro:
--------------------------------------------------------------------------------
1 | ---
2 | /**
3 | * TwinkleStars.astro
4 | * This component creates twinkling stars that are appended to the galaxy on interval.
5 | * Twinkle stars are removed from the document after the animation is completed.
6 | * The svg below is just a template for the script to clone and append to the galaxy.
7 | */
8 | ---
9 |
10 |
38 |
39 |
62 |
63 |
--------------------------------------------------------------------------------
/public/js/bg.js:
--------------------------------------------------------------------------------
1 |
2 | function generateParticles(n) {
3 | let value = `${getRandom(2560)}px ${getRandom(2560)}px #808080`;
4 | for (let i = 2; i <= n; i++) {
5 | value += `, ${getRandom(2560)}px ${getRandom(2560)}px #808080`;
6 | }
7 | return value;
8 | }
9 |
10 | function generateStars(n) {
11 | let value = `${getRandom(2560)}px ${getRandom(2560)}px #fff`;
12 | for (let i = 2; i <= n; i++) {
13 | value += `, ${getRandom(2560)}px ${getRandom(2560)}px #fff`;
14 | }
15 | return value;
16 | }
17 |
18 | function getRandom(max) {
19 | return Math.floor(Math.random() * max);
20 | }
21 |
22 | function initBG() {
23 | const particlesSmall = generateParticles(1000);
24 | const particlesMedium = generateParticles(7500);
25 | const particlesLarge = generateParticles(250);
26 | const particles1 = document.getElementById('particles1');
27 | const particles2 = document.getElementById('particles2');
28 | const particles3 = document.getElementById('particles3');
29 |
30 | if (particles1) {
31 | particles1.style.cssText = `
32 | width: 1px;
33 | height: 1px;
34 | border-radius: 50%;
35 | box-shadow: ${particlesSmall};
36 | animation: animStar 50s linear infinite;
37 | `;
38 | }
39 |
40 | if (particles2) {
41 | particles2.style.cssText = `
42 | width: 1.5px;
43 | height: 1.5px;
44 | border-radius: 50%;
45 | box-shadow: ${particlesMedium};
46 | animation: animateParticle 100s linear infinite;
47 | `;
48 | }
49 |
50 | if (particles3) {
51 | particles3.style.cssText = `
52 | width: 2px;
53 | height: 2px;
54 | border-radius: 50%;
55 | box-shadow: ${particlesLarge};
56 | animation: animateParticle 150s linear infinite;
57 | `;
58 | }
59 |
60 | const starsSmall = generateStars(1000);
61 | const starsMedium = generateStars(500);
62 | const starsLarge = generateStars(250);
63 | const stars1 = document.getElementById('stars1');
64 | const stars2 = document.getElementById('stars2');
65 | const stars3 = document.getElementById('stars3');
66 |
67 | if (stars1) {
68 | stars1.style.cssText = `
69 | width: 1px;
70 | height: 1px;
71 | border-radius: 50%;
72 | box-shadow: ${starsSmall};
73 | `;
74 | }
75 |
76 | if (stars2) {
77 | stars2.style.cssText = `
78 | width: 1.5px;
79 | height: 1.5px;
80 | border-radius: 50%;
81 | box-shadow: ${starsMedium};
82 | `;
83 | }
84 |
85 | if (stars3) {
86 | stars3.style.cssText = `
87 | width: 2px;
88 | height: 2px;
89 | border-radius: 50%;
90 | box-shadow: ${starsLarge};
91 | `;
92 | }
93 | }
94 |
95 | document.addEventListener('astro:after-swap', initBG);
96 | initBG();
97 |
--------------------------------------------------------------------------------
/src/components/BaseHead.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { ViewTransitions } from "astro:transitions"
3 |
4 | interface Props {
5 | title: string
6 | description: string
7 | image?: string
8 | }
9 |
10 | const canonicalURL = new URL(Astro.url.pathname, Astro.site)
11 |
12 | const { title, description, image = "/open-graph.jpg" } = Astro.props
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
14 | {pill &&
15 |
23 |
16 | {entry.collection === "blog" ? "post" : "project"}
17 |
18 | }
19 |
20 | {formatDate(entry.data.date)}
21 |
22 |
24 | {entry.data.title}
25 |
26 |
27 |
28 | {entry.data.summary}
29 |
30 | -
31 | {entry.data.tags.map((tag:string) => ( // this line has an error; Parameter 'tag' implicitly has an 'any' type.ts(7006)
32 |
- 33 | {tag} 34 | 35 | ))} 36 |
36 |
71 | )
72 | }
73 |
--------------------------------------------------------------------------------
/src/components/Projects.tsx:
--------------------------------------------------------------------------------
1 | import type { CollectionEntry } from "astro:content"
2 | import { createEffect, createSignal, For } from "solid-js"
3 | import ArrowCard from "@components/ArrowCard"
4 | import { cn } from "@lib/utils"
5 |
6 | type Props = {
7 | tags: string[]
8 | data: CollectionEntry<"projects">[]
9 | }
10 |
11 | export default function Projects({ data, tags }: Props) {
12 | const [filter, setFilter] = createSignal(new Set
37 |
56 |
38 |
55 | Filter
39 | -
40 |
- 43 | 50 | 51 | )} 52 |
57 |
70 |
58 |
69 |
59 | SHOWING {posts().length} OF {data.length} POSTS
60 |
61 | -
62 | {posts().map((post) => (
63 |
-
64 |
65 |
66 | ))}
67 |
36 |
71 | )
72 | }
73 |
--------------------------------------------------------------------------------
/src/layouts/ArticleBottomLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { type CollectionEntry, getCollection } from "astro:content"
3 |
4 | type Props = {
5 | entry: CollectionEntry<"blog"> | CollectionEntry<"projects">
6 | }
7 |
8 | // Get the requested entry
9 | const { entry } = Astro.props
10 | const { collection } = entry
11 | const { Content } = await entry.render()
12 |
13 | // Get the next and prev entries (modulo to wrap index)
14 | const items = (await getCollection(collection))
15 | .filter(post => !post.data.draft)
16 | .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
17 | const index = items.findIndex(x => x.slug === entry.slug)
18 | const prev = items[(index - 1 + items.length) % items.length]
19 | const next = items[(index + 1) % items.length]
20 | ---
21 |
22 |
37 |
56 |
38 |
55 | Filter
39 | -
40 |
- 43 | 50 | 51 | )} 52 |
57 |
70 |
58 |
69 |
59 | SHOWING {projects().length} OF {data.length} PROJECTS
60 |
61 | -
62 | {projects().map((project) => (
63 |
-
64 |
65 |
66 | ))}
67 |
23 |
24 |
26 |
58 |
59 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Sagar's Homepage
2 |
3 | [https://www.sarlloc.xyz/](https://www.sarlloc.xyz/)
4 |
5 |
6 | ## Project structure
7 |
8 | ```
9 | ./
10 | ├── CNAME
11 | ├── LICENSE
12 | ├── README.md
13 | ├── astro.config.mjs
14 | ├── package-lock.json
15 | ├── package.json
16 | ├── pnpm-lock.yaml
17 | ├── public
18 | │ ├── brand.svg
19 | │ ├── favicon.svg
20 | │ ├── fonts
21 | │ │ ├── atkinson-bold.woff
22 | │ │ └── atkinson-regular.woff
23 | │ ├── js
24 | │ │ ├── animate.js
25 | │ │ ├── bg.js
26 | │ │ ├── scroll.js
27 | │ │ └── theme.js
28 | │ ├── robots.txt
29 | │ ├── sagar.jpg
30 | │ ├── social.svg
31 | │ ├── stack.svg
32 | │ └── ui.svg
33 | ├── src
34 | │ ├── components
35 | │ │ ├── ArrowCard.tsx
36 | │ │ ├── BaseHead.astro
37 | │ │ ├── Blog.tsx
38 | │ │ ├── Container.astro
39 | │ │ ├── Counter.tsx
40 | │ │ ├── Drawer.astro
41 | │ │ ├── Footer.astro
42 | │ │ ├── Header.astro
43 | │ │ ├── MeteorShower.astro
44 | │ │ ├── Projects.tsx
45 | │ │ ├── Search.tsx
46 | │ │ ├── StackCard.astro
47 | │ │ └── TwinklingStars.astro
48 | │ ├── consts.ts
49 | │ ├── content
50 | │ │ ├── blog
51 | │ │ │ ├── AOT
52 | │ │ │ │ └── mikasa.md
53 | │ │ │ ├── assets
54 | │ │ │ │ ├── algoBotany.png
55 | │ │ │ │ ├── paramTwitter.png
56 | │ │ │ │ ├── redRose.png
57 | │ │ │ │ ├── squareRose.png
58 | │ │ │ │ └── wctool.png
59 | │ │ │ ├── mrVoyager.md
60 | │ │ │ ├── p5js
61 | │ │ │ │ ├── algoBotany.md
62 | │ │ │ │ ├── parametricEq.md
63 | │ │ │ │ ├── redRose.md
64 | │ │ │ │ └── squareRose.md
65 | │ │ │ ├── projects
66 | │ │ │ │ └── wctool.md
67 | │ │ │ └── westWorld.md
68 | │ │ ├── config.ts
69 | │ │ ├── legal
70 | │ │ │ ├── privacy.md
71 | │ │ │ └── terms.md
72 | │ │ ├── projects
73 | │ │ │ └── index.md
74 | │ │ └── work
75 | │ │ ├── codingBlocks.md
76 | │ │ ├── freelance1.md
77 | │ │ ├── freelance2.md
78 | │ │ ├── ieee.md
79 | │ │ └── pepcoding.md
80 | │ ├── env.d.ts
81 | │ ├── layouts
82 | │ │ ├── ArticleBottomLayout.astro
83 | │ │ ├── ArticleTopLayout.astro
84 | │ │ ├── BottomLayout.astro
85 | │ │ ├── PageLayout.astro
86 | │ │ └── TopLayout.astro
87 | │ ├── lib
88 | │ │ └── utils.ts
89 | │ ├── pages
90 | │ │ ├── blog
91 | │ │ │ ├── [...slug].astro
92 | │ │ │ └── index.astro
93 | │ │ ├── index.astro
94 | │ │ ├── legal
95 | │ │ │ └── [...slug].astro
96 | │ │ ├── projects
97 | │ │ │ ├── [...slug].astro
98 | │ │ │ └── index.astro
99 | │ │ ├── robots.txt.ts
100 | │ │ ├── rss.xml.ts
101 | │ │ ├── search
102 | │ │ │ └── index.astro
103 | │ │ └── work
104 | │ │ └── index.astro
105 | │ ├── styles
106 | │ │ └── global.css
107 | │ └── types.ts
108 | ├── tailwind.config.mjs
109 | ├── temp.txt
110 | └── tsconfig.json
111 | ```
112 |
113 | ## License
114 |
115 | MIT License.
116 |
117 | You can create your own homepage for free without notifying me by forking this project.
118 |
119 | It would be a great help to me if you fork and/or star this repo before making it your portfolio. I also push a lot of updates.
120 |
121 | Check out [LICENSE](./LICENSE) for more detail.
122 |
123 | ---
124 |
--------------------------------------------------------------------------------
/src/layouts/ArticleTopLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { CollectionEntry } from "astro:content"
3 | import { formatDate, readingTime } from "@lib/utils"
4 |
5 | type Props = {
6 | entry: CollectionEntry<"projects"> | CollectionEntry<"blog">
7 | }
8 |
9 | const { entry } = Astro.props
10 | const { collection, data, body } = entry
11 | const { title, summary, date } = data
12 |
13 | const demoUrl = collection === "projects" ? data.demoUrl : null
14 | const repoUrl = collection === "projects" ? data.repoUrl : null
15 | ---
16 |
17 |
18 |
19 |
23 |
72 |
--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | @font-face {
7 | font-family: "Atkinson";
8 | src: url("/fonts/atkinson-regular.woff") format("woff");
9 | font-weight: 400;
10 | font-style: normal;
11 | font-display: swap;
12 | }
13 |
14 | @font-face {
15 | font-family: "Atkinson";
16 | src: url("/fonts/atkinson-bold.woff") format("woff");
17 | font-weight: 700;
18 | font-style: normal;
19 | font-display: swap;
20 | }
21 | }
22 |
23 | html {
24 | overflow-y: scroll;
25 | color-scheme: light;
26 | background-color: #ECEFF4; /* Nord Snow Storm 2 */
27 | font-family: "Atkinson", sans-serif;
28 | }
29 |
30 | html.dark {
31 | color-scheme: dark;
32 | background-color: #2E3440; /* Nord Polar Night 0 */
33 | }
34 |
35 | html,
36 | body {
37 | @apply h-full w-full antialiased;
38 | @apply bg-[#ECEFF4] dark:bg-[#2E3440]; /* Nord Snow Storm 2 and Polar Night 0 */
39 | @apply text-[#3B4252]/75 dark:text-[#D8DEE9]/75; /* Nord Polar Night 1 and Snow Storm 0 */
40 | }
41 |
42 | body {
43 | @apply relative flex flex-col;
44 | }
45 |
46 | main {
47 | @apply flex flex-col flex-1 bg-[#ECEFF4] dark:bg-[#2E3440]; /* Nord Snow Storm 2 and Polar Night 0 */
48 | }
49 |
50 | header {
51 | @apply border-b;
52 | @apply transition-all duration-300 ease-in-out;
53 | }
54 |
55 | header:not(.scrolled) {
56 | @apply bg-transparent border-transparent;
57 | }
58 |
59 | header.scrolled {
60 | @apply bg-[#E5E9F0]/75 dark:bg-[#3B4252]/50; /* Nord Snow Storm 1 and Polar Night 1 */
61 | @apply border-[#4C566A]/10 dark:border-[#4C566A]/25; /* Nord Polar Night 3 */
62 | @apply backdrop-blur-sm saturate-200;
63 | }
64 |
65 | article {
66 | @apply prose dark:prose-invert max-w-full pb-12;
67 | }
68 |
69 | .page-heading {
70 | @apply font-semibold text-[#3B4252] dark:text-[#D8DEE9]; /* Nord Polar Night 1 and Snow Storm 0 */
71 | }
72 |
73 | .blend {
74 | @apply transition-all duration-300 ease-in-out;
75 | }
76 |
77 | /** Light theme particles on home page */
78 | @keyframes animateParticle {
79 | from {
80 | transform: translateY(0px);
81 | }
82 | to {
83 | transform: translateY(-2000px);
84 | }
85 | }
86 |
87 | /** styles for public /animation.js */
88 | .animate {
89 | opacity: 0;
90 | transform: translateY(50px);
91 | transition: opacity 1s ease, transform 1s ease;
92 | }
93 |
94 | .animate.show {
95 | opacity: 1;
96 | transform: translateY(0);
97 | }
98 |
99 | article img {
100 | padding-top: 20px;
101 | padding-bottom: 20px;
102 | display: block;
103 | margin: 0 auto;
104 | }
105 |
106 | /**
107 | * TWINKLE STARS
108 | */
109 |
110 | #twinkle-star.template {
111 | @apply absolute -left-full; /* hide offscreen */
112 | }
113 |
114 | #twinkle-star.twinkle {
115 | @apply animate-twinkle; /* defined in tailwind.config */
116 | }
117 |
118 |
119 | /**
120 | * Meteors
121 | */
122 |
123 | #meteors .shower {
124 | @apply absolute inset-0 top-0;
125 | @apply left-1/2 -translate-x-1/2;
126 | @apply w-screen aspect-square;
127 | }
128 |
129 | #meteors .meteor {
130 | @apply animate-meteor; /* defined in tailwind.config */
131 | @apply absolute top-1/2 left-1/2 w-px h-[75vh];
132 | @apply bg-gradient-to-b from-white to-transparent;
133 | }
134 |
135 | #meteors .shower.ur {
136 | @apply rotate-45;
137 | }
138 |
139 | #meteors .shower.dr {
140 | @apply rotate-135;
141 | }
142 |
143 | #meteors .shower.dl {
144 | @apply rotate-225;
145 | }
146 |
147 | #meteors .shower.ul {
148 | @apply rotate-315;
149 | }
150 |
--------------------------------------------------------------------------------
/public/stack.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Footer.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { SITE, SOCIALS } from "@consts"
3 | import Container from "@components/Container.astro"
4 | ---
5 |
6 |
79 |
80 |
97 |
--------------------------------------------------------------------------------
/src/content/blog/p5js/squareRose.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Squre Rose: How Basic Math Creates Beautiful Art, Part - 2"
3 | summary: "Created another red rose using basic math concepts like trigonometry, angle rotation, and perlin noise."
4 | date: "Jul 6 2024"
5 | draft: false
6 | tags:
7 | - Math
8 | - Art
9 | - Beginners
10 | - JavaScript
11 | ---
12 |
13 | Hey everyone! 🌟
14 |
15 | Today we're diving into a cool little sketch that creates some funky, ever-growing rotating lines.
16 |
17 | 
18 |
19 | To see the animation working in real-time, follow [this link](https://editor.p5js.org/zoyron/full/GCeqPPGad)
20 | >This blog is aimed at beginners with limited knowledge of JavaScript.
21 |
22 | ## Let's code
23 |
24 | First off, we're using p5.js here, which is a super fun JavaScript library for creative coding. Instead of writing p5js code locally, I prefer their online editor which you can also use use here. Make sure you're writing code in that editor only.
25 |
26 | Let's start with the setup() function:
27 | ```javascript
28 | function setup() {
29 | createCanvas(windowWidth, windowHeight);
30 | background("#f7c5cc");
31 | }
32 | ```
33 | This function runs once when you start the sketch. It's like setting the stage for our performance. We're creating a canvas that fills the whole window and painting the background a cute peachy color (#f7c5cc).
34 |
35 | Now, let's look at these two lines outside of any function:
36 | ```javascript
37 | let xoff = 0;
38 | let len = 0;
39 | ```
40 | These are our global variables. xoff will help us create some random movement, and len will control the size of our lines.
41 |
42 | The real magic happens in the draw() function. This function runs over and over again, creating animation.
43 | ```javascript
44 | function draw() {
45 | translate(width/2, height/2);
46 | stroke(204, 49, 61, 50);
47 | noFill();
48 | ```
49 | We start by moving our drawing point to the center of the canvas (that's what translate() does). Then we set the color of our lines to a semi-transparent red and tell p5 we don't want to fill in any shapes.
50 | We start by moving our drawing point to the center of the canvas (that's what translate() does). Then we set the color of our lines to a semi-transparent red and tell p5 we don't want to fill in any shapes.
51 |
52 | Now for the cool part:
53 | ```javascript
54 | rotate(radians(noise(xoff)*360));
55 | ```
56 | This line rotates our entire drawing. We're using p5's noise() function, which gives us smooth random numbers, to create a rotation angle. As xoff changes, our rotation will change smoothly.
57 |
58 | Next, we draw our lines:
59 | ```javascript
60 | line(-10-len/2,-5-len/2,-10-len/2,5+len/2);
61 | line(10+len/2,-5-len/2,10+len/2,5+len/2);
62 | line(-5-len/2,10+len/2,5+len/2,10+len/2);
63 | line(-5-len/2,-10-len/2,5+len/2,-10-len/2);
64 | ```
65 | Each line() function draws a straight line. We're drawing four lines here, positioned to form a kind of square shape. The len variable is used in all these calculations, which means our shape will grow over time.
66 |
67 | Finally, we update our variables:
68 | ```javascript
69 | xoff+=0.005;
70 | len=len+0.275;
71 | ```
72 | We increase xoff by a tiny amount each frame, which will slowly change our rotation. We also increase len, which makes our lines grow longer over time.
73 |
74 | ---
75 |
76 | ## Complete Code
77 |
78 | If you’re having difficulties collecting the bits of code from the blog, here’s the entire code for the animation.
79 |
80 | Just copy paste the following code into this editor and you’re good to go.
81 | ```javascript
82 | function setup() {
83 | createCanvas(windowWidth, windowHeight);
84 | background("#f7c5cc");
85 | }
86 | let xoff = 0;
87 | let len = 0;
88 | function draw() {
89 | translate(width/2, height/2);
90 | stroke(204, 49, 61,50);
91 | noFill();
92 | rotate(radians(noise(xoff)*360));
93 | line(-10-len/2,-5-len/2,-10-len/2,5+len/2);
94 | line(10+len/2,-5-len/2,10+len/2,5+len/2);
95 | line(-5-len/2,10+len/2,5+len/2,10+len/2);
96 | line(-5-len/2,-10-len/2,5+len/2,-10-len/2);
97 | xoff+=0.005;
98 | len=len+0.275;
99 |
100 | }
101 | ```
102 | And that's it! When you run this code, you'll see a trippy, growing pattern of red lines that seems to rotate randomly. Pretty cool, huh?
103 |
104 | Remember, the key to understanding code is to experiment.Try changing some numbers and see what happens. What if you change the color? Or make the lines grow faster? The possibilities are endless!
105 |
106 | Happy coding, and don't forget to have fun! 🚀
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
--------------------------------------------------------------------------------
/src/components/Header.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { SITE, LINKS } from "@consts";
3 | import { cn } from "@lib/utils";
4 | const { pathname } = Astro.url;
5 | const subpath = pathname.match(/[^/]+/g);
6 | import Container from "@components/Container.astro";
7 | ---
8 |
9 |
24 | Back to {collection}
25 |
26 |
27 |
28 |
41 |
29 |
32 | {formatDate(date)}
33 |
34 |
35 |
38 | {readingTime(body)}
39 |
40 | 42 | {title} 43 |
44 |
45 | {summary}
46 |
47 | {(demoUrl || repoUrl) &&
48 |
49 | {demoUrl &&
50 |
51 |
54 |
55 | See Demo
56 |
57 |
58 | }
59 | {repoUrl &&
60 |
61 |
64 |
65 | See Repository
66 |
67 |
68 | }
69 |
70 | }
71 |
12 |
110 |
15 |
19 |
40 |
41 | Sagar
20 | 21 | 39 |
42 |
61 |
62 |
63 |
109 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
35 |
36 |
37 |
38 |
43 |
44 |
45 |
46 |
47 |
39 |
42 |
48 |
105 |
106 |
49 |
50 |
51 |
101 |
102 |
103 |
104 |
52 |
100 |
53 |
79 |
80 |
97 |
98 |
99 |
54 |
76 |
55 |
66 | 58 | Hello, I am Sagar 59 |
60 |63 | I like to code, play music, and make art using code. 64 |
65 |
69 | 
74 |
75 |
74 | 81 | I am a software engineer, and a generative artist. Also, I like to play chess, guitar, flute, and consume a lot of multimedia. 86 |
87 |88 | During my career, I have built products ranging from marketing 89 | and ecommerce websites to complex shaders and animations with 90 | focus on delivering fast, elegant code. 91 |
92 |93 | Now, I work as a freelance software engineer, where my duties 94 | are product/shader planning, design and development. 95 |
96 |
107 |
177 |
108 |
109 |
110 |
111 |
112 |
139 |
140 |
141 |
142 |
175 |
176 |
113 |
138 |
114 |
128 | 115 | Recent posts 116 |
117 | 121 | 124 | All posts 125 | 126 | 127 |-
129 | {
130 | posts.map((post) => (
131 |
-
132 |
133 |
134 | ))
135 | }
136 |
143 |
174 | 144 | Contact Me! 145 |
146 |147 | Reach out to me via email or on social media. 148 |
149 |
150 | {
151 | SOCIALS.map((social) => (
152 | <>
153 |
173 |
154 |
155 | {social.NAME}
156 |
157 |
158 |
159 |
164 |
165 | {social.TEXT}
166 |
167 |
168 |
169 |
170 | ))
171 | }
172 |