timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 11:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

add a profile pic, wip

Browse Source
This commit is contained in:
Timothy Pidashev
2024-04-16 22:38:00 -07:00
parent bded192500
commit e20fc0d197
2 changed files with 74 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/web/public/profile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

120
src/web/src/components/hero/content.jsx
View File

@@ -1,63 +1,91 @@
"use client" "use client"
import Typewriter from 'typewriter-effect'; import Typewriter from 'typewriter-effect';
import React from 'react'; import { motion } from 'framer-motion';
import React, { useState, useEffect } from 'react';
import Image from 'next/image';
function Portrait() {
const fadeInAnimation = {
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { duration: 1 } },
};
return (
<motion.div
initial="hidden"
animate="visible"
variants={fadeInAnimation}
className="w-32 h-32 relative rounded-full overflow-hidden"
>
<Image
src="/profile.png"
alt="Portrait"
width="90"
height="90"
className="w-full h-full rounded-full"
/>
</motion.div>
);
}
function Content() { function Content() {
return ( return (
<div className="relative h-screen overflow-y-scroll font-bold text-4xl"> <>
<div className="h-screen flex flex-col items-center justify-center"> <div className="relative h-screen overflow-y-scroll font-bold text-4xl">
<div className="relative h-48 overflow-y-auto"> <div className="h-screen flex flex-col items-center justify-center">
<Typewriter <Portrait />
options={{ <div className="relative h-48 overflow-y-auto">
autoStart: true, <Typewriter
loop: true, options={{
delay: 50, autoStart: true,
deleteSpeed: 25, loop: true,
cursor: '' delay: 50,
}} deleteSpeed: 25,
onInit={(typewriter) => { cursor: ''
typewriter.typeString("<center><span class='inline-block mb-4'>Hello, I'm</span><br><span class='inline-block mb-4'><strong class='text-light-aqua-1 dark:text-dark-aqua-1'>Timothy Pidashev</strong></span></center>") }}
.callFunction(() => { onInit={(typewriter) => {
console.log('Change the background element to a portrait of my face'); typewriter.typeString("<center><span class='inline-block mb-4'>Hello, I'm</span><br><span class='inline-block mb-4'><strong class='text-light-aqua-1 dark:text-dark-aqua-1'>Timothy Pidashev</strong></span></center>")
}) .callFunction(() => {
.pauseFor(2500) console.log('Change the background element to a portrait of my face');
.deleteAll() })
.callFunction(() => { .pauseFor(2500)
console.log('Wipe the background element'); .deleteAll()
}) .callFunction(() => {
.start() console.log('Wipe the background element');
})
.start()
typewriter.typeString("<center><span class='inline-block mb-4'>I'm a <strong class='text-light-green-1 dark:text-dark-green-1'>19 year old</strong></span><br><span class='inline-block mb-4'>on an <strong class='text-light-yellow-1 dark:text-dark-yellow-1'>epic journey</strong> to</span><br><span class='inline-block mb-4'>become a <strong class='text-light-blue-1 dark:text-dark-blue-1'>software engineer</strong>!</span></center>") typewriter.typeString("<center><span class='inline-block mb-4'>I'm a <strong class='text-light-green-1 dark:text-dark-green-1'>19 year old</strong></span><br><span class='inline-block mb-4'>on an <strong class='text-light-yellow-1 dark:text-dark-yellow-1'>epic journey</strong> to</span><br><span class='inline-block mb-4'>become a <strong class='text-light-blue-1 dark:text-dark-blue-1'>software engineer</strong>!</span></center>")
.pauseFor(2500) .pauseFor(2500)
.deleteAll() .deleteAll()
.start() .start()
typewriter.typeString("<center><span class=''>I enjoy</span><br><span class=''>writing code</span><br><span class=''>hiking and camping</span><br><span class=''>driving cars</span><br><span class=''>and much more!</span></center>") typewriter.typeString("<center><span class=''>I enjoy</span><br><span class=''>writing code</span><br><span class=''>hiking and camping</span><br><span class=''>driving cars</span><br><span class=''>and much more!</span></center>")
.pauseFor(2500) .pauseFor(2500)
.deleteAll() .deleteAll()
.start() .start()
typewriter.typeString("<center><span class=''>Fun facts about me:</span><br><span class=''>I keep a journal</span><br><span class=''>I love rust lang!</span><br><span class=''>I use a corebooted thinkpad</span></center>") typewriter.typeString("<center><span class=''>Fun facts about me:</span><br><span class=''>I keep a journal</span><br><span class=''>I love rust lang!</span><br><span class=''>I use a corebooted thinkpad</span></center>")
.pauseFor(2500) .pauseFor(2500)
.deleteAll() .deleteAll()
.start() .start()
typewriter.typeString("<center><span class=''>Wait your still here?</span></center>") typewriter.typeString("<center><span class=''>Wait your still here?</span></center>")
.pauseFor(2500) .pauseFor(2500)
.deleteAll() .deleteAll()
.start() .start()
typewriter.typeString("<center><span class=''>Check out my blog and shop</span><br><span class=''>for many goodies!</span><br><span class=''>or contact me below!</span></center>") typewriter.typeString("<center><span class=''>Check out my blog and shop</span><br><span class=''>for many goodies!</span><br><span class=''>or contact me below!</span></center>")
.pauseFor(2500) .pauseFor(2500)
.deleteAll() .deleteAll()
.start() .start()
}} }}
/> />
</div>
</div> </div>
</div> </div>
</div> </>
); );
}; };