Nojin's Programming Portfolio

This is the official programming portfolio of Raffi Aqsan (Nojin). This portfolio showcases various projects, skills, and contact information. The website is built with Next.js, Framer Motion, and integrates Google reCAPTCHA for secure form submissions.

Table of Contents

• Features
• Technologies
• Setup
• Environment Variables
• Usage
• Acknowledgements

Features

• Responsive design
• Smooth scrolling and animations with Framer Motion
• Lazy loading images
• Google reCAPTCHA v3 for form submission
• SEO optimized
• Beautiful loading screen

Technologies

• Next.js
• Tailwind CSS
• Framer Motion
• Google reCAPTCHA v3
• Nodemailer
• Vercel Analytics

Setup

To run this project, follow these steps:

1. Clone the repository:

   git clone https://github.com/NojinNojs/nojin-portfolio-next.git
   cd nojin-portfolio-next

2. Install dependencies:

   npm install

3. Create a .env file in the root directory and add the required environment variables, as shown in .env.example.

4. Run the development server:

   npm run dev

Environment Variables

Create a .env file in the root directory and add the following variables:

NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your-recaptcha-site-key
RECAPTCHA_SECRET_KEY=your-recaptcha-secret-key
GMAIL_USER=your-gmail-username
GMAIL_PASS=your-gmail-password
REACT_APP_INSTAGRAM_PROFILE_URL=your-instagram-url
REACT_APP_DISCORD_PROFILE_URL=your-discord-url
REACT_APP_GITHUB_USERNAME=your-github-username
NEXT_PUBLIC_EMAIL=your-public-email

Usage

Navigate to http://localhost:3000 to view the portfolio.

Acknowledgements

This portfolio website was made possible by the following:

• Next.js: For providing a robust framework to build server-side rendered React applications.
• Tailwind CSS: For offering utility-first CSS that makes styling much easier and faster.
• Framer Motion: For enabling smooth and delightful animations.
• React Google reCAPTCHA v3: For adding security to the contact form.
• Nodemailer: For handling email sending functionality.
• Vercel Analytics: For providing insights into the website's usage and performance.
• React Icons: For providing a wide range of icons used across the website.
• React Medium Image Zoom: For the zoom functionality on images.
• React Responsive Carousel: For the responsive carousel implementation.
• Day.js: For handling date and time calculations with ease.
• Dicoding Academy: For the certifications and learning resources.
• Google Fonts: For the beautiful fonts used across the website.
• Trakteer: For providing a platform to receive support and donations.
• Icons8: For providing the technology icons used in the About section.

Special thanks to the open-source community for continuously contributing to the development and improvement of these technologies.

Last but not least, heartfelt thanks to all the users and supporters of this website. Your support and feedback are invaluable.

---

Raffi Aqsan (Nojin)