24 |
25 | ### Now, What is DevProfiles?
26 |
27 | DevProfiles is a website where developer list their profiles, showcase their skills, so it will be easier to connect with each other
28 |
29 | Now we will add your profile on the website
30 |
31 | ### Forking the repository
32 |
33 | 
34 |
35 | Visit the GitHub repository of DevProfiles and fork it
36 | Link: 
58 |
59 | ### Submit a Pull request
60 |
61 | After commiting changes, you can create a pull request
62 |
63 | 
64 |
65 | 
66 |
67 | Add a good title to the pull request, like 'data: Profile addition by <Your Name>'
68 |
69 | Now soon a maintainer will review and merge your pull request after that the changes you've made will be live on the website
70 |
71 | Congratulations, you've contributed your first code to open source!
--------------------------------------------------------------------------------
/.github/workflows/nextjs.yml:
--------------------------------------------------------------------------------
1 | # Sample workflow for building and deploying a Next.js site to GitHub Pages
2 | #
3 | # To get started with Next.js see: https://nextjs.org/docs/getting-started
4 | #
5 | name: Deploy Next.js site to Pages
6 |
7 | on:
8 | # Runs on pushes targeting the default branch
9 | push:
10 | branches: ["main"]
11 |
12 | # Allows you to run this workflow manually from the Actions tab
13 | workflow_dispatch:
14 |
15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
16 | permissions:
17 | contents: read
18 | pages: write
19 | id-token: write
20 |
21 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
22 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
23 | concurrency:
24 | group: "pages"
25 | cancel-in-progress: false
26 |
27 | jobs:
28 | # Build job
29 | build:
30 | runs-on: ubuntu-latest
31 | steps:
32 | - name: Checkout
33 | uses: actions/checkout@v4
34 | - name: Detect package manager
35 | id: detect-package-manager
36 | run: |
37 | if [ -f "${{ github.workspace }}/yarn.lock" ]; then
38 | echo "manager=yarn" >> $GITHUB_OUTPUT
39 | echo "command=install" >> $GITHUB_OUTPUT
40 | echo "runner=yarn" >> $GITHUB_OUTPUT
41 | exit 0
42 | elif [ -f "${{ github.workspace }}/package.json" ]; then
43 | echo "manager=npm" >> $GITHUB_OUTPUT
44 | echo "command=ci" >> $GITHUB_OUTPUT
45 | echo "runner=npx --no-install" >> $GITHUB_OUTPUT
46 | exit 0
47 | else
48 | echo "Unable to determine package manager"
49 | exit 1
50 | fi
51 | - name: Setup Node
52 | uses: actions/setup-node@v4
53 | with:
54 | node-version: "20"
55 | cache: ${{ steps.detect-package-manager.outputs.manager }}
56 | - name: Setup Pages
57 | uses: actions/configure-pages@v5
58 | with:
59 | # Automatically inject basePath in your Next.js configuration file and disable
60 | # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
61 | #
62 | # You may remove this line if you want to manage the configuration yourself.
63 | static_site_generator: next
64 | - name: Restore cache
65 | uses: actions/cache@v4
66 | with:
67 | path: |
68 | .next/cache
69 | # Generate a new cache whenever packages or source files change.
70 | key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
71 | # If source files changed but packages didn't, rebuild from a prior cache.
72 | restore-keys: |
73 | ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
74 | - name: Install dependencies
75 | run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
76 | - name: Build with Next.js
77 | env:
78 | GOOGLE_ANALYTICS: ${{ secrets.GOOGLE_ANALYTICS }}
79 | run: ${{ steps.detect-package-manager.outputs.runner }} next build
80 | - name: Upload artifact
81 | uses: actions/upload-pages-artifact@v3
82 | with:
83 | path: ./out
84 |
85 | # Deployment job
86 | deploy:
87 | environment:
88 | name: github-pages
89 | url: ${{ steps.deployment.outputs.page_url }}
90 | runs-on: ubuntu-latest
91 | needs: build
92 | steps:
93 | - name: Deploy to GitHub Pages
94 | id: deployment
95 | uses: actions/deploy-pages@v4
96 |
--------------------------------------------------------------------------------
/public/oneko.js:
--------------------------------------------------------------------------------
1 | (function oneko() {
2 | const nekoEl = document.createElement("div");
3 | let nekoPosX = 32;
4 | let nekoPosY = 32;
5 | let mousePosX = 0;
6 | let mousePosY = 0;
7 | let frameCount = 0;
8 | let idleTime = 0;
9 | let idleAnimation = null;
10 | let idleAnimationFrame = 0;
11 | const nekoSpeed = 10;
12 | const spriteSets = {
13 | idle: [[-3, -3]],
14 | alert: [[-7, -3]],
15 | scratch: [
16 | [-5, 0],
17 | [-6, 0],
18 | [-7, 0],
19 | ],
20 | tired: [[-3, -2]],
21 | sleeping: [
22 | [-2, 0],
23 | [-2, -1],
24 | ],
25 | N: [
26 | [-1, -2],
27 | [-1, -3],
28 | ],
29 | NE: [
30 | [0, -2],
31 | [0, -3],
32 | ],
33 | E: [
34 | [-3, 0],
35 | [-3, -1],
36 | ],
37 | SE: [
38 | [-5, -1],
39 | [-5, -2],
40 | ],
41 | S: [
42 | [-6, -3],
43 | [-7, -2],
44 | ],
45 | SW: [
46 | [-5, -3],
47 | [-6, -1],
48 | ],
49 | W: [
50 | [-4, -2],
51 | [-4, -3],
52 | ],
53 | NW: [
54 | [-1, 0],
55 | [-1, -1],
56 | ],
57 | };
58 | function create() {
59 | nekoEl.id = "oneko";
60 | nekoEl.style.width = "32px";
61 | nekoEl.style.height = "32px";
62 | nekoEl.style.position = "fixed";
63 | nekoEl.style.backgroundImage = "url('./oneko.gif')";
64 | nekoEl.style.imageRendering = "pixelated";
65 | nekoEl.style.left = "16px";
66 | nekoEl.style.top = "16px";
67 |
68 | document.body.appendChild(nekoEl);
69 |
70 | document.onmousemove = (event) => {
71 | mousePosX = event.clientX;
72 | mousePosY = event.clientY;
73 | };
74 |
75 | window.onekoInterval = setInterval(frame, 100);
76 | }
77 |
78 | function setSprite(name, frame) {
79 | const sprite = spriteSets[name][frame % spriteSets[name].length];
80 | nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${
81 | sprite[1] * 32
82 | }px`;
83 | }
84 |
85 | function resetIdleAnimation() {
86 | idleAnimation = null;
87 | idleAnimationFrame = 0;
88 | }
89 |
90 | function idle() {
91 | idleTime += 1;
92 |
93 | // every ~ 20 seconds
94 | if (
95 | idleTime > 10 &&
96 | Math.floor(Math.random() * 200) == 0 &&
97 | idleAnimation == null
98 | ) {
99 | idleAnimation = ["sleeping", "scratch"][
100 | Math.floor(Math.random() * 2)
101 | ];
102 | }
103 |
104 | switch (idleAnimation) {
105 | case "sleeping":
106 | if (idleAnimationFrame < 8) {
107 | setSprite("tired", 0);
108 | break;
109 | }
110 | setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
111 | if (idleAnimationFrame > 192) {
112 | resetIdleAnimation();
113 | }
114 | break;
115 | case "scratch":
116 | setSprite("scratch", idleAnimationFrame);
117 | if (idleAnimationFrame > 9) {
118 | resetIdleAnimation();
119 | }
120 | break;
121 | default:
122 | setSprite("idle", 0);
123 | return;
124 | }
125 | idleAnimationFrame += 1;
126 | }
127 |
128 | function frame() {
129 | frameCount += 1;
130 | const diffX = nekoPosX - mousePosX;
131 | const diffY = nekoPosY - mousePosY;
132 | const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
133 |
134 | if (distance < nekoSpeed || distance < 48) {
135 | idle();
136 | return;
137 | }
138 |
139 | idleAnimation = null;
140 | idleAnimationFrame = 0;
141 |
142 | if (idleTime > 1) {
143 | setSprite("alert", 0);
144 | // count down after being alerted before moving
145 | idleTime = Math.min(idleTime, 7);
146 | idleTime -= 1;
147 | return;
148 | }
149 |
150 | direction = diffY / distance > 0.5 ? "N" : "";
151 | direction += diffY / distance < -0.5 ? "S" : "";
152 | direction += diffX / distance > 0.5 ? "W" : "";
153 | direction += diffX / distance < -0.5 ? "E" : "";
154 | setSprite(direction, frameCount);
155 |
156 | nekoPosX -= (diffX / distance) * nekoSpeed;
157 | nekoPosY -= (diffY / distance) * nekoSpeed;
158 |
159 | nekoEl.style.left = `${nekoPosX - 16}px`;
160 | nekoEl.style.top = `${nekoPosY - 16}px`;
161 | }
162 |
163 | create();
164 | })();
165 |
--------------------------------------------------------------------------------
/app/components/Blogs.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { LuCalendar, LuClock, LuTag } from "react-icons/lu";
3 | import fs from "fs";
4 | import path from "path";
5 |
6 | interface BlogPost {
7 | title: string;
8 | desc: string;
9 | date: string;
10 | tags: string[];
11 | slug: string;
12 | readTime?: string;
13 | }
14 |
15 | function parseFrontmatter(content: string) {
16 | const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
17 | if (!frontmatterMatch) {
18 | return null;
19 | }
20 |
21 | const [, frontmatterText, postContent] = frontmatterMatch;
22 |
23 | const frontmatter: any = {};
24 | frontmatterText.split("\n").forEach((line) => {
25 | const [key, ...valueParts] = line.split(":");
26 | if (key && valueParts.length > 0) {
27 | const value = valueParts.join(":").trim();
28 | if (key.trim() === "tags") {
29 | try {
30 | frontmatter[key.trim()] = JSON.parse(value);
31 | } catch {
32 | frontmatter[key.trim()] = [];
33 | }
34 | } else {
35 | frontmatter[key.trim()] = value.replace(/^["']|["']$/g, "");
36 | }
37 | }
38 | });
39 |
40 | return { frontmatter, content: postContent };
41 | }
42 |
43 | function estimateReadTime(content: string): string {
44 | const wordsPerMinute = 200;
45 | const words = content.split(/\s+/).length;
46 | const minutes = Math.ceil(words / wordsPerMinute);
47 | return `${minutes} min read`;
48 | }
49 |
50 | function getTopBlogPosts(): BlogPost[] {
51 | try {
52 | const postsDirectory = path.join(process.cwd(), "posts");
53 |
54 | if (!fs.existsSync(postsDirectory)) {
55 | return [];
56 | }
57 |
58 | const filenames = fs.readdirSync(postsDirectory);
59 | const posts: BlogPost[] = [];
60 |
61 | for (const filename of filenames) {
62 | if (filename.endsWith(".mdx")) {
63 | const filePath = path.join(postsDirectory, filename);
64 | const fileContent = fs.readFileSync(filePath, "utf8");
65 |
66 | const parsed = parseFrontmatter(fileContent);
67 | if (parsed) {
68 | const slug = filename.replace(".mdx", "");
69 | posts.push({
70 | title: parsed.frontmatter.title || "Untitled",
71 | desc: parsed.frontmatter.desc || "",
72 | date: parsed.frontmatter.date || "",
73 | tags: parsed.frontmatter.tags || [],
74 | slug: slug,
75 | readTime: estimateReadTime(parsed.content),
76 | });
77 | }
78 | }
79 | }
80 |
81 | return posts
82 | .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
83 | .slice(0, 2);
84 | } catch (error) {
85 | console.error("Error reading blog posts:", error);
86 | return [];
87 | }
88 | }
89 |
90 | export default function Blogs() {
91 | const blogPosts = getTopBlogPosts();
92 |
93 | return (
94 | {post.title}
250 |{post.desc}
251 | 252 |
253 |
278 |
254 |
264 |
265 | {post.tags && post.tags.length > 0 && (
266 |
255 |
258 |
259 |
260 |
263 |
267 |
276 | )}
277 |
269 | {post.tags.map((tag) => (
270 |
271 | {tag}
272 |
273 | ))}
274 |
275 |