Daniel Lauding + Portfolio #51
+5,548
−37
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| # Dependencies | ||
| node_modules | ||
|
|
||
| # Build outputs | ||
| dist | ||
| build | ||
| *.min.js | ||
|
|
||
| # Package files | ||
| package-lock.json | ||
| yarn.lock | ||
| pnpm-lock.yaml | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| { | ||
| "semi": false, | ||
| "singleQuote": true, | ||
| "tabWidth": 2, | ||
| "trailingComma": "es5", | ||
| "printWidth": 100, | ||
| "arrowParens": "avoid", | ||
| "endOfLine": "lf" | ||
| } | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,245 @@ | ||
| # 🌟 Frontend Portfolio Website | ||
|
|
||
| ## 🔗 Live Site | ||
|
|
||
| **[technigo.daniellauding.se](https://technigo.daniellauding.se)** | ||
|
|
||
| > This is my **Technigo frontend development portfolio** showcasing my JavaScript and React skills. | ||
|
|
||
| --- | ||
|
|
||
| ## 👋 About | ||
|
|
||
| Hi! I'm Daniel, and this is my **Technigo frontend portfolio** where I show off my projects and tell you about myself! | ||
|
|
||
| ### Other Portfolios | ||
|
|
||
| - **🎨 Design Portfolio:** [daniellauding.se](https://www.daniellauding.se) - My main design portfolio | ||
| - **📐 Recent Projects (Figma):** [View in Figma](https://www.figma.com/proto/ITcLm3ciPq4G5qkKP6q1d9/instinctly-selected-work?page-id=624%3A457&node-id=624-458&p=f&viewport=-9839%2C-1808%2C0.66&t=aXOv3ONToAEWFkFK-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=624%3A458) - Recent selected work | ||
|
|
||
| --- | ||
|
|
||
| ## 🎯 What This Website Does | ||
|
|
||
| This is like my digital business card! It shows: | ||
|
|
||
| - **Who I am** - A person who loves building websites | ||
| - **What I've built** - Cool projects I've made | ||
| - **My thoughts** - Things I think about when making websites | ||
| - **How to contact me** - So we can chat about making cool stuff together! | ||
|
|
||
| --- | ||
|
|
||
| ## 🧸 Why I Built My Own Design Library | ||
|
|
||
| ### Like LEGO Blocks! | ||
|
|
||
| You know how LEGO blocks can build anything? I made my own "website LEGO blocks" because: | ||
|
|
||
| ### 🎨 It's Like Having My Own Crayon Box | ||
|
|
||
| - Instead of using someone else's colors, I made my own! | ||
| - Every button, text, and picture looks exactly how I want | ||
| - It's like having a magic crayon that always draws the same shade of blue | ||
|
|
||
| ### 🔧 Building Blocks That Fit Together | ||
|
|
||
| - I made pieces like `<Button>`, `<Text>`, and `<Section>` | ||
| - They all work together like puzzle pieces | ||
| - When I want to change something, I only need to change it in one place! | ||
|
|
||
| ### 🚀 It Makes Building Websites Super Fast | ||
|
|
||
| - Instead of drawing a new button every time, I just use my `<Button>` block | ||
| - It's like having a stamp instead of writing the same word over and over | ||
|
|
||
| --- | ||
|
|
||
| ## 💭 My Thoughts About Code | ||
|
|
||
| ### Code Should Be Like a Good Story | ||
|
|
||
| - Easy to read and understand | ||
| - Each part has a clear purpose | ||
| - Anyone should be able to follow along | ||
|
|
||
| ### Keep Things Simple | ||
|
|
||
| - Don't use big fancy words when small ones work | ||
| - Make one thing do one job really well | ||
| - Clean up your toys (code) when you're done! | ||
|
|
||
| ### Be Kind to Future You | ||
|
|
||
| - Write code like you're leaving notes for a friend | ||
| - Tomorrow-you will thank today-you for being clear | ||
| - Comments are like sticky notes that explain tricky parts | ||
|
|
||
| --- | ||
|
|
||
| ## 📋 Planning with Plotta | ||
|
|
||
| Before building this website, I used **[Plotta](https://app.plotta.io)** to plan out the entire project! | ||
|
|
||
| ### What is Plotta? | ||
|
|
||
| **Plotta is my own project** - a planning tool I created with AI assistance (Claude) that helps organize projects using digital sticky notes. It's like having a virtual whiteboard where you can plan, organize, and visualize complex projects before diving into code. | ||
|
|
||
| ### How I Used It | ||
|
|
||
| Plotta helped me: | ||
| - **Organize my thoughts** - Structure all the components and features | ||
| - **Visualize the architecture** - See how everything would fit together | ||
| - **Plan the user flow** - Map out the entire user experience | ||
| - **Break down tasks** - Organize development into manageable pieces | ||
|
|
||
| ### Explore the Planning Process | ||
|
|
||
| 🔗 **View the Project Plan:** [Plotta Project](https://app.plotta.io/project/43f72570-e844-4280-9865-c3e37dc1f60d) | ||
| 🔑 **Password:** `technigo` | ||
|
|
||
| > 💡 **Tip:** Feel free to register and explore the planning process yourself! It's a great tool for organizing complex projects, and you can see exactly how I planned this portfolio before building it. | ||
|
|
||
| --- | ||
|
|
||
| ## 🏗️ How I Built This | ||
|
|
||
| ### The Foundation (Like Building a House) | ||
|
|
||
| 1. **React** - The main tool that makes everything work | ||
| 2. **TypeScript** - Helps catch mistakes before they happen | ||
| 3. **Styled Components** - Makes everything look pretty | ||
| 4. **My Design System** - All my LEGO blocks working together | ||
|
|
||
| ### The Special Features | ||
|
|
||
| - **Accessibility First** - Everyone can use my website, no matter how they browse | ||
| - **Mobile Friendly** - Works great on phones and big computers | ||
| - **Fast Loading** - Nobody likes waiting for slow websites! | ||
| - **Dark Mode** - Easy on your eyes when browsing at night 🌙 | ||
| - **Interactive Design System** - Browse all components in the StyleGuide | ||
|
|
||
| --- | ||
|
|
||
| ## 🎨 Why Simple Design Works | ||
|
|
||
| Think of your favorite toy. It's probably not the one with a million buttons and lights that confuse you. It's the simple one that just works perfectly. | ||
|
|
||
| That's what I did here: | ||
|
|
||
| - **Clean colors** that are easy on your eyes | ||
| - **Clear text** that's easy to read | ||
| - **Simple navigation** so you never get lost | ||
| - **Fast loading** because waiting is boring | ||
|
|
||
| --- | ||
|
|
||
| ## 🤝 What Makes Good Code | ||
|
|
||
| ### The Secret Recipe | ||
|
|
||
| #### Like Organizing Your Room | ||
|
|
||
| - Put similar things together | ||
| - Give everything a clear name | ||
| - Clean up regularly | ||
| - Make it easy to find stuff later | ||
|
|
||
| #### Like Writing a Letter | ||
|
|
||
| - Use clear, simple words | ||
| - One idea per paragraph (function) | ||
| - Check your spelling (no bugs!) | ||
| - Make it nice to read | ||
|
|
||
| #### Like Being a Good Friend | ||
|
|
||
| - Be consistent and reliable | ||
| - Don't surprise people in bad ways | ||
| - Help others understand what you're doing | ||
| - Share your toys (code) with others | ||
|
|
||
| --- | ||
|
|
||
| ## 🌱 What I Learned | ||
|
|
||
| Building this taught me that: | ||
|
|
||
| - Small, simple pieces can build amazing things | ||
| - Planning first saves time later (thanks Plotta!) | ||
| - Making it accessible means everyone can enjoy it | ||
| - Clean code is like a gift to your future self | ||
|
|
||
| --- | ||
|
|
||
| ## 🚀 Quick Start | ||
|
|
||
| ```bash | ||
| # Install dependencies | ||
| npm install | ||
|
|
||
| # Start development server | ||
| npm run dev | ||
|
|
||
| # Build for production | ||
| npm run build | ||
|
|
||
| # Preview production build | ||
| npm run preview | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 📁 Project Structure | ||
|
|
||
| ``` | ||
| src/ | ||
| ├── components/ # Reusable UI components | ||
| ├── views/ # Page components | ||
| ├── styles/ # Global styles and themes | ||
| ├── utils/ # Helper functions | ||
| └── data/ # Static data (projects, skills, etc.) | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 🎨 Features | ||
|
|
||
| - **Component-Based Architecture** - Modular, reusable components | ||
| - **TypeScript** - Type-safe development | ||
| - **Styled Components** - CSS-in-JS styling | ||
| - **Dark/Light Theme** - Toggle between themes | ||
| - **Responsive Design** - Mobile-first approach | ||
| - **Accessibility** - WCAG 2.1 AA compliant | ||
| - **SEO Optimized** - Meta tags and semantic HTML | ||
| - **Performance** - Lazy loading and optimized assets | ||
| - **Scroll Animations** - Smooth fade-in animations with animate.css | ||
| - **Open Graph Tags** - Beautiful social media previews | ||
|
|
||
| --- | ||
|
|
||
| ## 🛠 Tech Stack | ||
|
|
||
| - **React 18** - UI library | ||
| - **TypeScript** - Type safety | ||
| - **Vite** - Build tool | ||
| - **Styled Components** - Styling | ||
| - **React Router** - Routing | ||
| - **Animate.css** - Scroll animations | ||
| - **ESLint & Prettier** - Code quality | ||
|
|
||
| --- | ||
|
|
||
| ## 📝 License | ||
|
|
||
| This project is open source and available for learning purposes. | ||
|
|
||
| --- | ||
|
|
||
| <div align="center"> | ||
|
|
||
| **Made with ❤️ by Daniel** | ||
|
|
||
| *A person who thinks websites should be fast, pretty, and work for everyone!* | ||
|
|
||
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import js from '@eslint/js' | ||
| import globals from 'globals' | ||
| import reactHooks from 'eslint-plugin-react-hooks' | ||
| import reactRefresh from 'eslint-plugin-react-refresh' | ||
| import tseslint from 'typescript-eslint' | ||
|
|
||
| export default tseslint.config( | ||
| { ignores: ['dist', 'node_modules'] }, | ||
| { | ||
| extends: [js.configs.recommended, ...tseslint.configs.recommended], | ||
| files: ['**/*.{ts,tsx,js,jsx}'], | ||
| languageOptions: { | ||
| ecmaVersion: 2020, | ||
| globals: globals.browser, | ||
| }, | ||
| plugins: { | ||
| 'react-hooks': reactHooks, | ||
| 'react-refresh': reactRefresh, | ||
| }, | ||
| rules: { | ||
| ...reactHooks.configs.recommended.rules, | ||
| 'react-refresh/only-export-components': [ | ||
| 'warn', | ||
| { allowConstantExport: true }, | ||
| ], | ||
| // Relaxed rules for beginners | ||
| '@typescript-eslint/no-explicit-any': 'warn', | ||
| '@typescript-eslint/no-unused-vars': ['warn', { | ||
| argsIgnorePattern: '^_', | ||
| varsIgnorePattern: '^_' | ||
| }], | ||
| '@typescript-eslint/no-empty-object-type': 'off', // Allow empty interfaces for type extensions | ||
| }, | ||
| }, | ||
| ) | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
wow utförlig readme! snygg struktur och hur det förklarar sidans upplägg och info om dig!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tack tack så mycket!! Värmer att höra :]
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Håller med, riktigt najs readme! Gillar att du tog med "What I learned" också!