nabil_oh/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Nabil Ould Hamou 2023-09-12 14:30:14 +02:00
commit 18d08f0555
29 changed files with 4128 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
.eslintignore Normal file
View 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
View 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
View 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
View 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
View 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
View file

File diff suppressed because it is too large Load diff

37
package.json Normal file
View 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
View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

8
src/app.css Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View file

@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

4
src/routes/+error.svelte Normal file
View 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
View 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
View 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
View file

@ -0,0 +1 @@
export const prerender = true;

12
src/routes/about/+page.svelte Normal file
View 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
View 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
View file

Binary file not shown.

BIN
static/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/images/console.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

18
svelte.config.js Normal file
View 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
View 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
View 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
View file

@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});