A modern, interactive personal portfolio and home center built with cutting-edge web technologies. Features smooth animations, a custom canvas-based node visualization, and a fully responsive design.
This is the source code for elias4044.com — a portfolio that showcases my work in full-stack development, creative coding, and modern web design. The site combines thoughtful UX, clean architecture, and interactive visual elements to create an engaging experience.
- Interactive Canvas Visualization — Custom WebGL/Canvas-based node system
- Smooth Animations — Polished transitions powered by Framer Motion and GSAP
- Responsive Design — Optimized for all screen sizes
- Magnetic Cursor — Custom interactive cursor effects
- Modern Stack — Next.js 16, React 19, Tailwind CSS, and TypeScript
- Framework — Next.js 16
- Runtime — React 19 with React Server Components
- Styling — Tailwind CSS with custom utilities
- Animations — Framer Motion & GSAP
- UI Components — Radix UI (Accordion, Dialog, Tabs, Toast, Tooltip, etc.)
- Icons — Lucide React
- Database & Auth — Firebase & Firebase Admin SDK
- Hosting — Vercel (with Edge Functions support)
- Package Manager — Node.js
- Code Quality — Biomejs
- TypeScript — Strict mode for type safety
- Compiler — Next.js React Compiler enabled for optimal performance
Optionally for local usage/development
Ensure you have Node.js installed (version 18 or higher recommended).
# Clone the repository
git clone https://github.com/elias4044/home.git
cd home
# Install dependencies
npm installStart the development server:
npm run devOpen http://localhost:3000 in your browser to see the site.
Build for production:
npm run build
npm startFormat and check code:
npm run lint # Check code with Biomejs
npm run format # Format code with Biomejs├── app/ # Next.js app directory
│ ├── page.tsx # Main homepage
│ ├── layout.tsx # Root layout
│ ├── globals.css # Global styles
│ └── api/ # API routes
│
├── components/ # React components
│ ├── hero-section.tsx # Landing section
│ ├── about-section.tsx # About me section
│ ├── projects-section.tsx # Work showcase
│ ├── connect-section.tsx # Contact/CTA section
│ ├── navigation.tsx # Main navigation
│ ├── node-canvas.tsx # Interactive canvas
│ ├── magnetic-cursor.tsx # Custom cursor effect
│ ├── theme-provider.tsx # Dark/light theme
│ ├── footer.tsx # Footer
│ │
│ │
│ └── ui/ # Shadcn-style UI primitives
│ ├── button.tsx
│ ├── card.tsx
│ ├── tabs.tsx
│ └── ...
│
├── hooks/ # Custom React hooks
│ ├── use-in-view.ts # Intersection observer hook
│ ├── use-mobile.ts # Mobile detection hook
│ └── use-toast.ts # Toast notifications hook
│
├── lib/ # Utilities & helpers
│ └── utils.ts # Shared utility functions
│
├── public/ # Static assets
│
└── package.json # Project metadata & dependencies
The landing section with animated introduction, status indicator, and call-to-action. Features mount animations and smooth transitions.
Detailed background with:
- Multi-paragraph narrative about background and philosophy
- Technology skills with hover effects
- Interests and focus areas
- Intersection observer-based animations
Showcase of work with:
- Project cards with descriptions and tech tags
- Live links and status indicators (live, in-progress, archived)
- Responsive grid layout
- Node Canvas — Custom WebGL visualization of interconnected nodes
- Magnetic Cursor — Custom cursor that follows and interacts with elements
- Smooth Scrolling — Active section navigation based on scroll position
The site is deployed on Vercel and automatically deploys when changes are pushed to the master branch.
See vercel.json for deployment settings.
The site uses Tailwind CSS with custom theme configuration in tailwind.config.js. Modify color variables to customize the appearance.
- Update hero section text in
components/hero-section.tsx - Modify projects array in
components/projects-section.tsx - Edit about content in
components/about-section.tsx - Change navigation items in
components/navigation.tsx
All sizing and spacing uses Tailwind's utility classes. Adjust in component files or update the base Tailwind configuration.
The site is optimized for all modern browsers:
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- React Compiler — Enabled for automatic optimization
- Image Optimization — Next.js built-in image optimization
- Code Splitting — Automatic with Next.js App Router
- CSS Efficiency — Tailwind CSS with PurgeCSS
This project is licensed under the MIT License — see the LICENSE file for details.
Elias Gulam
- Website: elias4044.com
- Email: elias4044@proton.me
- GitHub: @elias4044
While this is a personal project, feedback and suggestions are always welcome. Feel free to open an issue or reach out with ideas.
- Radix UI for accessible component primitives
- Tailwind CSS for utility-first styling
- Framer Motion for smooth animations
- GSAP for advanced animation capabilities
- Next.js for the modern React framework