diff --git a/config/_default/config.toml b/config/_default/config.toml index fee7285..a41181b 100644 --- a/config/_default/config.toml +++ b/config/_default/config.toml @@ -1,18 +1,12 @@ title = "Nicolas Crausaz" baseURL = "https://crausaz.click/" -copyright = "© {year} - Nicolas Crausaz" - -# Enable analytics by entering your Google Analytics tracking ID -googleAnalytics = "" - theme = "ncrausaz" sitemap = "sitemap.xml" - -# Default language to use (if you setup multilingual support) defaultContentLanguage = "fr" -hasCJKLanguage = false # Set `true` for Chinese/Japanese/Korean languages. +hasCJKLanguage = false defaultContentLanguageInSubdir = false -removePathAccents = true # Workaround for https://github.com/gohugoio/hugo/issues/5687 - [taxonomies] +[services] + [services.googleAnalytics] + ID = 'G-7GV42PYC7G' diff --git a/config/_default/languages.toml b/config/_default/languages.toml index 86ce1f1..5e5be31 100644 --- a/config/_default/languages.toml +++ b/config/_default/languages.toml @@ -1,21 +1,3 @@ # Languages -# Create a `[X]` block for each language you want, where X is the language ID. -# Refer to https://sourcethemes.com/academic/docs/language/ - -# Configure the English version of the site. [fr] languageCode = "fr" - - # contentDir = "content/en" # Uncomment for multi-lingual sites, and move English content into `en` sub-folder. - -# Uncomment the lines below to configure your website in a second language. -#[zh] -# languageCode = "zh-Hans" -# contentDir = "content/zh" -# title = "Chinese website title..." -# [zh.params] -# description = "Site description in Chinese..." -# [[zh.menu.main]] -# name = "Wo" -# url = "#about" -# weight = 1 diff --git a/config/_default/menus.toml b/config/_default/menus.toml index d231e5b..cc56c71 100644 --- a/config/_default/menus.toml +++ b/config/_default/menus.toml @@ -1,7 +1,4 @@ # Navigation Links -# To link a homepage widget, specify the URL as a hash `#` followed by the filename of the -# desired widget in your `content/home/` folder. -# The weight parameter defines the order that the links will appear in. [[main]] name = "A propos" @@ -9,7 +6,7 @@ weight = 10 [[main]] - name = "Experience" + name = "Expérience" url = "#experience" weight = 20 diff --git a/config/_default/params.toml b/config/_default/params.toml deleted file mode 100644 index 9929651..0000000 --- a/config/_default/params.toml +++ /dev/null @@ -1,115 +0,0 @@ -# # SITE SETUP -# # Documentation: https://sourcethemes.com/academic/ - -# # Color theme. -# # Choose from `default`, `ocean`, `forest`, `dark`, `apogee`, `1950s`, `coffee`, `cupcake`, `strawberry`. -# color_theme = "default" -# # Enable users to switch between day and night mode? -# day_night = true - -# # Font style. -# # Choose from `default`, `classic`, or `playfair`. -# font = "classic" - -# # Description for social sharing and search engines. If undefined, superuser role is used in place. -# description = "Nicolas Crausaz, Etudiant bachelor HEIG-VD en infomatique logicielle" - -# # Default image for social sharing and search engines. Place image in `static/img/` folder and specify image name here. -# sharing_image = "NicolasCrausaz.png" - -# # Twitter username (without @). Used when a vistor shares your site on Twitter. -# twitter = "@nicrausaz" - -# # Diplay a logo in navigation bar rather than title (optional). -# # To enable, place an image in `static/img/` and reference its filename below. To disable, set the value to "". -# logo = "" - -# # Enable global source code highlighting? true/false -# # Documentation: https://sourcethemes.com/academic/docs/writing-markdown-latex/#highlighting-options -# highlight = true -# # highlight_languages = ["r"] # Add support for highlighting additional languages -# # highlight_style = "github" # For supported styles, see https://cdnjs.com/libraries/highlight.js/ - -# # Enable global LaTeX math rendering? -# # If false, you can enable it locally on a per page basis. -# math = false - -# # Privacy pack -# # Show a cookie consent message to visitors -# # Anonymize IP in Google Analytics (if enabled) -# privacy_pack = true - -# # Date and time format (refer to https://sourcethemes.com/academic/docs/customization/#date-format ) -# # Examples: "Mon, Jan 2, 2006" or "2006-01-02" -# date_format = "Jan 2, 2006" -# # Examples: "3:04 pm" or "15:04" -# time_format = "15:04" - -# ############################ -# ## Contact Widget setup ## -# ############################ - -# # Enter contact details (optional). To hide a field, clear it to "". -# email = "mknqbjkw" - -# # Contact links -# # Set to `[]` to disable, or comment out unwanted lines with a hash `#`. -# contact_links = [ -# {icon = "github", icon_pack = "fab", name = "github", link = "https://github.com/nicrausaz"}, -# {icon = "linkedin", icon_pack = "fab", name = "linkedin", link = "https://www.linkedin.com/in/nicolas-crausaz-861876104/"}, -# {icon = "instagram", icon_pack = "fab", name = "instagram", link = "https://www.instagram.com/nicrausaz/"}, -# {icon = "envelope", icon_pack = "fas", name = "Email", link = "#contact"}, -# ] - -# ############################ -# ## Plugins ## -# ############################ - -# # Load CSS and JS plugins -# # E.g. To load `/assets/css/custom.css`, set `plugins_css = ["custom"]`. -# # E.g. To load `/assets/js/custom.js`, set `plugins_js = ["custom"]`. -# plugins_css = [] -# plugins_js = [] - -# ############################ -# ## Advanced options ## -# ############################ - -# # Get user avatars from Gravatar.com? (true/false) -# gravatar = false - -# # Align the main menu to the right of the page? (true/false) -# menu_align_right = true - -# # Show estimated reading time for posts? (true/false) -# reading_time = false - -# # Display comment count (if commenting enabled in config.toml)? (true/false) -# comment_count = false - -# # Display next/previous section pager? (true/false) -# section_pager = false -# docs_section_pager = false # Display pager in Docs layout (e.g. tutorials)? - -# # Enable in-built social sharing buttons? (true/false) -# sharing = true - -# # Configuration of publication pages. -# [publications] -# # Date format (refer to https://sourcethemes.com/academic/docs/customization/#date-format ) -# # Examples: "Mon, Jan 2, 2006" or "2006-01-02" -# date_format = "January 2006" - -# # Citation style ("apa" or "mla") -# citation_style = "apa" - -# # Configuration of project pages. -# [projects] -# # Views for associated content. -# # 1: List -# # 2: Compact -# # 3: Card -# # 4: Citation (publications only) -# post_view = 3 -# publication_view = 3 -# talk_view = 2 diff --git a/content/projects/toonks.md b/content/projects/toonks.md index edde076..9300e91 100644 --- a/content/projects/toonks.md +++ b/content/projects/toonks.md @@ -12,6 +12,7 @@ techs = ["Three.js", "React", "TypeScript"] image = "toonks.svg" github = "https://github.com/maxscharwath/toonks-game" website = "https://toonks.com/" +featured_image = "toonks-cover.png" +++ Toonks est un jeu de tank 3D multijoueur en ligne. Ce projet a été réalisé dans le cadre du cours WEB de l'HEIG-VD, sur une période de 2 mois. Le jeu se joue tous contre tous, le but est de trouver de détruire les autres joueurs. diff --git a/data/experience.toml b/data/experience.toml index 9066069..de4c86e 100644 --- a/data/experience.toml +++ b/data/experience.toml @@ -1,20 +1,20 @@ Title = "Expérience" Subtitle = "During this time, I also worked part-time on many more projects, check them out below !" -[[experience]] -id = 1 -btn_label = "Actuellement" -job_employer = "Armée suisse" -job_description = "Ecole de recrue" -job_location = "" -job_timerange = "01.2024 - 05.2024" -image = "army.png" -description = ''' -Dès le mois de janvier 2024, j'effectuerai mon école de recrue à l'armée suisse en tant que canonnier mortiers. -''' +# [[experience]] +# id = 1 +# btn_label = "Actuellement" +# job_employer = "Armée suisse" +# job_description = "Ecole de recrue" +# job_location = "" +# job_timerange = "01.2024 - 05.2024" +# image = "army.png" +# description = ''' +# Dès le mois de janvier 2024, j'effectuerai mon école de recrue à l'armée suisse en tant que canonnier mortiers. +# ''' [[experience]] -id = 2 +id = 1 btn_label = "2019 - 2023" job_employer = "HEIG-VD" job_description = "BSc in Software Engineering" diff --git a/resources/_gen/assets/css/css/styles.css_1e1efb609ccef2201abd735af5a3a936.content b/resources/_gen/assets/css/css/styles.css_1e1efb609ccef2201abd735af5a3a936.content index fe22915..6f0d83a 100644 --- a/resources/_gen/assets/css/css/styles.css_1e1efb609ccef2201abd735af5a3a936.content +++ b/resources/_gen/assets/css/css/styles.css_1e1efb609ccef2201abd735af5a3a936.content @@ -650,8 +650,8 @@ video { .h-12 { height: 3rem; } -.h-24 { - height: 6rem; +.h-20 { + height: 5rem; } .h-32 { height: 8rem; @@ -689,8 +689,8 @@ video { .w-2\/3 { width: 66.666667%; } -.w-24 { - width: 6rem; +.w-20 { + width: 5rem; } .w-4 { width: 1rem; @@ -731,6 +731,10 @@ video { --tw-translate-y: -2.5rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.-translate-y-4 { + --tw-translate-y: -1rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} .translate-x-0 { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -768,9 +772,6 @@ video { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem; } -.list-disc { - list-style-type: disc; -} .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -804,6 +805,9 @@ video { .justify-between { justify-content: space-between; } +.justify-around { + justify-content: space-around; +} .gap-2 { gap: 0.5rem; } @@ -911,6 +915,10 @@ video { --tw-bg-opacity: 1; background-color: rgb(191 219 254 / var(--tw-bg-opacity)); } +.bg-deepblue { + --tw-bg-opacity: 1; + background-color: rgb(0 21 33 / var(--tw-bg-opacity)); +} .bg-emerald-300\/10 { background-color: rgb(110 231 183 / 0.1); } @@ -934,10 +942,6 @@ video { --tw-bg-opacity: 1; background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } -.bg-red-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); -} .bg-red-200 { --tw-bg-opacity: 1; background-color: rgb(254 202 202 / var(--tw-bg-opacity)); @@ -957,6 +961,9 @@ video { .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); } +.bg-white\/30 { + background-color: rgb(255 255 255 / 0.3); +} .bg-white\/\[\.95\] { background-color: rgb(255 255 255 / .95); } @@ -980,6 +987,9 @@ video { .to-deepbluegrad { --tw-gradient-to: #001530 var(--tw-gradient-to-position); } +.fill-slate-500 { + fill: #64748b; +} .p-2 { padding: 0.5rem; } @@ -1033,10 +1043,6 @@ video { .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} .text-3xl { font-size: 1.875rem; line-height: 2.25rem; @@ -1057,6 +1063,10 @@ video { font-size: 0.875rem; line-height: 1.25rem; } +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} .text-xs { font-size: 0.75rem; line-height: 1rem; @@ -1136,6 +1146,9 @@ video { .opacity-0 { opacity: 0; } +.opacity-100 { + opacity: 1; +} .opacity-30 { opacity: 0.3; } @@ -1144,6 +1157,11 @@ video { --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} .outline { outline-style: solid; } @@ -1156,6 +1174,9 @@ video { .outline-emerald-500 { outline-color: #10b981; } +.outline-slate-500 { + outline-color: #64748b; +} .drop-shadow-\[0_0_30px_\#10b981\] { --tw-drop-shadow: drop-shadow(0 0 30px #10b981); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -1174,6 +1195,11 @@ video { -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +.backdrop-blur-md { + --tw-backdrop-blur: blur(12px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} .backdrop-blur-sm { --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -1213,6 +1239,19 @@ video { --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +@keyframes bounce { + 0%, 100% { + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + 50% { + transform: none; + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} +.hover\:animate-bounce:hover { + animation: bounce 1s infinite; +} .hover\:border:hover { border-width: 1px; } @@ -1453,6 +1492,12 @@ h2 { font-family: 'Roboto Slab', serif; } +.project-content li { + list-style-type: square; + list-style-position: inside; + margin-top: 5px; +} + .section-title { font-size: 2.25rem; line-height: 2.5rem; @@ -1537,4 +1582,4 @@ h2 { .projects-section::-webkit-scrollbar-thumb:hover { background: #10a981; -} +} \ No newline at end of file diff --git a/static/img/experience-path.svg b/static/img/experience-path.svg index 8a10a46..f532f31 100644 --- a/static/img/experience-path.svg +++ b/static/img/experience-path.svg @@ -41,19 +41,19 @@ /> + + + + + + + + + + + + + + + + + + + + + + + + - - { const menu = document.getElementById('mobile-menu') - menu.classList.toggle('hidden') - - // if (menu.classList.contains('hidden')) { - // anime({ - // targets: '#mobile-menu', - // opacity: 1, - // duration: 1000, - // easing: 'easeOutExpo', - // }) - // } else { - // anime({ - // targets: '#mobile-menu', - // opacity: 0, - // duration: 1000, - // easing: 'easeOutExpo', - // }) - // } + // TODO: better animation + if (menu.classList.contains('hidden')) { + anime({ + targets: '#mobile-menu', + duration: 1000, + begin: () => { + menu.classList.remove('hidden') + }, + }) + } else { + anime({ + targets: '#mobile-menu', + duration: 1000, + begin: () => { + menu.classList.add('hidden') + }, + }) + } +}) + +// Bouton expériences +const buttons = document.querySelectorAll('.exp-button') +const cards = document.querySelectorAll('.exp-section') + +buttons.forEach((button) => { + button.addEventListener('click', () => { + const currentButton = button + const currentCard = document.querySelector(`#sect${currentButton.dataset.id}`) + + anime({ + targets: cards, + opacity: 0, + duration: 300, + easing: 'linear', + complete: () => { + cards.forEach((card) => { + card.classList.add('hidden') + }) + + buttons.forEach((button) => { + button.classList.remove('bg-emerald-500') + }) + + currentCard.classList.remove('hidden') + currentButton.classList.add('bg-emerald-500') + + anime({ + targets: currentCard, + opacity: 1, + duration: 300, + easing: 'linear', + }) + }, + }) + }) }) // Bouton projets @@ -148,57 +177,27 @@ function myAge() { const age = document.getElementById('age') age.innerHTML = myAge() -// On page load -const svgDocument = document.getElementById('progress-exp-parent').contentDocument -var svgElement = svgDocument.getElementById('progress-line-experience') -console.log(svgElement) -if (svgElement) { - svgElement.style.fill = 'red' // Changer la couleur de remplissage en rouge -} +// Anime the experience path +const experiencePathParent = document.getElementById('progress-exp-parent') +experiencePathParent.addEventListener('load', () => { + const svgDocument = experiencePathParent.contentDocument + const svgElement = svgDocument.getElementById('progress-line-experience') + const paths = [...svgElement.querySelectorAll('path')].reverse() + + animatePaths(paths, 0) +}) // Fonction pour animer les chemins SVG progressivement -// function animatePaths(paths, index) { -// if (index < paths.length) { -// console.log(paths[index]) -// paths[index].style.stroke = '#fff' -// paths[index].style.fill = '#fff' -// paths[index].style.transition = 'stroke-dasharray 1.5s ease-in-out' -// paths[index].style.strokeDasharray = paths[index].getTotalLength() -// paths[index].style.strokeDashoffset = paths[index].getTotalLength() -// setTimeout(() => { -// paths[index].style.strokeDashoffset = '0' -// animatePaths(paths, index + 1) -// }, 500) -// } -// } - -// animatePaths(paths, 0) - -// Cursor -// const bigBall = document.querySelector('.cursor__ball--big'); -// const smallBall = document.querySelector('.cursor__ball--small'); -// const hoverables = document.querySelectorAll('.hoverable'); - -// // Listeners -// document.body.addEventListener('mousemove', onMouseMove); -// for (let i = 0; i < hoverables.length; i++) { -// hoverables[i].addEventListener('mouseenter', onMouseHover); -// hoverables[i].addEventListener('mouseleave', onMouseHoverOut); -// } - -// // Move the cursor -// function onMouseMove(e) { -// smallBall.style.left = e.pageX - 5 + 'px'; -// smallBall.style.top = e.pageY - 7 + 'px'; -// } - -// // Hover an element -// function onMouseHover() { -// smallBall.style.transition = 'transform 0.3s ease'; -// smallBall.style.transform = 'scale(4)'; -// } - -// function onMouseHoverOut() { -// smallBall.style.transition = 'transform 0.3s ease'; -// smallBall.style.transform = 'scale(1)'; -// } \ No newline at end of file +function animatePaths(paths, index) { + if (index < paths.length) { + paths[index].style.stroke = '#57c2a6' + paths[index].style.fill = '#57c2a6' + paths[index].style.transition = 'stroke-dasharray 1.5s ease-in-out' + paths[index].style.strokeDasharray = paths[index].getTotalLength() + paths[index].style.strokeDashoffset = paths[index].getTotalLength() + setTimeout(() => { + paths[index].style.strokeDashoffset = '0' + animatePaths(paths, index + 1) + }, 50) + } +} \ No newline at end of file diff --git a/themes/ncrausaz/assets/css/styles.css b/themes/ncrausaz/assets/css/styles.css index 38d6239..4dca44c 100644 --- a/themes/ncrausaz/assets/css/styles.css +++ b/themes/ncrausaz/assets/css/styles.css @@ -21,6 +21,12 @@ h2 { font-family: 'Roboto Slab', serif; } +.project-content li { + list-style-type: square; + list-style-position: inside; + margin-top: 5px; +} + .section-title { @apply text-4xl lg:text-6xl font-bold text-white; display: table; @@ -90,4 +96,4 @@ h2 { } @layer components { -} +} \ No newline at end of file diff --git a/themes/ncrausaz/layouts/_default/baseof.html b/themes/ncrausaz/layouts/_default/baseof.html index 3b328af..0189218 100644 --- a/themes/ncrausaz/layouts/_default/baseof.html +++ b/themes/ncrausaz/layouts/_default/baseof.html @@ -2,7 +2,6 @@ {{ partial "head.html" . }} - + + {{ template "_internal/google_analytics.html" . }} diff --git a/themes/ncrausaz/layouts/partials/header.html b/themes/ncrausaz/layouts/partials/header.html index 615ecdb..52061ca 100644 --- a/themes/ncrausaz/layouts/partials/header.html +++ b/themes/ncrausaz/layouts/partials/header.html @@ -30,7 +30,7 @@ /> -