Naaturel
-- +
My background
++ Bla bla bla lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do +
+My skills
++ Java, C#, Python, JavaScript / TypeScript, Node.js, Vue, PostgreSQL, Docker. +
+ +
+
+
+
+
+
+
+ 
+
+
+
+
+ Naaturel
+Laurent Crema
++
+
+
-
-
-
-
+ Hello there!
+About me
++ I'm a full-stack software engineer who loves building efficient, reliable apps + and solving real-world problems through clean, scalable code. +
+
+
+
-
@@ -93,7 +160,7 @@
import { Typer } from './scripts/Typer.js';
const target = document.getElementsByClassName('typer')[0];
- const texts = ["Backend dev", "Frontend dev", "Fullstack software engineer"];
+ const texts = ["backend dev", "frontend dev", "fullstack software engineer"];
const typer = new Typer({target: target, texts: texts, typingDelay: 150, deletionDelay: 50});
typer.start();
@@ -102,9 +169,9 @@
diff --git a/html/scripts/CardTilter.js b/html/scripts/CardTilter.js
index 881222f..99e3e72 100644
--- a/html/scripts/CardTilter.js
+++ b/html/scripts/CardTilter.js
@@ -39,7 +39,7 @@ export class CardTilter {
};
transform(rotationX, rotationY) {
- this.card.style.transform = `translateY(-10px) perspective(${this.perspective}px) rotateX(${rotationX}deg) rotateY(${rotationY}deg) scale(1.05)`;
+ this.card.style.transform = `translateY(-5px) perspective(${this.perspective}px) rotateX(${rotationX}deg) rotateY(${rotationY}deg) scale(1.02)`;
}
reset(){
diff --git a/html/styles/desktop.css b/html/styles/desktop.css
new file mode 100644
index 0000000..e69de29
diff --git a/html/styles/introduction.css b/html/styles/introduction.css
index 7817c8d..2c8092b 100644
--- a/html/styles/introduction.css
+++ b/html/styles/introduction.css
@@ -1,26 +1,99 @@
-#introduction .content {
- flex: 5;
- width: 25%;
+.introduction {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 40%;
+ height: 100%;
}
-#introduction footer {
- flex : 1;
- transition: transform 0.5s ease-in-out;
+.introduction-box {
+ min-width: 350px;
+ min-height: 350px;
+ padding: 25px 35px 35px 35px;
+
+ background: white;
+ border-radius: 16px;
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+
+ overflow: scroll;
}
-footer:hover{
- transform: translateY(-20px);
-}
-
-hr {
+.introduction-box hr {
width: 100%;
+
+ margin-bottom: 25px;
+ margin-top: 10px;
}
+
+
+.introduction-header
+{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 25px;
+}
+
+.names
+{
+ line-height: 16px;
+}
+
+.real-name
+{
+ opacity: 0.7;
+}
+
+.profile-picture
+{
+ width: 100px;
+ aspect-ratio: 1/1;
+ border: solid 1px rgba(0, 0, 0, 0.3);
+ border-radius: 50%;
+}
+
+.introduction-text {
+ font-size: 1.1rem;
+ line-height: 1.25rem;
+
+}
+
+.greetings
+{
+ font-size: 3.5rem;
+}
+
+
.typer::after {
content: '|';
animation: blink 800ms infinite;
}
+.projects
+{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 60%;
+}
+
+.punched-card
+{
+ mask-image: radial-gradient(circle 25px at calc(100% - 0px) calc(0% + 0px), transparent 99%, black 100%);
+ mask-repeat: no-repeat;
+ mask-position: top right;
+ mask-composite: exclude;
+}
+
+.thumbnail
+{
+ width: 250px;
+ border : solid 1px black;
+}
+
.card-list
{
display: flex;
@@ -28,39 +101,45 @@ hr {
justify-content: start;
gap: 15px;
min-width: 375px;
- height: 75%;
overflow: scroll;
- padding: 0 20px 0 20px;
+ padding: 20px;
}
.card {
display: flex;
flex-direction: column;
justify-content: start;
- align-items: center;
+ align-items: start;
height: 350px;
width: 275px;
+ padding: 15px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
- padding: 15px;
-
transition: transform 0.2s ease, box-shadow 0.2s ease;
- will-change: transform;
}
.card:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
-.card p
-{
- opacity: 0.65;
+.card-details {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ height: 100%;
+ width: 100%;
}
+.card .notice
+{
+ opacity: 0.65;
+ font-size: 0.75rem;
+}
@keyframes blink {
from { opacity: 0; }
diff --git a/html/styles/mobile.css b/html/styles/mobile.css
new file mode 100644
index 0000000..003afdf
--- /dev/null
+++ b/html/styles/mobile.css
@@ -0,0 +1,18 @@
+@media (max-width: 801px) {
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .introduction
+ {
+ width: 100%;
+ }
+
+ .introduction-box
+ {
+ height: 100%;
+ }
+
+}
\ No newline at end of file
diff --git a/html/styles/style.css b/html/styles/style.css
index b030d76..de0cda3 100644
--- a/html/styles/style.css
+++ b/html/styles/style.css
@@ -1,5 +1,5 @@
:root {
- --primary-color: #3dae15;
+ --primary-color: #5f9a13;
}
::-webkit-scrollbar {
@@ -7,7 +7,8 @@
}
* {
- font-family: 'Fira Code', 'PT sans', sans-serif;
+ font-family: 'Roboto', 'PT sans', sans-serif;
+
box-sizing: border-box;
color: #333;
}
@@ -17,7 +18,7 @@ html, body {
width: 100dvw;
}
-html, body, main, section, section div, footer {
+html, body, main, footer {
display: flex;
flex-direction: column;
align-items: center;
@@ -44,18 +45,20 @@ main {
margin : 5px;
}
-section {
+.container {
+ display: flex;
+ flex-direction: row;
+
height: 100%;
- min-height: 100%;
width: 100%;
- scroll-snap-align: start;
+ padding : 15px;
}
-ul li{
- list-style-type: none;
+hr {
+ width: 50%;
}
-ul li a {
+a {
text-decoration: none;
}
Check out my live projects
-
+
+
+
+
+
+
+
+
+
- 
+ 
+