This is my personal portfolio website. I have implemented various features into it to showcase my abilities as a front-end developer. It features an original design and many unique elements and effects.
- Live Website: https://www.rashidshamloo.com
- react-next-tilt - used in the profile card, the contact form, the showcase page, the blog page, and the packages page
- react-flip-tilt - used in the showcase page and the packages page
- react-next-parallax - used in the showcase page, the packages page, and the error page
- swiper-mods - used in the slider in the showcase page
- next-intl - internationalization (i18n)
- budoux - line/word break for the Japanese version
- framer-motion - reveal animations and header glow animation
- @emailjs/browser - sending emails
- react-hook-form - form validation
- react-google-recaptcha - form reCAPTCHA
- next-themes - light/dark mode implementation
- theme-toggles - light/dark mode toggle
- hamburger-react - hamburger menu icon
- react-awesome-button - buttons
- highlight.js - syntaxt highlighting for blog posts
- react-syntax-highlighter - syntax highlighting component used in the packages page
- marked - markdown parsing
- typed.js - typewriter effect
- react-device-detect - device detection for disabling animation delay on mobile
- react-loading - loading animation
- react-scroll-parallax - parallax scroll section in the showcase page
- swiper - used in the slider in the showcase page
- react-icons - icons
- tailwindcss-3d - adding 3D transform classes to Tailwind
- zod - API response validation
- validator - string validation for blog slug
- @vercel/analytics - analytics
-
General Features
- Original light/dark design with many elements changing depending on the current mode
- Responsive design and implementation for complex/interactive elements
- English/Japanese internationalization (i18n) using next-intl
- Japanese line/word break using BudouX
- Header glow animation and reveal animations using Framer Motion
- "Scroll to top" button with light/dark mode and i18n support
- SEO, Asset, and performance optimizations
- All data is stored in JSON files and loaded dynamically for easy modification/scalibility
-
Pages
- Home
- Profile card with 3D tilt effect using react-next-tilt
- Dynamic/Changing background/theme on scroll (inspired by: linew.co.jp) and moving background on hover
- Showcase
- Full-page navigation ported from Clipboard Landing Page and converted from Material-UI to TailwindCSS and instead of using react-intersection-observer and refs, I used vanilla JavaScript Intersection Observer and data attributes for a better/cleaner implementation.
- Scroll snapping (proximity) to the top of the first section and center of other sections
- Multiple Showcase sections to showcase my packages/skills including the Japan-Slider section.
- Projects
- Mock laptop/mobile preview made from scratch with support for switching between light/dark theme images and scrollable mobile image
- Markdown parsing for the project desciption loaded from the JSON file
- Packages
- Usage instructions with syntax highlighting and light/dark mode support
- Demo for packages that need one
- Contact Me
- Contact form with 3D tilt effect using react-next-tilt
- Form components using Material UI with validation using react-hook-form
- Sending emails using EmailJS with reCAPTCHA v2 validation
- Interactive 3D postcard CSS effect with changing image based on light/dark mode (inspired by this video but made using Tailwind with adjustable number of segments)
- Dynamic paper element that reflects the sender's name/email
- Blog
- Fetching posts from Dev.to API using Redux Thunk and storing them in Redux store
- API response validation using Zod
- Featured Articles section based on custom JSON data and Popular Articles section based on article reaction count
- Fetching single blog posts on the server instead of client using server components
- Custom pagination component
- Styling blog posts using Tailwind for light/dark mode
- Syntax highlighting using highlight.js with light/dark mode support
- Home
-
Desktop
-
Dark
-
Light
-
-
Mobile
-
Dark
-
Light
-
-
Desktop
-
Dark
-
Light
-
-
Mobile
-
Dark
-
Light
-
-
General
- SVG patterns/backgrounds are from either Hero Patterns or Haikei and modified by me
- Background image is by Alexander Grey on Unsplash but heavily modified by me
-
Pages
- Home
- Icons are mostly from Devicon
- Technology background image by xresch on Pixabay and modified by me to be tilable
- Other images by:
- Ali Pazani on Pexels
- Luca Bravo on Unsplash
- Jeremy Yap on Unsplash
- Fadi Xd on Unsplash
- Showcase
- Vector illustrations in the parallax scroll section by craftpix.net
- Other vector illustrations by Yuliya Pauliukevich on vecteezy.com
- Flower Photos by:
- Markus Blüthner on Unsplash
- Benyamin Bohlouli on Unsplash
- Caroline O'Brien on Unsplash
- Laura Crowe on Unsplash
- Bonnie Kittle on Unsplash
- Benjamin Demian on Unsplash
- Plantpool images on Pexels
- Magda Ehlers on Pexels
- Oleksandra Bardash on Unsplash
- Summer Quinn on Unsplash
- Ashley Levinson on Unsplash
- Jacinto Diego on Unsplash
- Elliot Cullen on Unsplash
- Jeffry Surianto on Pexels
- Joshua J. Cotten on Unsplash
- kazuend on Unsplash
- Mohammad Mardani on Unsplash
- James Morden on Unsplash
- Sam Erwin on Unsplash
- Yoksel 🌿 Zok on Unsplash
- Projects
- Device mock images by Meta
- Contact Me
- Images by:
- Home
Rashid Shamloo
- Portfolio - rashidshamloo.com
- Linkedin - rashid-shamloo
- Twitter - @rashidshamloo
- Dev.to - @rashidshamloo