commit f8a452c887ace9823a22e05e1d083eaf49efe8c1 Author: Ksan Date: Sat Jun 14 20:54:36 2025 +0200 first commit diff --git a/images/git.png b/images/git.png new file mode 100644 index 0000000..50b3c32 Binary files /dev/null and b/images/git.png differ diff --git a/images/grad.png b/images/grad.png new file mode 100644 index 0000000..76baafb Binary files /dev/null and b/images/grad.png differ diff --git a/images/img.png b/images/img.png new file mode 100644 index 0000000..79b9b53 Binary files /dev/null and b/images/img.png differ diff --git a/images/ksan.png b/images/ksan.png new file mode 100644 index 0000000..e7c2fa8 Binary files /dev/null and b/images/ksan.png differ diff --git a/images/missing.jpg b/images/missing.jpg new file mode 100644 index 0000000..51bf7f0 Binary files /dev/null and b/images/missing.jpg differ diff --git a/images/missing1080.jpg b/images/missing1080.jpg new file mode 100644 index 0000000..447c31a Binary files /dev/null and b/images/missing1080.jpg differ diff --git a/images/output.png b/images/output.png new file mode 100644 index 0000000..037134b Binary files /dev/null and b/images/output.png differ diff --git a/images/serv.jpg b/images/serv.jpg new file mode 100644 index 0000000..ffdc766 Binary files /dev/null and b/images/serv.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e27d4a2 --- /dev/null +++ b/index.html @@ -0,0 +1,133 @@ + + + + + + + + + Website + + + + + + +
+
+
+

+ Đorđe Kšan +

+

+ Student at "Elektrotehnički fakultet u Banjaluci" +

+
+
(website is still under construction and may have bugs..)
+
+ +
+
+ +

My Projects

+ + +
+
+ +

Skill

+

and more...

+ + +
+
+ +

work in progress

+ +
+
+ +

Contact me

+ + +
+
+
+ +
+

My projects

+

you can find most of my project here

+
There are only a few for now, still need to migrate the rest..
+
+
+ + +

will add soon...

+ + +
+
+ + +

My home server

+ + +
+ +
+ +
+
+ +
+

My Skills

+ +
+
+

Programming Languages

+
    +
  • C/C++
    • +
  • Java
    • +
  • C#
    • +
  • Python
    • +
  • JavaScript(still learning)
    • +
+
+
+

Tools & Technologies

+
    +
  • Linux
    • +
  • Git
    • +
  • Bash
    • +
  • Docker
    • +
  • Vim
    • +
+
+
+
+
+
+ Work in progress, + go to: contact +
+ +
+ +
+

You can contact me at:
+ djordje@ksan.dev +

