evin.dev - my portfolio website

---

hey @stardance pls read this 👀

[!IMPORTANT]

TRY THE LIGHT MODE PLEASEEE

i spent so much time on this so dont skip it lol. if u switch from the dark terminal vibe to light mode it become like a orange neo-brutalist style and i think its actually really cool.

just click the toggle button top right (it say LIGHT/DARK when your in dark mode, or its a little moon/sun icon when your in light mode already). trust me on this one 🙏

---

what even is this

this is my developer portfolio website i made. its suppose to show my real projects, like frontend stuff, some AI workflow experiments, and also some hardware stuff i tried.

it has two themes basically:

• light mode (neo-brutalist): bright orange background, thick borders, theres a 3D tv screen thing, tape stickers, and a custom cursor that moves weird (magnetic). this one is my favorite tbh

• dark mode (retro arcade / 8bit): has stars in background, cyan neon lines, pixel font (VT323), green terminal boxes, feels like a old arcade game

---

how to run this on your computer

if u wanna try running it yourself here how you do it:

step 1: install the stuff it needs

npm install

step 2: make a env file

you need to make a .env.local file in the main folder, put this inside:

# this is needed to get into the admin page (/admin)

ADMIN_PASSWORD=your_epic_password



# not required but helps so github api dont rate limit you

GITHUB_TOKEN=your_github_personal_token

step 3: start it up

npm run dev

then just go to http://localhost:3000 in ur browser and it should be running!

---

what i built it with

• Next.js - for the framework, using app router and stuff

• Tailwind CSS - for styling, i also wrote some custom css on top

• GSAP + Framer Motion - for the animations and scroll effects

• Three.js (react three fiber) - for the 3D/glitch shader stuff

• Lucide React - just for icons, simple ones

---

how the folders are organized

• app/ - all the next.js pages and routes

• /about - about me page

• /contact - contact form page

• /works - my projects page, pulls from github too

• components/ - all my react components (navbar, cards, etc)

• data/ - json files and stuff for storing project info

• lib/ - helper functions, auth stuff, api rate limiting code

---

if your reviewing my PR

1. make sure you added the .env.local file with the variables

2. run npm run build to check both themes still work and it compiles fine

3. then commit and push, thats basically it!

---

AI usage

so i gotta be honest about what i did myself vs what AI helped with:

me (evin):

• picked all the tech stack (next.js, tailwind, gsap, three.js)

• wrote most of the actual code myself, the components, hooks, layouts, animations

• came up with the whole design idea for both themes, colors, fonts, how everything looks

antigravity (AI assistant i used):

• helped me fix a annoying bug where the theme toggle wasnt working right (had to switch from theme to resolvedTheme)

• helped build out the dark mode versions of my about and contact pages, i told it the layout i wanted

• cleaned up some old unused files i didnt need anymore (Hero.tsx, About.tsx, Contact.tsx, InteractivePortrait.tsx, and a Ref folder)