Welcome to my personalized developer portfolio — a clean, structured, and responsive website showcasing who I am, what I build, and how I think.
Designed with intention, engineered with clarity, and structured to scale.
This portfolio reflects my developer identity — built using a base template, but refactored to fit my standards. I focused on structured thinking, clarity of purpose, and frontend architecture inspired by Atomic Design.
🧠 Note: The primary focus of this project is not on visual design or content, but on the clean, scalable file structure and architecture. It's meant to reflect professional frontend habits — not just presentation.
- Modular codebase using .tsx, .styles.ts, and .types.ts conventions
- Atomic Design system: atoms → molecules → organisms → templates → views
- Fully responsive layout, optimized for both desktop and mobile
- Organized project sections with GitHub source code links
- Framework: React (with Vite)
- Language: TypeScript
- Styling: styled-components
- Routing: React Router
src/
├── assets/ # Icons, images, and global styles (globalStyles/theme.ts)
├── components/ # UI atoms, molecules, organisms
├── context/ # App state (e.g. mobile nav visibility)
├── helpers/ # Utility functions and reusable logic
├── root/ # Root layout and shared structural elements
├── routes/ # Route management
├── templates/ # Layout & content structure templates
└── views/ # Full-page views (aboutView, projectsView, etc.)🔗 Hosted at: alae-gijutsu.vercel.app
Explore it on mobile, tablet, and desktop — it's made to be pixel-consistent across viewports.
| Project | Stack | Description |
|---|---|---|
| 📊 Toki | React + Spring Boot | Pomodoro task manager with real-time sessions |
| 🏰 Hassan Tower VR | Unity + C# | Immersive Moroccan heritage site simulation |
| 🎓 Student Advisor | JavaFX + MySQL | Academic advisor desktop tool |
| 💼 Portfolio | React + styled-components | This portfolio — modularized and personalized |
Clone the repo and run it locally:
git clone https://github.com/Alae-J/portfolio
cd portfolio
npm install
npm run dev- Node.js
- Vite
- Navigate through top bar or scroll through each section
- Fully responsive — explore across devices
- 📧 Email: alaejahid8@gmail.com
- 💻 GitHub
技術 (Gijutsu) meets 美学 (Bigaku): Code meets aesthetics ⚙️