+
+
+ + + + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..7f1125a --- /dev/null +++ b/main.css @@ -0,0 +1,240 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + /* font-family: Arial, sans-serif;*/ + font-family: 'JetBrains Mono', monospace; + background-color: rgb(8, 8, 8); + scroll-behavior: smooth; +} +.start{ + background-image: url(images/grad.png); + height: 100vh; + display: flex; + justify-content: center; + + background-color: #333; + color: white; + font-size: 2rem; + + +} +.welcome{ + font-family: 'JetBrains Mono', monospace; +} +.grid-container { + position: absolute; + top:40%; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 10%; + width: 55vw; + height: 55vh; + margin: auto; +} +@media (max-width: 768px) { + .grid-container { + position: absolute; + top:40%; + display: grid; + grid-template-columns: 1fr; + gap: 5%; + width: 60vw; + height: 60vh; + margin: auto; + } + +} +.grid-item { + position: relative; + overflow: hidden; + border-radius: 22px; + box-shadow: 0 4px 8px rgb(0, 0, 0); + background-size: cover; + background-position: center; +} +.grid-item.image-background { + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} +.grid-item video { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.grid-item a { + display: block; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + text-decoration: none; /* optional: remove underline */ + color: inherit; /* optional: use inherited color */ +} +.grid-item h2 { + margin: 0; + padding: 0 10px +} + +.grid-item h2.default { + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-size: 2rem; + margin: 0; + padding: 0 10px; + text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); + pointer-events: none; + +} + +.grid-item h2.under-black { + position: absolute; + top: 70%; + left: 50%; + transform: translate(-50%, -50%); + color: rgb(0, 0, 0); + font-size: 2rem; + margin: 0; + padding: 0 10px; + text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); + pointer-events: none; +} + + + + +.section { + height: 100vh; + display: flex; + justify-content: center; + color: white; + font-size: 2rem; + text-align: center; + position: relative; + overflow: hidden; +} + +.section-video .bg-video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 0; +} + +.section-video .content { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; /* Vertical centering */ + height: 100%; /* Full height of section */ + width: 100%; + text-align: center; +} +.section-video .skills { + display: flex; + justify-content: center; + gap: 60px; + flex-wrap: wrap; + margin-top: 20px; +} + +.skills-column { + min-width: 200px; +} + +.section-video .skills h3 { + margin-bottom: 10px; + color: #fff; +} + +.section-video .skills ul { + list-style: none; + padding: 0; +} + +.section-video .skills li { + background: rgba(255, 255, 255, 0.2); + + margin: 5px 0; + padding: 8px 15px; + border-radius: 20px; + font-size: 1rem; + color: white; + text-align: center; +} +.section-image { + background-image: url('images/output.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +#section4 { + background-color: transparent; +} + +#section1 { + background-image: url('images/output.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + padding-top: 50px; + color: white; + font-size: 2rem; + text-align: center; + position: relative; + overflow: hidden; +} + + +#section2 { + +} + +#section3 { + background-color: #142268; +} + +.skill-icons img { + height: 50px; + width: auto; + object-fit: contain; + filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)); + transition: transform 0.3s; +} + +.skill-icons img:hover { + transform: scale(1.1); +} + +.no-link-style { + color: white; + text-decoration: none; +} + +.no-link-style:hover { + text-decoration: underline; /* Optional hover effect */ +} +a { + color: inherit !important; +} \ No newline at end of file diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..e69a0ab --- /dev/null +++ b/scripts.js @@ -0,0 +1,16 @@ +const gridItems = document.querySelectorAll('.grid-item'); + +gridItems.forEach(item => { + const video = item.querySelector('video'); + + video.currentTime = 0; + video.pause(); + item.addEventListener('mouseenter', () => { + video.play(); + }); + + item.addEventListener('mouseleave', () => { + video.pause(); + //video.currentTime = 0; + }); +}); diff --git a/videos/background.mp4 b/videos/background.mp4 new file mode 100644 index 0000000..807d170 Binary files /dev/null and b/videos/background.mp4 differ diff --git a/videos/background2.mp4 b/videos/background2.mp4 new file mode 100644 index 0000000..161099c Binary files /dev/null and b/videos/background2.mp4 differ diff --git a/videos/background3.mp4 b/videos/background3.mp4 new file mode 100644 index 0000000..3680ee7 Binary files /dev/null and b/videos/background3.mp4 differ diff --git a/videos/background4.mp4 b/videos/background4.mp4 new file mode 100644 index 0000000..bfa0224 Binary files /dev/null and b/videos/background4.mp4 differ diff --git a/videos/background5.mp4 b/videos/background5.mp4 new file mode 100644 index 0000000..5e02518 Binary files /dev/null and b/videos/background5.mp4 differ diff --git a/videos/video1.mp4 b/videos/video1.mp4 new file mode 100644 index 0000000..56dd577 Binary files /dev/null and b/videos/video1.mp4 differ diff --git a/videos/video2.mp4 b/videos/video2.mp4 new file mode 100644 index 0000000..2d0a48e Binary files /dev/null and b/videos/video2.mp4 differ diff --git a/videos/video3.mp4 b/videos/video3.mp4 new file mode 100644 index 0000000..48f398c Binary files /dev/null and b/videos/video3.mp4 differ diff --git a/videos/video4.mp4 b/videos/video4.mp4 new file mode 100644 index 0000000..dcf832e Binary files /dev/null and b/videos/video4.mp4 differ