Azril Januar Athallah — Portfolio

My personal portfolio site, built with Next.js and Tailwind CSS. It showcases my background as an Informatics Engineering graduate, the projects I've built, and a way to get in touch.

Live site: https://portfolio-azril.vercel.app/

Sections

• Hero — intro, social links, and quick contact/resume actions
• About — background summary and quick highlights
• Education — S1 Teknik Informatika at Universitas Brawijaya
• Experience — internship and work history
• Skills — frontend, backend, database, and tooling, each with a matching icon
• Projects — featured work with tech stack, key features, challenges, and results, opened in a detail modal
• Contact — a working contact form that emails me directly (via EmailJS), plus direct links to email, LinkedIn, GitHub, and WhatsApp

Tech stack

• Framework: Next.js (App Router) + React 19 + TypeScript
• Styling: Tailwind CSS
• Animation: Framer Motion
• Icons: lucide-react, react-icons
• Contact form: EmailJS (@emailjs/browser)

Getting started

1. Clone and install

git clone https://github.com/azrilathallah/Portfolio.git
cd Portfolio
npm install

2. Set up environment variables

The contact form sends email through EmailJS, which needs three keys. Create a .env.local file in the project root:

NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key

You can get these by creating a free account at emailjs.com, then setting up an email service and a template. .env.local is already gitignored, so your keys won't be committed.

3. Run the dev server

npm run dev

Open http://localhost:3000 to view it.

Project structure

src/
├── app/                  # Next.js App Router entry (layout, page, global styles)
├── components/           # Section components (Hero, About, Education, Experience,
│                          # Skills, Projects, Contact, Footer, Navbar, etc.)
└── data/                 # Content as data: projects.ts, skills.ts, experience.ts, techIcons.tsx

Most content (projects, skills, experience) lives in src/data/ as plain TypeScript objects, so updating the site's content usually just means editing the relevant file there rather than touching component code.

Available scripts

Command	Description
npm run dev	Start the development server
npm run build	Build for production
npm run start	Run the production build
npm run lint	Run ESLint

Deployment

The easiest way to deploy is Vercel, the platform built by the creators of Next.js. Remember to add the same NEXT_PUBLIC_EMAILJS_* environment variables in your deployment settings, or the contact form won't work in production.

Contact

• Email: azrilathallah26@gmail.com
• LinkedIn: Azril Januar Athallah
• GitHub: @azrilathallah