Welcome! I’m Aakansha- a Computer Science graduate from Rutgers and this site is my personal showcase. Built with Vite, React, and Tailwind CSS, it highlights who I am, what I build, and even what I listen to while coding. Below are simple instructions to get you started, plus a quick overview of how things fit together.
-
Get the code If you have the ZIP, unzip it. Otherwise, clone the repository:
git clone <your-repo-url> cd arcane-coder-legacy-main
-
Install dependencies
npm install
(Or use
yarn installif you prefer Yarn.) -
Run the development server
npm run dev
Vite will tell you the local address (often
http://localhost:5173/). Open that in your browser to see the portfolio live. -
Build for production (optional)
npm run build
This creates a
dist/folder that you can deploy as a static site (Netlify, Vercel, etc.). To preview that build locally:npm run preview
- Replace the existing
favicon.ico(in the public folder) with your ownfavicon.ico. - Restart the dev server and do a hard refresh (⌘+Shift+R) so your browser loads the new icon.
- Export your portrait image from Photos (e.g., as
Aakansha.jpg) and save it in the public/placeholder location. - In the “The Journey So Far” component, the code automatically looks for that placeholder image. Once you put your file there, it will display your circular headshot at the top of that section.
- In Spotify, open your playlist → click the three dots → Share → Embed Playlist → Copy the embed code.
- In the “Dev Beats” component (under components/ui), locate the playlist entries and replace their URLs with your own embed links. Adjust the iframe height if needed (152px or 352px, depending on Spotify’s snippet).
- Save and refresh; you’ll see your custom Spotify player under “Dev Beats.”
-
The “Send A Signal” section contains links to GitHub, LinkedIn, and your email. Simply replace those placeholder URLs with:
- GitHub:
https://github.com/aakansha016 - LinkedIn:
https://www.linkedin.com/in/aakansha-choudhary-317112243/ - Email:
mailto:[email protected]
- GitHub:
-
Save and refresh; clicking those links will take visitors directly to your profiles or open their email client.
-
Magical Landing A vibrant hero section with a glowing title and custom background.
-
The Journey So Far Animated paragraphs that fade in one by one, with sparkly hover effects. At the top, your portrait appears once you place your image in the placeholder.
-
Weapons of Choice A badge‐style display of your tech stack (React, TypeScript, Tailwind, Node.js, etc.).
-
Quests Completed A scroll‐triggered project showcase. Each card animates into view and reveals more details on hover.
-
Mirror of Dreams Cards showing your current big goals (Master’s, Move to Miami, etc.), each with a subtle flip‐card effect.
-
Deck of Paths Future ambitions laid out as visually engaging cards that shuffle in as you scroll.
-
Send A Signal A clean “footer” area with links to GitHub, LinkedIn, and email—your main contact points.
-
The Forge (Dev Beats) Three Spotify playlists (Morning Focus, Night Owl, Weekend Chill). Tabs let visitors switch between them, and an animated bio appears beside the player.
All components under components/ui handle things like the Spotify embed and animated text. If you want to tweak animations or styling, that’s the place to look.
-
npm run devStarts the Vite dev server. Open the local address it shows. -
npm run buildBundles the site into adist/folder, optimized for production. -
npm run previewServes the production build locally so you can verify everything before deploying.
- If a change doesn’t appear, make sure to restart the dev server and do a hard refresh in your browser.
- Favicons are heavily cached—double‐check your public
favicon.icoand refresh. - If Tailwind styles aren’t loading, verify that
tailwind.config.tsincludes all your component folders for scanning.
Questions or feedback? Feel free to open an issue, or email me directly at [email protected]. Thanks for visiting, and enjoy exploring my work!