Space-Themed Portfolio Website Creation

Overview

• Project involves creating a space-themed portfolio website.
• Technologies Used:
  • Next.js
  • TypeScript
  • Framer Motion for animations
  • Three.js (3GS) for star background
  • Fully mobile responsive design.

Step 1: Setting Up the Project

• Create a folder named space portfolio (no capital letters).
• Open folder in Visual Studio Code.
• Initialize a Next.js app:
  • Open terminal in VS Code.
  • Run the command from the official Next.js website.
• Select options during setup: TypeScript (yes), other options as necessary.

Step 2: Installing Required Packages

• Run the following command to install packages: npm install --save-dev framer-motion three react-intersection-observer @react-three/drei @react-three/fiber
• Start the development server: npm run dev

Step 3: Project Structure

• In the app directory:
  • Modify page.tsx:
    • Clear the return statement to display 'space portfolio'.
  • Modify globals.css:
    • Retain only the top three lines to use Tailwind CSS.

Step 4: Layout and Background

• Modify the layout:
  • Set body class: bg-[#30014F] overflow-y-scroll overflow-x-hidden.
  • Create a main section with a full height and width.
• Create a Hero component:
  • Create a components folder, adding Hero.tsx.
  • Use a video background with attributes: autoplay, muted, loop.

Step 5: Hero Content

• Create HeroContent.tsx in the components folder:
  • Import motion from framer-motion.
  • Set initial and animate properties for animations.
  • Add text and styles, including a gradient text effect.

Step 6: Star Background

• Create StarBackground.tsx for the star canvas using Three.js:
  • Import necessary hooks and components from React and Three.js.
  • Create functions for generating star positions and animations.

Step 7: Navigation Bar

• Create Navbar.tsx:
  • Style the navigation bar with class names and include logos.
  • Implement links for navigation.

Step 8: Skills Section

• Create Skills.tsx:
  • Implement layout and component structure to display icons using a Skills data provider.
• Create SkillText.tsx for displaying descriptive text.

Step 9: Encryption Section

• Create Encryption.tsx:
  • Set styles for the encryption section.
  • Add video backgrounds and animations for secure data representation.

Step 10: Projects Section

• Create Projects.tsx and ProjectCard.tsx:
  • Implement layout to display project images with titles and descriptions.

Step 11: Footer

• Create Footer.tsx:
  • Style footer and include social media links.
  • Add contact information.

Step 12: Testing and Deployment

• Ensure the website is mobile responsive and all elements work as intended.
• Deploying the website:
  • Create a GitHub repository for the project.
  • Push local changes to the GitHub repository.
  • Use Vercel for deployment, connecting the GitHub repository.
• Confirm the website is live and operational.

Conclusion

• Successfully created and deployed a fully functional space-themed portfolio website.