initial commit
This commit is contained in:
commit
18d08f0555
29 changed files with 4128 additions and 0 deletions
13
.eslintignore
Normal file
13
.eslintignore
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/build
|
||||||
|
/.svelte-kit
|
||||||
|
/package
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# Ignore files for PNPM, NPM and YARN
|
||||||
|
pnpm-lock.yaml
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
30
.eslintrc.cjs
Normal file
30
.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'plugin:svelte/recommended',
|
||||||
|
'prettier'
|
||||||
|
],
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
plugins: ['@typescript-eslint'],
|
||||||
|
parserOptions: {
|
||||||
|
sourceType: 'module',
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
extraFileExtensions: ['.svelte']
|
||||||
|
},
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
es2017: true,
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['*.svelte'],
|
||||||
|
parser: 'svelte-eslint-parser',
|
||||||
|
parserOptions: {
|
||||||
|
parser: '@typescript-eslint/parser'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
13
.gitignore
vendored
Normal file
13
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/build
|
||||||
|
/.svelte-kit
|
||||||
|
/package
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
vite.config.js.timestamp-*
|
||||||
|
vite.config.ts.timestamp-*
|
||||||
|
|
||||||
|
.prettierignore
|
||||||
|
.npmrc
|
||||||
9
.prettierrc
Normal file
9
.prettierrc
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"useTabs": true,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"printWidth": 100,
|
||||||
|
"plugins": ["prettier-plugin-svelte"],
|
||||||
|
"pluginSearchDirs": ["."],
|
||||||
|
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||||
|
}
|
||||||
21
README.md
Normal file
21
README.md
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<p align="center">
|
||||||
|
<img src="static/images/console.png" alt="Logo" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
# Nabil Ould Hamou - Portfolio
|
||||||
|
To visit my website [click here](https://nabilouldhamou.github.io) !
|
||||||
|
|
||||||
|
I made this website as I needed to update my old site that was made in vanilla HTML/CSS/JavaScript and I also used this occasion to use [SvelteKit](https://kit.svelte.dev/) and learn how to use it.
|
||||||
|
|
||||||
|
|
||||||
|
## Running locally
|
||||||
|
|
||||||
|
Start by cloning this repo:
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/nabilouldhamou/portfolio
|
||||||
|
```
|
||||||
|
and use this command to run the website locally in dev mode
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
3777
package-lock.json
generated
Normal file
3777
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
37
package.json
Normal file
37
package.json
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
{
|
||||||
|
"name": "portfolio",
|
||||||
|
"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 --plugin-search-dir . --check . && eslint .",
|
||||||
|
"format": "prettier --plugin-search-dir . --write ."
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@sveltejs/adapter-auto": "^2.0.0",
|
||||||
|
"@sveltejs/kit": "^1.20.4",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||||
|
"@typescript-eslint/parser": "^5.45.0",
|
||||||
|
"autoprefixer": "^10.4.15",
|
||||||
|
"eslint": "^8.28.0",
|
||||||
|
"eslint-config-prettier": "^8.5.0",
|
||||||
|
"eslint-plugin-svelte": "^2.30.0",
|
||||||
|
"postcss": "^8.4.29",
|
||||||
|
"prettier": "^2.8.0",
|
||||||
|
"prettier-plugin-svelte": "^2.10.1",
|
||||||
|
"svelte": "^4.0.5",
|
||||||
|
"svelte-check": "^3.4.3",
|
||||||
|
"tailwindcss": "^3.3.3",
|
||||||
|
"tslib": "^2.4.1",
|
||||||
|
"typescript": "^5.0.0",
|
||||||
|
"vite": "^4.4.2"
|
||||||
|
},
|
||||||
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"svelte-icons": "^2.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
8
src/app.css
Normal file
8
src/app.css
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
height: calc(100vh - theme('spacing.14'));
|
||||||
|
}
|
||||||
12
src/app.d.ts
vendored
Normal file
12
src/app.d.ts
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
// See https://kit.svelte.dev/docs/types#app
|
||||||
|
// for information about these interfaces
|
||||||
|
declare global {
|
||||||
|
namespace App {
|
||||||
|
// interface Error {}
|
||||||
|
// interface Locals {}
|
||||||
|
// interface PageData {}
|
||||||
|
// interface Platform {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {};
|
||||||
13
src/app.html
Normal file
13
src/app.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Nabil Ould Hamou</title>
|
||||||
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
%sveltekit.head%
|
||||||
|
</head>
|
||||||
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
10
src/lib/Projects.ts
Normal file
10
src/lib/Projects.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
const projects = [
|
||||||
|
{
|
||||||
|
"name": "Portfolio",
|
||||||
|
"stack": ["SvelteKit", "TypeScript", "TailwindCSS"],
|
||||||
|
"description": "SvelteKit project to learn svelte and also update my personal website.",
|
||||||
|
"url": "https://github.com/nabilouldhamou/portfolio"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default projects;
|
||||||
16
src/lib/Routes.ts
Normal file
16
src/lib/Routes.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
href: '/',
|
||||||
|
name: 'Home',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '/about',
|
||||||
|
name: 'About',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '/projects',
|
||||||
|
name: 'Projects',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default routes;
|
||||||
15
src/lib/components/Navbar.svelte
Normal file
15
src/lib/components/Navbar.svelte
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<script>
|
||||||
|
import routes from '$lib/Routes.ts'
|
||||||
|
export let path;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class='h-14 w-full top-0 left-0 sticky flex justify-center items-center'>
|
||||||
|
<div class='pt-4 w-4/5 flex justify-between'>
|
||||||
|
<img alt="Logo" src="/images/console.png" class='w-12 h-12' />
|
||||||
|
<div class='flex items-center justify-between gap-x-8 font-medium text-lg'>
|
||||||
|
{#each routes as route}
|
||||||
|
<a class={`cursor-pointer ${path === route.href ? 'text-accent' : 'hover:text-accent'}`} href={route.href}>{route.name}</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
14
src/lib/components/Project.svelte
Normal file
14
src/lib/components/Project.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<script>
|
||||||
|
export let name;
|
||||||
|
export let stack;
|
||||||
|
export let description;
|
||||||
|
export let url;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a target='_blank' href='{url}'>
|
||||||
|
<div class='rounded-md bg-lighter-gray w-72 h-72 text-center flex flex-col items-center justify-center flex-wrap'>
|
||||||
|
<h1 class='text-blue-300 text-xl font-medium'>{name}</h1>
|
||||||
|
<h3 class='text-accent w-11/12 overflow-auto break-words'>{stack}</h3>
|
||||||
|
<p class='w-4/5'>{description}</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
// place files you want to import through the `$lib` alias in this folder.
|
||||||
4
src/routes/+error.svelte
Normal file
4
src/routes/+error.svelte
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<div class='flex flex-col items-center justify-center w-full h-full'>
|
||||||
|
<h1 class='text-lg text-accent font-bold'>404</h1>
|
||||||
|
<h3>This page does not exist.</h3>
|
||||||
|
</div>
|
||||||
20
src/routes/+layout.svelte
Normal file
20
src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<script>
|
||||||
|
import "../app.css";
|
||||||
|
import Navbar from '$lib/components/Navbar.svelte';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<Navbar path='{$page.url.pathname}' />
|
||||||
|
<section class='content-container'>
|
||||||
|
<slot />
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
:global(html) {
|
||||||
|
font-family: theme(fontFamily.fira-code);
|
||||||
|
background-color: theme(colors.dark-charcoal-gray);
|
||||||
|
color: theme(colors.white-smoke);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
18
src/routes/+page.svelte
Normal file
18
src/routes/+page.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<script>
|
||||||
|
import FaGithub from 'svelte-icons/fa/FaGithub.svelte'
|
||||||
|
import FaTwitter from 'svelte-icons/fa/FaTwitter.svelte';
|
||||||
|
import FaRegFileAlt from 'svelte-icons/fa/FaRegFileAlt.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class='flex flex-col justify-center items-center font-bold text-center h-full cursor-default'>
|
||||||
|
<div class='w-3/5'>
|
||||||
|
<h1 class='lg:text-6xl md:text-4xl'>Hi I'm Nabil 👋</h1>
|
||||||
|
<p class='lg:text-5xl md:text-3xl'>A junior <span class='text-accent'>Computer Scientist</span> 🖥️ and a <span class='text-accent'>Back-End Development</span> enthusiast 🚀 Currently based in France 🇫🇷</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='w-3/5 h-14 flex mt-20 justify-center'>
|
||||||
|
<a class='hover:text-accent cursor-pointer' href="https://github.com/nabilouldhamou" target="_blank"><FaGithub /></a>
|
||||||
|
<a class='hover:text-accent cursor-pointer' href="https://twitter.com/nbil_o" target="_blank"><FaTwitter /></a>
|
||||||
|
<a class='hover:text-accent cursor-pointer' href="/CV_ALTERNANCE.pdf"><FaRegFileAlt /></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
1
src/routes/+page.ts
Normal file
1
src/routes/+page.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export const prerender = true;
|
||||||
12
src/routes/about/+page.svelte
Normal file
12
src/routes/about/+page.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<div class='flex flex-col justify-center items-center h-full'>
|
||||||
|
<div class='text-justify w-2/5'>
|
||||||
|
<h3 class='text-accent text-6xl pb-5 font-bold'>About Me</h3>
|
||||||
|
<p class='text-xl'>Hello I am <span class='text-accent'>Nabil Ould Hamou</span>, a passionate <span class='text-accent'>computer scientist</span>
|
||||||
|
with a penchant for crafting robust back-end solutions and a keen interest in front-end development. As a computer scientist,
|
||||||
|
I've embarked on a journey through the ever-evolving landscape of computer software technology. Currently, I work as a web developer at Alltech Consulting,
|
||||||
|
where I've had the occasion of improving my skills in fullstack web development. My focus primarily revolves around back-end development,
|
||||||
|
where I architect and optimize the logic that powers the web applications we interact with daily.</p>
|
||||||
|
<h3>---</h3>
|
||||||
|
<p class='text-2xl'>Contact: ouldhamounabil@gmail.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
17
src/routes/projects/+page.svelte
Normal file
17
src/routes/projects/+page.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
import Project from '$lib/components/Project.svelte';
|
||||||
|
import projects from '$lib/Projects'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class='flex flex-col items-center'>
|
||||||
|
|
||||||
|
<h1 class='text-accent text-4xl font-bold my-10'>Projects</h1>
|
||||||
|
|
||||||
|
<div class='grid gap-4 grid-cols-3 grid-rows-2'>
|
||||||
|
{#each projects as project}
|
||||||
|
|
||||||
|
<Project name={project.name} stack={project.stack} description={project.description} url={project.url} />
|
||||||
|
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
BIN
static/CV_ALTERNANCE.pdf
Normal file
BIN
static/CV_ALTERNANCE.pdf
Normal file
Binary file not shown.
BIN
static/favicon.png
Normal file
BIN
static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
static/images/console.png
Normal file
BIN
static/images/console.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
18
svelte.config.js
Normal file
18
svelte.config.js
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import adapter from '@sveltejs/adapter-auto';
|
||||||
|
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
|
||||||
|
preprocess: vitePreprocess(),
|
||||||
|
|
||||||
|
kit: {
|
||||||
|
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||||
|
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||||
|
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||||
|
adapter: adapter()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
20
tailwind.config.js
Normal file
20
tailwind.config.js
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||||
|
purge: ["./src/**/*.svelte"],
|
||||||
|
darkMode: true,
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
'dark-charcoal-gray': '#111111',
|
||||||
|
'white-smoke': '#efefef',
|
||||||
|
'accent': '#f9f871',
|
||||||
|
'lighter-gray': '#333333',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
'fira-code': ['Fira Code', 'monospace']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: []
|
||||||
|
};
|
||||||
17
tsconfig.json
Normal file
17
tsconfig.json
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"extends": "./.svelte-kit/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"strict": true
|
||||||
|
}
|
||||||
|
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||||
|
//
|
||||||
|
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||||
|
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||||
|
}
|
||||||
6
vite.config.ts
Normal file
6
vite.config.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { sveltekit } from '@sveltejs/kit/vite';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [sveltekit()]
|
||||||
|
});
|
||||||
Loading…
Add table
Reference in a new issue