From b3d6a2d202efe2464dbbd69632e5a2a12a22ea40 Mon Sep 17 00:00:00 2001 From: candifloss Date: Tue, 27 May 2025 15:42:59 +0530 Subject: [PATCH] Update: Intro section layout Set: Image position and size Set: Font size and text position --- css/about.css | 87 +++++++++++++++++++++++++++++++++++++- html/about.html | 13 +++++- img/me.jpg | Bin 0 -> 4264 bytes scss/about.scss | 108 ++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 202 insertions(+), 6 deletions(-) create mode 100644 img/me.jpg diff --git a/css/about.css b/css/about.css index 36f49e4..101c0b6 100644 --- a/css/about.css +++ b/css/about.css @@ -21,7 +21,7 @@ main { flex-direction: column; justify-content: center; align-items: center; - padding: 2rem; + padding: 1rem; box-sizing: border-box; position: relative; } @@ -80,7 +80,92 @@ footer { .section1::before { background-image: url("https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg"); } +.section1 .portrait { + text-align: right; + margin-top: 0; + margin-right: -25rem; +} +.section1 .portrait img { + width: 350px; + height: 350px; + object-fit: cover; + border-radius: 50%; + box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); +} +.section1 .content { + text-align: left; + margin-left: -30rem; +} +.section1 .content h1 { + font-size: 4rem; + margin-bottom: 1rem; + margin-top: -5rem; + color: #5488bf; + text-shadow: 0 0 9px #373737; +} +.section1 .content h1 .myname { + font-style: normal; + color: #fff; +} +.section1 .content .tagline { + font-size: 1.7rem; + text-align: left; +} +.section1 .content .tagline .tagline-item { + display: inline; + margin-right: 0.7ch; +} +.section1 .content .tagline .cursor { + display: inline-block; + animation: blink 1s steps(2, start) infinite; + margin-left: 0.2ch; +} +@media (max-width: 600px) { + .section1 .content { + margin: 0; + } + .section1 .content .portrait { + text-align: center; + margin: 0; + } + .section1 .content .portrait img { + width: 200px; + height: 200px; + object-fit: cover; + border-radius: 50%; + margin: 0; + } + .section1 .content h1 { + text-align: left; + margin-top: 0; + margin-bottom: 1ch; + margin-left: 1.5rem; + font-size: 2.7rem; + } + .section1 .content .tagline { + display: block; + margin-left: 1.5rem; + } + .section1 .content .tagline .tagline-item { + display: block; + margin-bottom: 0.3rem; + } + .section1 .content .tagline .tagline-item:last-child { + margin-bottom: 0; + } + .section1 .content .tagline .cursor { + margin-left: 0.4ch; + } +} +@keyframes blink { + 0%, 100% { + color: rgba(255, 255, 255, 0); + } + 50% { + color: #fff; + } +} .section2::before { background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg"); } diff --git a/html/about.html b/html/about.html index 68b1392..d8d1fc3 100644 --- a/html/about.html +++ b/html/about.html @@ -10,8 +10,17 @@
-

Hello, I'm [My Name]

-

Code Wizard | Linux Fanatic | Amateur Artist

+
+ A stylized portrait +
+

+ Hello, I'm [My Name] +

+

+ Code Wizard. + Terminal Fanatic. + Amateur Artist. _ +

diff --git a/img/me.jpg b/img/me.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3412cd77156b4030ae16bd10155d39b45053ef50 GIT binary patch literal 4264 zcmYL}cRbba`^Swa9LFYG_Fh>B2ay$VC^O^OBeP>6(M_P9phLTC!3JHSGI`k zzDM=>{r-C2kNa`oulu@Q&)4)$Nfn2WMYdmA_Hj6;6RZC{U6PZ_a@6h~TK!(v?r3+PnK+SC-wrt!^c6Eba7ANbm<* zq9FxW!&neFbSxN+KGltUZfQrRUc7H%&@!7X%utF4{g zuB~WzRsY{@D}B(A9oj=Pb)*pPshkS>@mseEK9Qr0zMw^2VaV@Ye|-Jp#oajekL1`N zn^E2BXzdc9!Qyj6ORE~0Lo~V!7Q@vD7%y6ZsvWAETTx!JHY)rdAYK@jZQn{SP+k=4 zL0tvfqPWhUyvW8~7b?=#zueJH@zUfD^pG|M$+NPkUuuftT#YHhA+XH;x~BU}o6Q`z z0IE$l9oAJl30(dFH9}e9ZwXjDz9c{=tJ{QS`&DItFj90dV#hO z&Hg@ppvPl?EgiPkC?f0L_y%*)D9D3>VNWY#nZ_pHk5zt>(a40hfh(o{-0@wV@I2)@ z6QX(5QQRu=FFMZ?^8KOG?}rO~-q2a&?sOxy@S~MuUqJ}P&pPdYX8Uuwo@7hF=F{_@ zq20<#;oUjbmSe98`Zp?NM`50VY5|CBuP0&j=-IK{a-EYuG1~BFieg(!lG1ui2Dv9Tl*dbJ0$)Q|4m~&d^qFd#&HrNpLV=i(avgyE zmYXfQl%vq?|H~Gd$Vz9Kirm{bhn?Je3ThC8KNIsWkSqtH#r`|aVH5m&o*N{8!uTIT zYcH@x9k?TUMC{|AN%~t08UP}nv@AoSYux9S)a^gu4@?hr;!Hs|(|K)P@4rF)Pi$py z%qi@dGkMd!pyOU^K#w22SNO{T1ru|cZ72V{jg0n?@Vl|zFSC6$Kfw1>YuSEKFNsW| zH$;}=xEk?&eP)Rbvaph?v`a?T2jJ1+g_XiM3-uz^80s&*%e$BfIcuj!!%r47{RqC(RaS#$DveUP z12ktp6_2_nMQ&_**jcxu6C7X;%MVQ*`xarBl+dgBPKhdjw!f@T3 zCm0ZCm#6Q=If!%XWjY1i6b=PVmswAMFgP$Hb1u3>t2vS;0j%K{y1;>&s-Or?XIt0rT7sbQuxKNDSp&DM`id`e#tuZaU6)+wyyP?kUboct zZ3vhdh)F=~vxBMIJ3Q>{eavq=J;^e%7`q5aomh&?Pp91op#raxB>NQ6Yn9p0){37- z_8rVim=cdBn;5dMnX50cY~GCm1S^FZViX{KXZuQszK=|sCU8QSRwKLyzdU{8O|F{z zWN;xit~pW@I^ZehPT*XH#}(9Snt&?iy%9{AsVI5iXm=4gipx|>b??4Zd8o1>vt2Gz zgZR@;dfgk+5)#W)S4f9n(em6FPA^#Oy6*d`(e(DE3VAqaZz!z3C zF?yZTHmEw+%c%uab-vr`!kpv0XGMmL+0hda8iX)pvLhpFV4&M{uWyv!nvt zeJ&qy85~7xafLI>cAX4Tr~81MAVQUt#i;hi?YNBP%aQ0iRQI%WYEgkBFD_I=Sv%RM@571@JgH0V=C2E;u_Zcea>@qeX&dbL>iuKKU^a^y^I`X&$7=zrvP6qB`*k9R z-oV_(IEtU!aVo{kGIDih5y1%x?yUOd(?~d{JjwuV$p0gR* zw2b)9*_g=MY(d4z*p@*+`$RCPHg_H2*lzzc$$ZJ4EG$!-OaNJdH8<=+0Q3Y6)zL~l)R(If!my5tQWXyp{XN2Y2P}Dm$ftO8jgJ zgmh&g(n#jjx1tZ18&br|1Qdpaqb4o6Ir>$Pq*e82T1$Srj0T5&IW?bV%WG`4%I93MUI}n8e@V0%0AYtYAY?E* zHoduC`<1UUNbmsCX}0(cu0xx0sj^QCtDfz28yMokb|f!oHwRkYU6janOHbvIw+RHC zNb1dY-~^fknQGvBIONTb-jU9k=EC!p+qK85sS=;y*EHbgjF#aL2y+dA2?rs)FteSd zs*aQwsi6lf`8_kuvTCo?)!_qEQgB1|7v2+Ty0tw@?j>f^B35HN!^n~jDkqC(;`wCc zdg$Ub4TTZ56eW*IE$3++~VjdjT!peT0@L(CRV^}m_>bMIB2 z`((WX45Zc0Doj9ilmgBW6 zuzXEgBMY6$Dq6imG|eD%?*bfOHo{cZt^AsNsWkg%&S6@jE>rxc!;q}bj{Riz`x=z> z18KWJk+Sih+fmTd26jULrdaZgO0d^~f&$EJnqfizx=@G35z)&L7(yg2K}iphJhyk+ zse+oukJ(>sD?ZE)-4LX`B+#>Y+445Wy^D#_jVK>G`S=b` zx6-gFQNqhU>l2*a-(p)fFrI$q?eq=iH{B!2_TV8WhUC=MQO57$G?q6Gd@f7AZ=Q&_ z)>ljuIno*_*_CEA?l!HC6bLU4?RYp3Z!Sdj`lD0Z)b2cJj@@ah!w%@MYvN;3~OS#5L z?|y0kH*~HOd!Ix`#5g!ce*A)^>5fQkif`eM6i8#@(kfHuiX`gKp$Z4KR!MH5j^{!Y zQ@Lvdj-(NG8+FJgi4^yPZ&(UO)l@+Ve2=8V>3qyNNwtsU5-*oaC@`bF4r6@2b{J4J zBef;+%kUYiDG5dm3ycrDu*Z--Y_34%k#fI9&*ty>Waw+@a3qggPfn**}jjMxxZv_D}Y@QY@PwViPf}j<3Z2o*CDF=QQ3qk62 zIlOW_jxEpc`U$OvTqlvNsCW^?>g~?<+?V|UBy3=p#7_fY3~w4GTOEY$_0=p*idL(* zW<4GhB`6Zz%w?2H)sIv%EeA5bi~Z$5D22Gu^4o{$KP!2EAwd6F`&!NTvVcvm_o0UG z<@1pJH_XL=#cUB+rR9~tMNyI8K#R^pdA+=Ek(XQnQ9-c8GfjWBE#M zJhm-Pd>F0pK^@r7Bu{%3<;Fn^uQ*N_lesZA@h$2#IB27pS^}714?I^Qei&fiNytOW z>N$LpIZ-r;oAqt!is;h1{Ua6qI_sw)G8;^65U>rWrKu#Ehl5@F*BulNFq$sZlX=TI znew<@I`1PRfCzQ^TSyvu=$=$WN*W1uW3CcJHV{$di0#l;ZnARA8GnmCN!s)Vcpd^% zR`zBEnQBZahCksL$TT;9TeaKw(-cM>T8~6!(fp)oaADi6a&iBL!OQg%9*H~EDJ5AI z_v9+`MhVww3cq6VNbK|C0xu|3G4Whv0_P#^Jba$YewV>&97yAF2z(@Yle3Qz7mU<~ z+iD^sPS<*QBVis d7c+pQB3!$~vRG|w$y$K{JUHE?1qKGj{{Z&;J1GDF literal 0 HcmV?d00001 diff --git a/scss/about.scss b/scss/about.scss index 49542d2..8ee7c70 100644 --- a/scss/about.scss +++ b/scss/about.scss @@ -27,7 +27,7 @@ main { flex-direction: column; justify-content: center; align-items: center; - padding: 2rem; + padding: 1rem; box-sizing: border-box; position: relative; @@ -85,11 +85,113 @@ footer { // Example background images per section .section1 { - &::before { - background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg'); + &::before { + background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg'); + } + + .portrait { + text-align: right; + margin-top: 0; + margin-right: -25rem; + + img { + width: 350px; + height: 350px; + object-fit: cover; + border-radius: 50%; + //border: 3px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); } + } + + .content { + text-align: left; + margin-left: -30rem; + h1 { + font-size: 4rem; + margin-bottom: 1rem; + margin-top: -5rem; + color: #5488bf; + text-shadow: 0 0 9px #373737; + + .myname { + font-style: normal; + color: $text-color; + } + } + + .tagline { + font-size: 1.7rem; + //color: #ccc; + text-align: left; + + .tagline-item { + display: inline; + margin-right: 0.7ch; + } + + .cursor { + display: inline-block; + animation: blink 1s steps(2, start) infinite; + margin-left: 0.2ch; + } + } + } + + @media (max-width: 600px) { + .content { + margin: 0; + .portrait { + text-align: center; + margin: 0; + + img { + width: 200px; + height: 200px; + object-fit: cover; + border-radius: 50%; + margin: 0; + //border: 3px solid rgba(255, 255, 255, 0.3); + //box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); + } + } + + h1 { + text-align: left; + margin-top: 0; + margin-bottom: 1ch; + margin-left: 1.5rem; + font-size: 2.7rem; + } + + .tagline { + display: block; + margin-left: 1.5rem; + + .tagline-item { + display: block; + margin-bottom: 0.3rem; + } + + .tagline-item:last-child { + margin-bottom: 0; // remove extra space after last line + } + + .cursor { + margin-left: 0.4ch; // keep close to text + } + } + } + } } +// Blinking cursor animation +@keyframes blink { + 0%, 100% { color: #fff0; } + 50% { color: #fff; } +} + + .section2 { &::before { background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');