Browse Source

initial commit

master
s.savinel 6 months ago
commit
369675f82a
11 changed files with 71328 additions and 0 deletions
  1. +1
    -0
      .gitignore
  2. +3287
    -0
      package-lock.json
  3. +18
    -0
      package.json
  4. +6
    -0
      postcss.config.js
  5. BIN
      public/assets/Agile-Scrum-Logo-Flat-270x270.png
  6. BIN
      public/assets/BuJo_Logo_White_BIG_410x.png
  7. BIN
      public/assets/photo.jpg
  8. +67566
    -0
      public/assets/style.css
  9. +230
    -0
      public/index.html
  10. +213
    -0
      src/css/main.pcss
  11. +7
    -0
      tailwind.config.js

+ 1
- 0
.gitignore View File

@@ -0,0 +1 @@
/node_modules/*

+ 3287
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 18
- 0
package.json View File

@@ -0,0 +1,18 @@
{
"name": "online-resume",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "live-server public",
"build": "postcss src/css/main.pcss -o public/assets/style.css",
"watch": "postcss src/css/main.pcss -o public/assets/style.css --watch"
},
"author": "",
"license": "MIT",
"dependencies": {
"autoprefixer": "^9.7.6",
"live-server": "^1.2.1",
"postcss-cli": "^7.1.0",
"tailwindcss": "^1.2.0"
}
}

+ 6
- 0
postcss.config.js View File

@@ -0,0 +1,6 @@
module.exports = {
plugins:[
require('tailwindcss'),
require('autoprefixer'),
]
}

BIN
public/assets/Agile-Scrum-Logo-Flat-270x270.png View File

Before After
Width: 270  |  Height: 270  |  Size: 38 KiB

BIN
public/assets/BuJo_Logo_White_BIG_410x.png View File

Before After
Width: 410  |  Height: 82  |  Size: 14 KiB

BIN
public/assets/photo.jpg View File

Before After
Width: 800  |  Height: 1300  |  Size: 194 KiB

+ 67566
- 0
public/assets/style.css
File diff suppressed because it is too large
View File


+ 230
- 0
public/index.html
File diff suppressed because it is too large
View File


+ 213
- 0
src/css/main.pcss View File

@@ -0,0 +1,213 @@
@tailwind base;
@tailwind components;

body {
@apply h-screen flex bg-black text-gray-200 font-sans
}

main {
@apply max-w-screen-xl mx-auto flex-1 flex flex-col
}

menu {
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;

@apply flex-initial flex flex-row justify-around bg-gray-900
}

nav {
@apply flex flex-row justify-around
}

.nav-button {
@apply block p-6
}

.nav-button:hover {
@apply bg-gray-700 text-blue-500 cursor-pointer
}

.nav-button:active {
@apply bg-gray-900 text-blue-600 cursor-wait
}

aside {
background-image: url("./photo.jpg");
box-shadow: inset 0 0 110px rgba(0,0,0,0.9);

@apply flex bg-center bg-cover bg-no-repeat justify-center
}

.person {
@apply self-center flex flex-col p-4 text-center
}

.person h1 {
@apply text-4xl p-2 font-bold
}

.person h2 {
@apply text-xl p-2 text-blue-500 font-bold
}

.person ul {
@apply flex flex-row justify-around p-2
}

.person li:hover {
@apply text-blue-500
}

.person li:active {
@apply text-blue-600 cursor-wait
}

.content {
scroll-behavior: smooth;

@apply flex flex-col overflow-auto min-h-0 p-4 flex-grow bg-gray-900
}

.content h2 {
@apply py-4 text-5xl font-bold
}

.content h3 {
@apply py-2 text-2xl font-bold flex
}

.content h3 svg {
@apply text-blue-500 inline self-center mr-2
}

.content section {
@apply flex flex-col
}

.content p {
@apply text-gray-400 py-2 text-xl
}

.content span {
@apply text-gray-600
}

.content span em {
@apply text-xl text-blue-500 font-bold
}

.content li span {
@apply text-blue-500 text-2xl font-bold
}

.about-me {
@apply flex flex-col
}

.about-me span em {
@apply mx-4
}

.about-me span em:first-of-type {
@apply ml-0
}

.kpis ul, .tools ul {
@apply flex flex-row py-4
}

.kpis li, .tools li {
@apply flex flex-1 flex-col items-center text-center text-gray-100 text-xs font-bold
}

.tools ul {
@apply flex-wrap
}

.tools li {
@apply flex self-center m-2
}

.tools li img {
height: 64px;
max-width: inherit;
}

.tools li svg {
@apply text-blue-500
}

.content .formations-experiences {
@apply flex flex-col-reverse
}

.formations-experiences article {
@apply py-4 mx-2
}

.formations-experiences em {
@apply text-sm text-blue-500 font-bold not-italic
}

.formations-experiences span {
@apply text-sm text-gray-600
}

.formations-experiences h4 {
@apply text-xl
}

.formations-experiences ul {
@apply flex ml-4 flex-col list-disc
}

.formations-experiences li {
@apply text-gray-500 text-sm
}

.content .formations, .content .experiences {
@apply flex-1
}

.content .pin {
@apply inline-block bg-blue-500 rounded-full px-3 py-1 mx-1 my-2 text-sm font-semibold text-gray-200
}

@screen md {
body {
@apply justify-center items-center
}
main {
height: 90vh;
@apply flex-row
}

menu {
@apply my-20 flex-col
}

nav {
@apply flex-col
}

aside {
@apply flex-shrink flex flex-wrap
}

.person {
@apply self-end mb-24 ml-24 mr-24
}

.content {
@apply my-20 p-8
}

.content .formations-experiences {
@apply flex-row
}
}

@tailwind utilities;

+ 7
- 0
tailwind.config.js View File

@@ -0,0 +1,7 @@
module.exports = {
theme: {
extend: {},
},
variants: {},
plugins: [],
}

Loading…
Cancel
Save