My personal website written with SvelteKit
Home Page: https://harambasic.de
I'm a German based in Copenhagen (Denmark). Currently, I am studying MSc Technology Entrepreneurship @ DTU. Previously, I worked as Mobile UX Technology Consultant @ SAP (CV / LinkedIn). Also feel free to take a look at some of my previous projects. If you want to chat, just start a conversation about handball, woodworking, or cooking.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
npm run socialMedia:manual -- --title="Book a meeting"
The second space in the file name should also be an underscore.
Add an easter egg for clicking on the footer logo
Spaces between the tags are missing:
Double name for preview:
Seems to work for sorting, but not for tags.
Might be related that stuff got moved into on mount to be able to do static rendering, but it seems like reactivity got lost.
Can I maybe register a listener to URL changes in the onmount?
@nuxtjs/sitemap
other meta data
import type { PageServerLoad } from './$types'
export const load = (async () => {
//TODO other meta data
return {
title: 'Imprint'
}
}) satisfies PageServerLoad4cb71322398cb10120323fe7cd585f1982bf6e53
Only on posts and lists the title is displayed as they are set manually. All other pages just show Luka Harambasic instead of Page title - Luka Harambasic.
The problem:
head() {
return {
-> title: this.meta.title, <- this.meta doesn't has a title attribute
meta: [...this.meta],
}
},
Sort projects by different criteria:
Add an attribute to display the project status, e.g.: in progress, completed, failed, concept
fix any
let latestParent: TocNode | null
const markdownHeadingCopy = JSON.parse(JSON.stringify(markdownHeading))
if (markdownHeadingCopy.length <= 1) return markdownHeadingCopy
// TODO fix any
const entryDepth: number[] = markdownHeading.reduce((acc: number, item: any) => {
return item.depth < acc ? item.depth : acc
}, Number.POSITIVE_INFINITY)
// TODO fix any
return markdownHeadingCopy.reduce((result: any, entry: any) => {
if (latestEntry && !latestEntry.children) {
latestEntry.children = []
}04768ef4a7183eec07109eaac495f3afe6020024
Also the the mouse leaving animation looks weird.
other meta data
import type { PageServerLoad } from './$types'
export const prerender = true
export const load = (async ({ parent, params }) => {
//TODO other meta data
// TODO
// console.log('args', args);
const { posts } = await parent()
const [entries] = posts
const entry = entries.find((post) => post.slug === params.slug)
return {
title: entry?.title,
published: entry?.published,
relativeLink: entry?.relativePath,
entry
}
}) satisfies PageServerLoad783fda5ca01b651f4f2595728f2f4689d7192088
check if I wanna use it:
harambasic.de/svelte.config.js
Line 8 in d97348b
import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
// TODO check if I wanna use it:
preprocess: [vitePreprocess({ postcss: true })],
kit: {
adapter: adapter(),
prerender: {
handleHttpError: ({ path, status, message }) => {
console.log(status, path, message)
if (status === 404) {
return
}
// otherwise fail the build
throw new Error(message)
}
}
}
}9e24b495c5d513cf61ed03f426c81880f300fbfa
people should ask for more details if they need or I'll write a blog post
go over dates, maybe adjsut table and also generate dates in same format as others
import { join } from 'path'
import * as fs from 'fs/promises'
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
'https://xqlghnitokncvzvxoiyq.supabase.co',
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhxbGdobml0b2tuY3Z6dnhvaXlxIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTY4MzQyMzYwNSwiZXhwIjoxOTk4OTk5NjA1fQ.QzoaOpgNPQF32zJl5c-Olx6ZEhw03M5mkbAA_zkBrT8'
)
const { data: shareables, error } = await supabase.from('record').select('*').eq('releasable', true)
const saveTo = join('..', '..', 'src', 'content', 'shareable')
shareables.forEach(shareable => {
// TODO check if file already exists and if so skip
// TODO go over dates, maybe adjsut table and also generate dates in same format as others
const { title, description, comment, category, url, updated, created_at } = shareable
const content =
`---
title: "${title}"
description: "${description}"
tags:
- ${category}
url: ${url}
comment: "${comment}"
updated: ${created_at}
published: ${created_at}
---
`
fs.writeFile(join(saveTo, `${getSlug(title)}.md`), content, 'utf8')
})
function getSlug(str) {
if (!str) return ''
const slug = str
.trim()
.toLowerCase()
// remove all chars which aren't characters, numbers or spaces
.replace(/[^a-zA-Z0-9\s]+/g, '')
// replace all spaces with dashes
.replace(/\s+/g, '-')
return slug
}12e1151f8ae9d3657855f2dc604c78740aa599ae
other meta data
import type { PageServerLoad } from './$types'
export const load = (async () => {
//TODO other meta data
return {
title: 'Data Privacy'
}
}) satisfies PageServerLoade3f01c935ddef2ef28b0dc6f01abc79c259def87
As I'm not the best writer I need every help I can get. So let people directly open a PR which fixes. This is quite easy by using the following URL:
https://github.com/LukaHarambasic/harambasic.de/edit/main/content/posts/my-perfect-homeoffice-conference-call-and-podcasting-setup.md
dynamic
https://github.com/LukaHarambasic/harambasic.de/edit/main/content/posts/<<SLUG>>.md
fix any
let latestParent: TocNode | null
const markdownHeadingCopy = JSON.parse(JSON.stringify(markdownHeading))
if (markdownHeadingCopy.length <= 1) return markdownHeadingCopy
// TODO fix any
const entryDepth: number[] = markdownHeading.reduce((acc: number, item: any) => {
return item.depth < acc ? item.depth : acc
}, Number.POSITIVE_INFINITY)
// TODO fix any
return markdownHeadingCopy.reduce((result: any, entry: any) => {
if (latestEntry && !latestEntry.children) {
latestEntry.children = []
}04768ef4a7183eec07109eaac495f3afe6020024
Use https://github.com/LukaHarambasic/YAML2CV as foundation
check if file already exists and if so skip
import { join } from 'path'
import * as fs from 'fs/promises'
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
'https://xqlghnitokncvzvxoiyq.supabase.co',
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhxbGdobml0b2tuY3Z6dnhvaXlxIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTY4MzQyMzYwNSwiZXhwIjoxOTk4OTk5NjA1fQ.QzoaOpgNPQF32zJl5c-Olx6ZEhw03M5mkbAA_zkBrT8'
)
const { data: shareables, error } = await supabase.from('record').select('*').eq('releasable', true)
const saveTo = join('..', '..', 'src', 'content', 'shareable')
shareables.forEach(shareable => {
// TODO check if file already exists and if so skip
// TODO go over dates, maybe adjsut table and also generate dates in same format as others
const { title, description, comment, category, url, updated, created_at } = shareable
const content =
`---
title: "${title}"
description: "${description}"
tags:
- ${category}
url: ${url}
comment: "${comment}"
updated: ${created_at}
published: ${created_at}
---
`
fs.writeFile(join(saveTo, `${getSlug(title)}.md`), content, 'utf8')
})
function getSlug(str) {
if (!str) return ''
const slug = str
.trim()
.toLowerCase()
// remove all chars which aren't characters, numbers or spaces
.replace(/[^a-zA-Z0-9\s]+/g, '')
// replace all spaces with dashes
.replace(/\s+/g, '-')
return slug
}dc3eb98d263a6363b927bd30a44524a019158574
check if I wanna use it:
harambasic.de/svelte.config.js
Line 8 in 74e02c9
import adapter from '@sveltejs/adapter-vercel'
import { vitePreprocess } from '@sveltejs/kit/vite'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
// TODO check if I wanna use it:
preprocess: [vitePreprocess({ postcss: true })],
kit: {5e36ac8c39029bfe3f70f6bdc888d253703d1094
What are webmentions?
https://alistapart.com/article/webmentions-enabling-better-communication-on-the-internet/
https://indieweb.org/Webmention
Parse results from: https://webmention.io/api/mentions.atom?token=KOUfYuQ_u0nEl5AbcgX6Tw
Send webmentions via: https://telegraph.p3k.io
other meta data
import type { PageServerLoad } from './$types'
export const load = (async () => {
//TODO other meta data
return {
title: 'Stacks',
}
}) satisfies PageServerLoadba05ce6e068f5aeac473255adb25723ef8858217
display title and date (creation date)
Awesome title ....... 12.09.2020
head() {
const { content } = this.meta.find((item) => item.hid === 'og:title') // ==> WHY??? please make .title directly accessible
return {
title: content,
meta: [...this.meta],
}
},
computed: {
meta() {
const metaData = {
title: `Services`, // service - needs to be here manually
description:
'Hire me for your next project in one of the following areas: Agile Project Management, New Work Consulting, Technical Partnership.',
url: `/services`, // service - could be retrieved from router
img: `/social/services.png`, // service - could be retrieved from router + .png
imgAlt: `Services - ${this.globals.title}`, // this is generated with getSiteMeta and doesn't uses title
}
return getSiteMeta(metaData)
},
},
A lot of this should be combined and rewritten, most of this should happen in a helper to have as little as possible boilerplate code in the pages.
Adding a carousel view to projects to click through.
E.g. add the icons for twitter, github, linkedin & email to the footer.
Could make sense to add them in the center.
to avoid jumping
The sitemap contained the following path, which isn't valid:
Google search console failed:
/home has to excluded, potentially a bug in https://github.com/nuxt/content as no page called home exists and all paths are required by:
await $content({ deep: true }).only(['path']).fetch()before continuing check the following implementation by Brian lovin
He solves it in a smarter way, which doesn't require to sotre the image
import { join } from 'path'
import * as fs from 'fs/promises'
// TODO before continuing check the following implementation by Brian lovin
// He solves it in a smarter way, which doesn't require to sotre the image
// https://github.com/brianlovin/briOS/blob/e337307c1a91d5099565955ce9d79b2de30f1fce/src/graphql/resolvers/mutations/bookmarks/getBookmarkMetaData.ts#L28
async function directoryExists(path) {
try {
const stat = await fs.stat(path);5aa96a896b50460b925f16a93c907ba1546facd2
Google
Escosia
DuckDuckGo
Bing
On some pages there are <sections> directly nested in , this should be a class="wrapper" which then contains the <sections>.
Main focus of this website is still around tech, put I sometimes want to share non tech stuff, e.g.
When this get's fixed and all image need to be regenerated which could also be used to use a new more colorful template. Maybe a background in the primary color with a white font?
Should be taken after #64
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
