Kevin/website
1
0
Fork 0
mirror of https://github.com/LJ5O/website.git synced 2026-08-11 22:54:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

New white scroll arrow

Browse Source
This commit is contained in:
LJ5O
2025-05-01 17:02:03 +02:00
parent 250bd5a385
commit eaebcec1e8
2 changed files with 87 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/assets/svg/arrow_down.svg Normal file
View File

@@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="34.673023mm"
height="50.686279mm"
viewBox="0 0 34.673023 50.686279"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="arrow_down.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.5994523"
inkscape:cx="48.141481"
inkscape:cy="77.213933"
inkscape:window-width="1854"
inkscape:window-height="1011"
inkscape:window-x="66"
inkscape:window-y="32"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-75.303856,-63.523312)">
<g
id="g999">
<rect
style="fill:#f9f9f9;stroke-width:0.264583"
id="rect788"
width="7.649694"
height="45.184273"
x="88.815521"
y="63.523312"
ry="2.2692552" />
<path
id="rect790"
style="fill:#f9f9f9;stroke-width:0.264583"
d="M 77.573111,91.995148 92.640366,106.11721 107.70762,91.995148 c 0.91726,-0.859718 2.26926,1.01209 2.26926,2.26926 v 3.55386 c -0.0116,0.03878 -17.336514,16.391322 -17.336514,16.391322 L 75.303856,97.818268 v -3.55386 c 0,-1.25717 1.351999,-3.128975 2.269255,-2.26926 z"
sodipodi:nodetypes="scsscccss" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

27
src/components/home/welcome.vue
View File

@@ -15,6 +15,10 @@
</div> </div>
</div> </div>
</div> <!-- Name div --> </div> <!-- Name div -->
<div id="scroll_arrow">
<img :src="arrowSvg"/>
</div>
</div> <!-- Welcome Div --> </div> <!-- Welcome Div -->
</template> </template>
@@ -26,6 +30,7 @@
import mailSvg from '@/assets/img/mail.svg'; import mailSvg from '@/assets/img/mail.svg';
import lineImg from '@/assets/img/line.png'; import lineImg from '@/assets/img/line.png';
import githubSvg from '@/assets/img/github.svg'; import githubSvg from '@/assets/img/github.svg';
import arrowSvg from '@/assets/svg/arrow_down.svg';
const i18n = useI18n(); const i18n = useI18n();
@@ -106,4 +111,26 @@
flex-direction: row; flex-direction: row;
} }
#scroll_arrow{
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 65px;
bottom: 5%;
animation-name: arrow_floating;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#scroll_arrow img{
width: 100%;
height: 100%;
}
@keyframes arrow_floating {
from {bottom:5%;}
to {bottom: 8%;}
}
</style> </style>