The second iteration of larsejaas.com built with Astro and deployed on Netlify
I'm dedicated to keeping this project open-source, mainly as a source of inspiration for other developers looking to build their own personal websites. However, I've invested significant time and effort into designing and developing this version of the site, and I'm proud of the outcome.
Please note:
- Do not claim this work as your own.
- This repository is not intended to be an Astro starter theme.
- If you need assistance with Astro, please refer to their official documentation.
To summarize: Feel free to fork this repository for inspiration on creating your own portfolio! Just be sure to create your own unique site and credit me by linking back to larsejaas.com if you directly re-use parts of my code.
Thank you for understanding and respecting my work!
My journey with this site began in May 2021 when I launched the first version built with Gatsby. At that time, React was new to me, I had no idea about TypeScript, and coding was a fun hobby.
Fast-forward to today, and I've grown significantly as a developer.
Working professionally in the field has allowed me to build numerous exciting projects and expand my knowledge base.
While I typically would choose to build a bage like with a React framework like Nextjs, I decided to challenge myself by building this site using Astro without any JavaScript framework and without any CSS framework either.
- Node.js (v22.7 or higher)
- npm
- Git
- A Gmail account for SMTP services
- Netlify CLI (v23.13.3 or later) - making it possible to debug serverless functions locally.
- Install the Netlify CLI globally:
npm install -g netlify-cli
- Install the Netlify CLI globally:
- Astro - vscode:extension/astro-build.astro-vscode
- Prettier Code Formatter - vscode:extension/esbenp.prettier-vscode
- ESLint - vscode:extension/dbaeumer.vscode-eslint
- CSS Variable Autocomplete - vscode:extension/vunguyentuan.vscode-css-variables
- SVG - vscode:extension/jock.svg
- XML Tools - vscode:extension/DotJoshJohnson.xml
- CSS Modules - vscode:extension/clinyong.vscode-css-modules
Clone the repository to your local development environment:
git clone https://github.com/LarsEjaas/lars-ejaas-portfolio-v2.gitNavigate to the project directory:
cd lars-ejaas-portfolio-v2Install dependencies:
npm installCreate an .env file in the root directory and inspect the .env.example file in the root of the project for the required environment variables.
Install the pre-commit hook (you can skip this step if you do not plan to commit code):
npx husky installStart the development server:
netlify devThat's it!
The project is intentionally simple, with no JavaScript frameworks, no CSS frameworks, and limited use of JavaScript in the browser.
- Explore Astro, a framework I've heard great things about but never used before.
- Implement and experiment with new CSS features, including:
- CSS container queries
- CSS nesting
- The light-dark CSS color function
- animation-timeline
- Cascade layers
- View Transitions API
- Popover API
- Enhance accessibility and gain more experience with screen readers.
- Create a progressively enhanced page that functions fully when JavaScript is disabled or unavailable.
- No use of JavaScript frameworks for this one! Let's see how far I can get with Vanilla JavaScript and Web Components!
- Maintain the previous design and color scheme while improving areas that needed a face-lift.
- Focus the site on my professional career - but also include a bit about myself and my sports background.
- The
node scripts in this projectrequires Node v22.7.0 or later because it relies on the experimental--experimental-transform-typesflag to run TypeScript files within an npm script. - All TypeScript files with the .mts extension are optimized for both the project itself and for use in npm scripts.
- You can use the XML Tools extension to format sitemap files to be human readable in VSCode directly. Go to the command palette and select:
XML Tools: Format as XML. This can be useful if you want to inspect thesitemap-0orsitemap-index.xmlsitemap files in thedistfolder. - TypeScript errors after build? The Astro VS Code extension sometimes crashes during builds, causing false type errors.
Fix: Open Command Palette (
Cmd + Shift + Pon Mac,Ctrl + Shift + Pon Windows/Linux) and runDeveloper: Restart Extension Host
You can create a local build by running:
npm run build
If you want to compare bundle sizes with production (including Brotli compression), you can instead run:
npm run build-minified
This command produces a minified version of all JavaScript files.
Once the build is complete, you can serve it locally with:
npm run serve-build
I'm grateful to the following developers whose content has inspired me in creating this site:
| Thanks to | Description |
|---|---|
| Jhey Tompkins | A major inspiration for diving into the latest CSS features. His Infinite Marquee Codepen inspired my refactored overview of development skills using CSS animations. Check out his page at jhey.dev |
| Adam Argyle | An excellent resource for guides and updates on new CSS features. His Responsive app switcher carousel on CodePen inspired improvements to my existing carousel implementation using scroll-timeline animations. Check out his page at nerdy.dev |
| Kirupa Chinnathambi | Inspired the animation of floating balloons on my page, combining CSS and JavaScript to replace the previously used GSAP library with a lighter solution. Check out his page at kirupa.com |
January 30th 2026
- Job update: Now at BoligPortal
- Added image fade-in with blur placeholders and TypeScript types for CSS modules
- New theme toggle with system support (moved to footer)
- Improved view-transitions and contact form loading state
- Removed Bluesky integration, bug fixes, and cleanup
If you have any questions or feedback, feel free to write to me using my contact form at: https://larsejaas.com/contact