1+ <!DOCTYPE html> < html lang ="en "> < head > < meta charset ="UTF-8 "> < meta name ="viewport " content ="width=device-width, initial-scale=1.0 "> < title > jargdev</ title > < link rel ="icon " type ="image/x-icon " href ="/favicon.png "> <!-- meta & seo --> < meta name ="description " content ="hi :3 I'm jarg, a software developer who's been in the programming industry for 7 years. Checkout my website @ jargdev.github.io! "> < meta name ="keywords " content ="jargdev, jarg, developer, portfolio, programming, web development, astro, github "> < meta name ="author " content ="jargdev "> < link rel ="canonical " href ="https://jargdev.github.io/ "> <!-- Open Graph embeds (facebook, discord) --> < meta property ="og:type " content ="website "> < meta property ="og:url " content ="https://jargdev.github.io/ "> < meta property ="og:title " content ="jargdev "> < meta property ="og:description " content ="hi :3 I'm jarg, a software developer who's been in the programming industry for 7 years. "> < meta property ="og:image " content ="https://jargdev.github.io/favicon.png "> < meta property ="og:site_name " content ="jargdev "> < meta property ="og:locale " content ="en_US "> <!-- Twitter --> < meta name ="twitter:card " content ="summary_large_image "> < meta name ="twitter:url " content ="https://jargdev.github.io/ "> < meta name ="twitter:title " content ="jargdev "> < meta name ="twitter:description " content ="hi :3 I'm jarg, a software developer who's been in the programming industry for 7 years. "> < meta name ="twitter:image " content ="https://jargdev.github.io/favicon.png "> < meta name ="twitter:creator " content ="@jargdev "> < meta name ="theme-color " content ="#ff6200 "> < link rel ="stylesheet " href ="/_astro/index.EEp70F_5.css "> </ head > < body style ="scroll-behavior: smooth; "> < div class ="relative w-full overflow-hidden flex justify-center " data-astro-cid-bbe6dxrz > < div class ="relative w-full max-w-[1920px] aspect-[20/9] overflow-hidden " data-astro-cid-bbe6dxrz > < div class ="absolute inset-0 z-0 transform will-change-transform " data-astro-cid-bbe6dxrz > < div class ="w-full h-full object-cover bg-gradient-to-b from-[#fa380d] to-[#fe850d] " data-astro-cid-bbe6dxrz > </ div > </ div > < div class ="absolute inset-0 overflow-hidden z-0 transform will-change-transform flex justify-center items-center " data-astro-cid-bbe6dxrz > < div class ="absolute inset-0 z-5 bg-repeat " style ="
2+ background-image: url('/hero/repeat.png');
3+ background-size: auto;
4+ animation: scroll-tile 16s linear infinite;
5+
6+ " data-astro-cid-bbe6dxrz > </ div > </ div > < div class ="absolute inset-0 overflow-hidden z-0 transform will-change-transform flex justify-center items-center " data-astro-cid-bbe6dxrz > < img src ="/hero/me.png " alt ="Foreground 1 " class ="w-full h-full object-contain z-10 " data-speed ="0.5 " data-astro-cid-bbe6dxrz > < div class ="absolute bottom-0 right-0 z-20 " data-speed ="0.6 " data-astro-cid-bbe6dxrz > < img src ="/hero/jargudevu.png " alt ="Foreground 2 " class ="w-full h-full object-contain " data-astro-cid-bbe6dxrz > < button class ="absolute bg-white text-black px-2 py-2 rounded-full hover:bg-gray-200 transition aspect-square hover:cursor-pointer hover:scale-120 hover:rotate-[-12deg] shadow-xl/50 hover:shadow-xl/70 " style ="top: 35%; left: 77%; " id ="sound-btn " data-astro-cid-bbe6dxrz > < img src ="/hero/sound.svg " alt ="Play Me! " class ="w-7 h-7 " data-astro-cid-bbe6dxrz > </ button > </ div > </ div > < svg class ="absolute bottom-0 w-full h-24 z-30 " viewBox ="0 0 1440 320 " preserveAspectRatio ="none " data-astro-cid-bbe6dxrz > < path fill ="white " d ="M0,128L48,144C96,160,192,192,288,197.3C384,203,480,181,576,160C672,139,768,117,864,117.3C960,117,1056,139,1152,138.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z " data-astro-cid-bbe6dxrz > </ path > </ svg > </ div > </ div > < script type ="module "> const s = document . querySelectorAll ( "[data-speed]" ) ; window . addEventListener ( "scroll" , ( ) => { const e = window . scrollY ; s . forEach ( n => { const o = parseFloat ( n . dataset . speed || "0" ) ; n . style . transform = `translateY(${ e * o } ${ e * ( o * .02 ) } } ) } ) ; const r = document . getElementById ( "sound-btn" ) ; let t = null , a = null ; r ?. addEventListener ( "click" , async ( ) => { if ( t || ( t = new ( window . AudioContext || window . webkitAudioContext ) ) , ! a ) { const o = await ( await fetch ( "/hero/jargudevu.m4a" ) ) . arrayBuffer ( ) ; a = await t . decodeAudioData ( o ) } const e = t . createBufferSource ( ) ; e . buffer = a , e . connect ( t . destination ) , e . start ( ) } ) ; </ script > < div class ="px-6 max-w-6xl mx-auto hidden " id ="safari-warning "> < div class ="bg-orange-50 border border-orange-200 text-orange-800 px-6 py-4 text-center font-medium shadow-md rounded-xl mx-6 mt-4 max-w-5xl relative z-50 ">
7+ ⚠️ Safari sometimes has issues rendering sites correctly.
8+ < span class ="font-semibold text-[#ff6200] "> For the best experience</ span > , please try another browser like Chrome or Firefox.
9+ < button class ="ml-3 text-[#ff6200] hover:underline hover:cursor-pointer hover:scale-110 transition duration-300 ease-in-out " onclick ="this.parentElement.parentElement.remove() ">
10+ Dismiss
11+ </ button > </ div > </ div > < section class ="px-6 py-16 max-w-6xl mx-auto "> < div class ="text-center mb-16 "> < h1 class ="text-7xl font-black mb-8 bg-gradient-to-r from-[#ff6200] to-[#ff8c42] bg-clip-text text-transparent drop-shadow-sm ">
12+ Hello World!
13+ </ h1 > < p class ="text-[#555] text-xl leading-relaxed max-w-3xl mx-auto font-light ">
14+ I'm < span class ="font-semibold text-[#ff6200] bg-orange-50 px-2 py-1 rounded-lg "> jargdev</ span > , preferably < strong class ="text-[#ff6200] "> jarg</ strong > , and
15+ welcome to my website! Here you'll find projects I've worked on,
16+ my interests, and much more. I've been a programmer for
17+ < span class ="font-semibold text-[#ff6200] relative "> < span class ="relative z-10 "> 7 years</ span > < span class ="absolute bottom-0 left-0 w-full h-2 bg-orange-100 opacity-60 -z-0 "> </ span > </ span > , and I hope to share my knowledge with you and the
18+ world.
19+ </ p > </ div > < div class ="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center "> < div class ="group relative "> < div class ="relative bg-white rounded-xl shadow-xl p-6 border border-gray-100 hover:shadow-2xl transition-all duration-300 "> < canvas id ="languageChart " class ="w-full h-80 " width ="500 " height ="350 "> </ canvas > </ div > </ div > < div class ="group relative "> < div class ="relative bg-white rounded-xl shadow-xl p-6 border border-gray-100 hover:shadow-2xl transition-all duration-300 "> < img class ="w-full h-auto rounded-lg transition-transform duration-500 group-hover:scale-[1.02] " src ="https://github-readme-stats.vercel.app/api?username=jargdev&hide_border=false&include_all_commits=false&count_private=true&show_icons=true&bg_color=ffffff&text_color=666666&icon_color=ff6200&title_color=666666 " alt ="Github Stats " loading ="lazy "> </ div > </ div > </ div > </ section > < section class ="px-6 py-16 max-w-6xl mx-auto "> < div class ="text-center mb-12 "> < h2 class ="text-5xl font-black mb-6 bg-gradient-to-r from-[#ff6200] to-[#ff8c42] bg-clip-text text-transparent drop-shadow-sm ">
20+ My Projects
21+ </ h2 > < p class ="text-[#555] text-lg leading-relaxed max-w-2xl mx-auto font-light ">
22+ Explore some of the projects I've worked on, showcasing my
23+ skills in programming and design. More to come!
24+ </ p > </ div > < div class ="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 "> < div class ="parallax-card relative w-full max-w-[384px] aspect-[16/9] rounded-xl overflow-hidden bg-black shadow-lg hover:shadow-xl transition-shadow duration-300 " data-background ="/projects/openwheels/bg.png " data-middleground ="/projects/openwheels/logo.png " data-foreground ="/projects/openwheels/char.png " data-astro-cid-3vbfny23 > < img src ="/projects/openwheels/bg.png " alt ="Background layer " class ="absolute inset-0 w-full h-full object-cover layer " data-depth ="0.05 " data-astro-cid-3vbfny23 > < img src ="/projects/openwheels/logo.png " alt ="Middleground layer " class ="absolute inset-0 w-full h-full object-contain layer " data-depth ="0.15 " data-astro-cid-3vbfny23 > < img src ="/projects/openwheels/char.png " alt ="Foreground layer " class ="absolute inset-0 w-full h-full object-contain layer " data-depth ="0.25 " data-astro-cid-3vbfny23 > </ div > < script type ="module "> const i = ( t , e ) => { let o ; return ( ...s ) => { o || ( t ( ...s ) , o = ! 0 , setTimeout ( ( ) => o = ! 1 , e ) ) } } , y = document . querySelectorAll ( ".parallax-card" ) ; y . forEach ( t => { const e = t . getBoundingClientRect ( ) , o = t . querySelectorAll ( ".layer" ) , { background :s , middleground :d , foreground :u } = t . dataset ; if ( ! s || ! d || ! u ) { console . warn ( "Parallax card is missing one or more image sources:" , t . dataset ) ; return } const g = i ( n => { const r = n . clientX - e . left - e . width / 2 , a = n . clientY - e . top - e . height / 2 , h = a / e . height * 4 , f = - ( r / e . width ) * 4 ; t . style . transform = `rotateX(${ h } ${ f } , o . forEach ( l => { const c = parseFloat ( l . dataset . depth || "0" ) , p = r * c * .3 , v = a * c * .3 ; l . style . transform = `translate(${ p } ${ v } } ) } , 16 ) ; t . addEventListener ( "mousemove" , g ) , t . addEventListener ( "mouseleave" , ( ) => { t . style . transform = "rotateX(0deg) rotateY(0deg)" , o . forEach ( n => { n . style . transform = "translate(0px, 0px) scale(1.05)" } ) } ) ; const m = ( ) => { const n = t . getBoundingClientRect ( ) ; Object . assign ( e , n ) } ; window . addEventListener ( "resize" , i ( m , 100 ) ) } ) ; </ script > </ div > </ section > </ body > </ html > < script type ="module " src ="/_astro/index.astro_astro_type_script_index_0_lang.Ds9P6cqp.js "> </ script > < script type ="module ">
25+ const isSafari = / ^ ( (? ! c h r o m e | a n d r o i d ) .) * s a f a r i / i. test ( navigator . userAgent ) ;
26+
27+ if ( isSafari && ! sessionStorage . getItem ( "safariWarned" ) ) {
28+ const warning = document . getElementById ( "safari-warning" ) ;
29+ if ( warning ) {
30+ warning . classList . remove ( "hidden" ) ;
31+ sessionStorage . setItem ( "safariWarned" , "true" ) ;
32+ }
33+ }
34+
35+ const ctx = document . getElementById ( "languageChart" ) ?. getContext ( "2d" ) ;
36+ if ( ! ctx ) {
37+ console . warn ( "Canvas context for languageChart not found" ) ;
38+ } else {
39+ const data = {
40+ labels : [ "Lua" , "Python" , "C" , "JS/TS" ] ,
41+ datasets : [
42+ {
43+ label : "Years of Experience" ,
44+ data : [ 7 , 5 , 3.5 , 3 ] ,
45+ backgroundColor : [
46+ "rgba(255, 98, 0, 0.8)" ,
47+ "rgba(255, 159, 64, 0.8)" ,
48+ "rgba(255, 206, 86, 0.8)" ,
49+ "rgba(75, 192, 192, 0.8)" ,
50+ ] ,
51+ borderColor : [
52+ "rgba(255, 98, 0, 1)" ,
53+ "rgba(255, 159, 64, 1)" ,
54+ "rgba(255, 206, 86, 1)" ,
55+ "rgba(75, 192, 192, 1)" ,
56+ ] ,
57+ borderWidth : 3 ,
58+ borderRadius : 12 ,
59+ barPercentage : 0.6 ,
60+ } ,
61+ ] ,
62+ } ;
63+
64+ const config = {
65+ type : "bar" ,
66+ data : data ,
67+ options : {
68+ responsive : true ,
69+ maintainAspectRatio : false ,
70+ animation : {
71+ duration : 1200 ,
72+ easing : "easeOutQuart" ,
73+ } ,
74+ plugins : {
75+ legend : { display : false } ,
76+ title : {
77+ display : true ,
78+ text : "Programming Language Experience" ,
79+ color : "#666" ,
80+ font : {
81+ size : 20 ,
82+ family : "'Inter', sans-serif" ,
83+ weight : "700" ,
84+ } ,
85+ padding : 20 ,
86+ } ,
87+ tooltip : {
88+ backgroundColor : "rgba(0, 0, 0, 0.9)" ,
89+ titleColor : "#fff" ,
90+ bodyColor : "#fff" ,
91+ cornerRadius : 8 ,
92+ displayColors : false ,
93+ } ,
94+ } ,
95+ scales : {
96+ y : {
97+ beginAtZero : true ,
98+ title : {
99+ display : true ,
100+ text : "Years" ,
101+ color : "#666" ,
102+ font : { size : 14 , weight : "600" } ,
103+ } ,
104+ grid : {
105+ color : "#f0f0f0" ,
106+ lineWidth : 2 ,
107+ } ,
108+ ticks : {
109+ color : "#666" ,
110+ font : { size : 13 , weight : "500" } ,
111+ stepSize : 1 ,
112+ } ,
113+ } ,
114+ x : {
115+ title : {
116+ display : true ,
117+ text : "Programming Language" ,
118+ color : "#666" ,
119+ font : { size : 14 , weight : "600" } ,
120+ } ,
121+ grid : { display : false } ,
122+ ticks : {
123+ color : "#666" ,
124+ font : { size : 14 , weight : "500" } ,
125+ } ,
126+ } ,
127+ } ,
128+ } ,
129+ } ;
130+
131+ new Chart ( ctx , config ) ;
132+ }
133+ </ script >
0 commit comments