Skip to content

timges/personal-homepage

Repository files navigation

Hey there 👋🏼

This is the source-code repo of my personal website. If you haven't seen it in action, make sure to check it out at:

landing-page-screenshot

🤓 Curious whats underneath?

🤔 How was it built?

Basic Tech Stack

FrontEnd

The design was done using Figma. Based on HTML & JS I used the following frameworks / libraries

Backend

In the and the backend is just some serverless js function in a node runtime. Running in either AWS, Azure or GoogleCloud orchestrated by Vercel. This is what i used to build it:

In addition to that i also used ESLint, StyleLint, Prettier, several VS-Code Plugins for formatting and best practices.

🏗️ Infrastructure

Disclaimer

I'm only controlling the google-domains & github frames in this diagram. Beyond that I'm using vercel's sveltekit integration. What you see in the figure is only what I THINK, vercel is doing behind the scenes.

infrastrucutre-diagram

Form Security

To avoid big bills from spam attacks i decided to "secure" the contact form with a captcha, to prevent bots from doing requests. I'm using googles reCaptcha v3, as it seems quite reliable and works passively without the need of the user to pass a puzzle or something.

Cookies...

The downside of reCaptcha (and also google analytics) is that a privacy policy,cookie policy and cookie-banner become mandatory when using them. And because i don't wanna get sued i did exactly that. I did it on my own, but there are probably plenty of libraries out there which will do the job

🍴 Forking

...can I?

Sure! Go for it! I'd appreciate if you somehow mention that you got inspired by this project, tho. A cup of coffee would also help me to create more projects like this.

Buy Me A Coffee

Setup

dev

pretty straight forward tbh. Just clone the repo, run

npm i

start the dev server via

npm run dev

and thats it. There's more scripts for linting and stuff. Just check out the package.json

build

you can build the app by running

npm run build

output can be found in .svelte-kit > output. Make sure to install the correct svelte-kit adapter to match your needs. I used the auto one as vercel handles the build process anyways. Feel free to check them out (not sponsored btw, just satisfied lol)!

Final Words

This is currently the first version of this site, so you may find a few bugs or code-smells here and there. If you find anything, or have some advice for improvement feel free to drop a message :)

...and yeah. I know that tests are missing 😵‍💫