first!

.dockerignore

@@ -0,0 +1,2 @@
+**/node_modules
+*.env

.env.example

@@ -0,0 +1,10 @@
+SENDGRID_API_KEY='YOUR_API_KEY'
+SENDGRID_SENDER='[email protected]'
+
+MAILGUN_DOMAIN='your.domain.com'
+MAILGUN_API_KEY='YOUR_API_KEY'
+MAILGUN_SENDER='[email protected]'
+
+EMAIL_TO='[email protected]'
+
+MAIL_PROVIDER='mailgun' # mailgun | sendgrid

.gitignore

@@ -0,0 +1,133 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# SvelteKit
+.svelte-kit/

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

Dockerfile

@@ -0,0 +1,32 @@
+FROM node:21-alpine AS builder
+WORKDIR /app
+COPY package.json .
+RUN npm install
+COPY . .
+
+ARG SENDGRID_API_KEY
+ENV SENDGRID_API_KEY=$SENDGRID_API_KEY
+
+ARG SENDGRID_SENDER
+ENV SENDGRID_SENDER=$SENDGRID_SENDER
+
+ARG MAILGUN_DOMAIN
+ENV MAILGUN_DOMAIN=$MAILGUN_DOMAIN
+
+ARG MAILGUN_API_KEY
+ENV MAILGUN_API_KEY=$MAILGUN_API_KEY
+
+ARG MAILGUN_SENDER
+ENV MAILGUN_SENDER=$MAILGUN_SENDER
+
+RUN npm run build
+RUN npm prune --production
+
+FROM node:21-alpine
+WORKDIR /app
+COPY --from=builder /app/build build/
+COPY --from=builder /app/node_modules node_modules/
+COPY package.json .
+EXPOSE 3000
+ENV NODE_ENV=production
+CMD [ "node", "build" ]

README.md

@@ -0,0 +1,69 @@
+# SvelteKit Personal Website 🔥
+
+I created this website to serve as my online resume. I wouldn't call it a portfolio, but that may come later.
+
+Demo: [https://mario.tiscareno.dev](https://mario.tiscareno.dev)
+
+WARNING: This is using Svelte 5 which is not yet production ready.
+
+## Features ✨
+
+- Responsive design, mostly using Tailwind CSS.
+- Contact form modal that can be integrated with SendGrid or Mailgun with basic configuration.
+- Hero Section.
+- About Section.
+- Skills with XP bars.
+- Work timeline with a bit of scroll interactivity and tech icons.
+- Education section CSS based diploma.
+- Basic footer with links.
+
+Everything is on one page, which works for what I need right now.
+
+## Install and Run ▶️
+
+```
+# Clone this repository
+$ git clone https://github.com/MarioTiscareno/sveltekit-personal-website
+```
+
+```
+# Go into the repository
+$ cd sveltekit-personal-website
+```
+
+```
+# Rename the file .env.example to .env.local
+
+# Linux Bash
+$ mv .env.example .env.local
+
+# Windows CMD
+$ ren .env.example .env.local
+```
+
+```
+# Install dependencies
+$ npm install
+```
+
+```
+# Start the project in development
+$ npm run dev
+```
+
+Open your browser and go to `http://localhost:5173`.
+
+## SendGrid and Mailgun contact form integration 📬
+
+You can configure SendGrid or Mailgun to receive contact form submissions in your mailbox. This can be handy if you don't want to expose your personal email.
+
+To configure just set the appropriate values in .env.local. MAIL_PROVIDER should be set to 'sendgrid' or 'mailgun', using any other value will not do anything, but you will still get a 200 back from the endpoint.
+DON'T remove any variables from the .env file, as this will break the build, instead you can leave empty what you don't need.
+
+## Acknowledgements 🙏
+
+Thanks to:
+
+- [Svelte team](https://github.com/sveltejs)
+- [Tailwind team](https://github.com/tailwindlabs)
+- [daylilyfield for svrollbar component](https://github.com/daylilyfield/svrollbar)

azure-pipelines.yml

@@ -0,0 +1,44 @@
+# Starter pipeline
+# Start with a minimal pipeline that you can customize to build and deploy your code.
+# Add steps that build, run tests, deploy, and more:
+# https://aka.ms/yaml
+
+trigger:
+  - main
+
+variables:
+  # Container registry service connection established during pipeline creation
+  dockerRegistryServiceConnection: '$(ServiceConnection)'
+  imageRepository: '$(ImageRepository)'
+  containerRegistry: '$(ContainerRegistry)'
+  dockerfilePath: '**/Dockerfile'
+  tag: '$(Build.BuildId)'
+
+pool:
+  vmImage: ubuntu-latest
+
+stages:
+  - stage: Build
+    displayName: Build and push stage
+    jobs:
+      - job: Build
+        displayName: Build
+        steps:
+          - task: Docker@2
+            displayName: Build image
+            inputs:
+              arguments: '--build-arg SENDGRID_API_KEY=$(SENDGRID_API_KEY) --build-arg SENDGRID_SENDER=$(SENDGRID_SENDER) --build-arg MAILGUN_DOMAIN=$(MAILGUN_DOMAIN) --build-arg MAILGUN_API_KEY=$(MAILGUN_API_KEY) --build-arg MAILGUN_SENDER=$(MAILGUN_SENDER) --build-arg MAIL_PROVIDER=$(MAIL_PROVIDER)'
+              command: build
+              repository: $(imageRepository)
+              dockerfile: $(dockerfilePath)
+              containerRegistry: $(dockerRegistryServiceConnection)
+              tags: |
+                $(tag)
+          - task: Docker@2
+            displayName: Push an image to container registry
+            inputs:
+              command: push
+              repository: $(imageRepository)
+              containerRegistry: $(dockerRegistryServiceConnection)
+              tags: |
+                $(tag)

eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.FlatConfig[]} */
+export default [
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];

package.json

@@ -0,0 +1,41 @@
+{
+	"name": "sveltekit-personal-website",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-node": "^5.2.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "^8.56.7",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"postcss": "^8.4.39",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-tailwindcss": "^0.6.5",
+		"svelte": "^5.0.0-next.1",
+		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.4.6",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0-alpha.20",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"@sendgrid/mail": "^8.1.3",
+		"svrollbar": "^0.12.0"
+	}
+}