RC Portfolio

Stylized over-engineered portfolio, art deco & clockwork.

Comment

Inspiration

I'm in my art deco phase :D

References: Art Deco, Great Gatsby, Arcane, Game UI, 90s sakuga mecha illustrations, clocks and watches, @uxui_howard.le on Instagram, websites (modrinth, github, linear, supahero.io, godly.website, site of sites, colossal)

What it does

Displays my achievements, projects, and relevant contacts on an art-deco styled website

How I built it

Design: Figma, Fontspace, same.energy, real time colors, coolors

Development: Next.js, Typescript, Tailwind CSS, Framer Motion.dev, React PDF, EmailJS, Google ReCAPTCHA; svgr playground, Tailwind Gen, 21st.dev, pqoqubbw icons, Cursify

Deployment: Vercel

Challenges I ran into

Security auditing for email sending (input sanitation, rate limiting, RECAPTCHA, etc.)

Accomplishments that I'm proud of

Custom UI components

dynamically resizing SVG elements

consistent theming

playful elements: time-accurate clock, spinning cogs when scrolling, gold borders/plates that glow relative to mouse position, follow cursor with </>, various motion.dev animations, projects accordion

multithreaded site rendering (separate for cursor follow elements, glow effects, etc.)

What I learned

Full frontend development process, from design to deployment

What's next for RC Portfolio

Populating projects pages and bento boxes with dynamically updating statistics, more intuitive project pages generation, better CAPTCHA implementation, style refining, improved mobile responsiveness, site performance optimizations, smooth scroll effects with Lenis

Built With

  • email-js
  • google-recaptcha
  • motion.dev
  • nextjs
  • react
  • react-pdf
  • tailwindcss
  • typescript
Share this project:

Updates