FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

updated portfolio · VansRouges/Portfolio-2.0@10f2931 · GitHub

/ Portfolio-2.0 Public

Commit 10f2931

Browse files
VansRouges
committed
updated portfolio
1 parent 366bf0e commit 10f2931

3 files changed

Lines changed: 150 additions & 12 deletions

File tree

‎components/About.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ export default function About({ }: Props) {
3939
I'm Vance.
4040
Started my tech journey two years ago since then I've picked up various languages, contributed to open source,
4141
worked with other developers and designers, built a score of projects both real world(businesses) and personal so I have the experience to deliver within set time.
42-
My preferred tools of choice are <span className='text-[#ffad01] animate-pulse ease-in-out duration-200'>Javascript, React, Nextjs and TailwindCSS</span>
42+
My preferred tools of choice are <span className='text-[#ffad01] animate-pulse ease-in-out duration-200 italic'>Javascript, React, Nextjs and TailwindCSS</span>.
43+
And I've also worked with no-code tools like <span className='text-[#ff01ff] animate-pulse ease-in-out duration-200 italic'>Framer and Webflow.</span>
4344
</p>
4445
</div>
4546
</motion.div>

‎components/Projects.tsx‎

Lines changed: 122 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,117 @@ export default function Projects({ }: Props) {
2222

2323
<div className='relative w-full h-[620px] flex overflow-x-scroll overflow-y-hidden snap-x
2424
snap-madatory z-20 scrollbar scrollbar-track-[#48bf53]/20 scrollbar-thumb-[#004d25]/80'>
25+
<div
26+
className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'
27+
>
28+
<motion.img
29+
initial={{
30+
y: -100,
31+
opacity: 0
32+
}}
33+
transition={{ duration: 1.2 }}
34+
whileInView={{ opacity: 1, y: 0 }}
35+
viewport={{ once: true }}
36+
src='https://cdn.sanity.io/images/wpot5oxi/production/de117b0f2653ddf863f8621c94351239e6362f6b-1920x952.jpg'
37+
alt=''
38+
className='h-36 sm:w- sm:h-60'
39+
/>
40+
41+
<div className='space-y-1 px-0 md:px-10 max-w-6xl'>
42+
<h4 className='md:text-3xl lg:text-4xl font-semibold text-center'>
43+
<a href='https://ad-astra-ultraque.vercel.app/' target='_blank' rel="noreferrer" className='underline decoration-[#f7ab0a]/50'>
44+
Case Study 1 of 7
45+
</a><br />
46+
Ad Astra Ultraque
47+
</h4>
48+
49+
<div className='flex items-center space-x-2 justify-center'>
50+
<Image
51+
className=''
52+
width='32'
53+
height='32'
54+
src='https://cdn.sanity.io/images/wpot5oxi/production/2abfa77960ed051679ecd5b67c9c6ceba581a082-298x169.png'
55+
alt=''
56+
/>
57+
{/* <Image
58+
className=''
59+
width='32'
60+
height='32'
61+
src='https://cdn.sanity.io/images/wpot5oxi/production/f68c4842a21603dfefcb73515eacbae198e2f4af-820x820.png'
62+
alt=''
63+
/> */}
64+
<Image
65+
className=''
66+
width='32'
67+
height='32'
68+
src='https://cdn.sanity.io/images/wpot5oxi/production/e7e787a5b9a83a7f553e144687b35418f87550ad-225x225.png'
69+
alt=''
70+
/>
71+
</div>
72+
73+
<p className='text-sm text-center md:text-left'>
74+
This is a mini project built with Astro and Tailwind to test out Astro Web framework, each character's voice plays after a user has navigated to the page
75+
of the character and hovered(desktop) or tapped on(mobile) the character image on the page.
76+
</p>
77+
78+
</div>
79+
</div>
80+
81+
<div
82+
className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'
83+
>
84+
<motion.img
85+
initial={{
86+
y: -100,
87+
opacity: 0
88+
}}
89+
transition={{ duration: 1.2 }}
90+
whileInView={{ opacity: 1, y: 0 }}
91+
viewport={{ once: true }}
92+
src='https://cdn.sanity.io/images/wpot5oxi/production/67bf3b3ddf0fb8341846609938a753bf1a74967d-1890x900.png'
93+
alt=''
94+
className='h-36 sm:w- sm:h-60'
95+
/>
96+
97+
<div className='space-y-1 px-0 md:px-10 max-w-6xl'>
98+
<h4 className='md:text-3xl lg:text-4xl font-semibold text-center'>
99+
<a href='https://vance.framer.website/' target='_blank' rel="noreferrer" className='underline decoration-[#f7ab0a]/50'>
100+
Case Study 2 of 7
101+
</a><br />
102+
Framer Design-to-Code
103+
</h4>
104+
105+
<div className='flex items-center space-x-2 justify-center'>
106+
<Image
107+
className=''
108+
width='32'
109+
height='32'
110+
src='https://cdn.sanity.io/images/wpot5oxi/production/5759295ae26a6cb3ec8288ab5ab008fb783c42b8-225x225.jpg'
111+
alt=''
112+
/>
113+
{/* <Image
114+
className=''
115+
width='32'
116+
height='32'
117+
src='https://cdn.sanity.io/images/wpot5oxi/production/f68c4842a21603dfefcb73515eacbae198e2f4af-820x820.png'
118+
alt=''
119+
/> */}
120+
{/* <Image
121+
className=''
122+
width='32'
123+
height='32'
124+
src='https://cdn.sanity.io/images/wpot5oxi/production/e7e787a5b9a83a7f553e144687b35418f87550ad-225x225.png'
125+
alt=''
126+
/> */}
127+
</div>
128+
129+
<p className='text-sm text-center md:text-left'>
130+
This is a demo showing a fully responsive page Framer website which was designed and converted to a fully coded website.
131+
</p>
132+
133+
</div>
134+
</div>
135+
25136
<div
26137
className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'
27138
>
@@ -41,7 +152,7 @@ export default function Projects({ }: Props) {
41152
<div className='space-y-1 px-0 md:px-10 max-w-6xl'>
42153
<h4 className='md:text-3xl lg:text-4xl font-semibold text-center'>
43154
<a href='https://artsy-julvan.netlify.app/' target='_blank' rel="noreferrer" className='underline decoration-[#f7ab0a]/50'>
44-
Case Study 1 of 5
155+
Case Study 3 of 7
45156
</a><br />
46157
Artsy
47158
</h4>
@@ -54,18 +165,18 @@ export default function Projects({ }: Props) {
54165
src='https://cdn.sanity.io/images/wpot5oxi/production/ab9ce9f0ba43b4f064bb281c0eaa90ad7d894a3e-200x174.png'
55166
alt=''
56167
/>
57-
<Image
168+
{/* <Image
58169
className=''
59170
width='32'
60171
height='32'
61172
src='https://cdn.sanity.io/images/wpot5oxi/production/f68c4842a21603dfefcb73515eacbae198e2f4af-820x820.png'
62173
alt=''
63-
/>
174+
/> */}
64175
<Image
65176
className=''
66177
width='32'
67178
height='32'
68-
src='https://cdn.sanity.io/images/wpot5oxi/production/8730d76efbd4a40490416180ab8389876feaca1c-225x225.png'
179+
src='https://cdn.sanity.io/images/wpot5oxi/production/e7e787a5b9a83a7f553e144687b35418f87550ad-225x225.png'
69180
alt=''
70181
/>
71182
</div>
@@ -96,7 +207,7 @@ export default function Projects({ }: Props) {
96207
<div className='space-y-1 px-0 md:px-10 max-w-6xl'>
97208
<h4 className='md:text-3xl lg:text-4xl font-semibold text-center'>
98209
<a href='https://homer-nine.vercel.app/' target='_blank' rel="noreferrer" className='underline decoration-[#f7ab0a]/50'>
99-
Case Study 2 of 5
210+
Case Study 4 of 7
100211
</a><br />
101212
Homer
102213
</h4>
@@ -152,7 +263,7 @@ export default function Projects({ }: Props) {
152263
<div className='space-y-1 px-0 md:px-10 max-w-6xl'>
153264
<h4 className='md:text-3xl lg:text-4xl font-semibold text-center'>
154265
<a href='https://zoidac.vercel.app/' target='_blank' rel="noreferrer" className='underline decoration-[#f7ab0a]/50'>
155-
Case Study 3 of 5
266+
Case Study 5 of 7
156267
</a><br />
157268
Zoidac Web3 Platform
158269
</h4>
@@ -162,14 +273,14 @@ export default function Projects({ }: Props) {
162273
className=''
163274
width='32'
164275
height='32'
165-
src='https://cdn.sanity.io/images/wpot5oxi/production/a564e80cbd4a740999df0aca27698eaf6a3f63cf-200x174.png'
276+
src='https://cdn.sanity.io/images/wpot5oxi/production/ab9ce9f0ba43b4f064bb281c0eaa90ad7d894a3e-200x174.png'
166277
alt=''
167278
/>
168279
<Image
169280
className=''
170281
width='32'
171282
height='32'
172-
src='https://cdn.sanity.io/images/wpot5oxi/production/8730d76efbd4a40490416180ab8389876feaca1c-225x225.png'
283+
src='https://cdn.sanity.io/images/wpot5oxi/production/e7e787a5b9a83a7f553e144687b35418f87550ad-225x225.png'
173284
alt=''
174285
/>
175286
{/* <Image
@@ -207,7 +318,7 @@ export default function Projects({ }: Props) {
207318
<div className='space-y-1 px-0 md:px-10 max-w-6xl'>
208319
<h4 className='md:text-3xl lg:text-4xl font-semibold text-center flex flex-col'>
209320
<a href='https://solana-pay-azure-eta.vercel.app/' target='_blank' rel="noreferrer" className='underline decoration-[#f7ab0a]/50'>
210-
Case Study 4 of 5</a>
321+
Case Study 6 of 7</a>
211322
Solana Pay
212323
</h4>
213324

@@ -260,8 +371,8 @@ export default function Projects({ }: Props) {
260371

261372
<div className='space-y-1 px-0 md:px-10 max-w-6xl'>
262373
<h4 className='md:text-3xl lg:text-4xl font-semibold text-center'>
263-
<span className='underline decoration-[#f7ab0a]/50'>
264-
Case Study 5 of 5</span><br />
374+
<a href='https://project-soundcode.netlify.app/' target='_blank' rel="noreferrer" className='underline decoration-[#f7ab0a]/50'>
375+
Case Study 7 of 7</a><br />
265376
Sound Code
266377
</h4>
267378

‎components/Skill.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,32 @@ function Skill({ directionLeft }: Props) {
244244
className='rounded-full border border-gray-500 object-cover w-20 h-20 filter group-hover:grayscale transition duration-300 ease-in-out'
245245
/>
246246
</div>
247+
248+
<div className='group relative flex cursor-pointer'>
249+
<motion.img
250+
initial={{
251+
x: directionLeft ? -200 : 200,
252+
opacity: 0
253+
}}
254+
transition={{ duration: 1 }}
255+
whileInView={{ opacity: 1, x: 0 }}
256+
src='https://cdn.sanity.io/images/wpot5oxi/production/2abfa77960ed051679ecd5b67c9c6ceba581a082-298x169.png'
257+
className='rounded-full border border-gray-500 object-cover w-20 h-20 filter group-hover:grayscale transition duration-300 ease-in-out'
258+
/>
259+
</div>
260+
261+
<div className='group relative flex cursor-pointer'>
262+
<motion.img
263+
initial={{
264+
x: directionLeft ? -200 : 200,
265+
opacity: 0
266+
}}
267+
transition={{ duration: 1 }}
268+
whileInView={{ opacity: 1, x: 0 }}
269+
src='https://cdn.sanity.io/images/wpot5oxi/production/5759295ae26a6cb3ec8288ab5ab008fb783c42b8-225x225.jpg'
270+
className='rounded-full border border-gray-500 object-cover w-20 h-20 filter group-hover:grayscale transition duration-300 ease-in-out'
271+
/>
272+
</div>
247273
</div>
248274
);
249275
}

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL