├── src ├── env.d.ts ├── pages │ └── index.astro ├── components │ ├── Header.astro │ ├── About.astro │ ├── Hero.astro │ ├── Stack.astro │ ├── Footer.astro │ └── Projects.astro └── layouts │ └── Layout.astro ├── fonts └── GeistVF.woff ├── public ├── assets │ ├── mockup1.png │ ├── mockup2.png │ ├── mockup3.png │ └── preview.png ├── logos │ ├── vercel.svg │ ├── css.svg │ ├── html5.svg │ ├── astro.svg │ ├── tailwindcss.svg │ ├── supabase.svg │ ├── next.svg │ ├── aws.svg │ ├── openai_dark.svg │ ├── typescript.svg │ ├── react.svg │ └── title.svg └── favicon.svg ├── .vscode ├── extensions.json └── launch.json ├── astro.config.mjs ├── tsconfig.json ├── .gitignore ├── package.json ├── LICENSE ├── tailwind.config.mjs ├── README.md └── cv.json /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gonzalochale/litefolio/HEAD/fonts/GeistVF.woff -------------------------------------------------------------------------------- /public/assets/mockup1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gonzalochale/litefolio/HEAD/public/assets/mockup1.png -------------------------------------------------------------------------------- /public/assets/mockup2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gonzalochale/litefolio/HEAD/public/assets/mockup2.png -------------------------------------------------------------------------------- /public/assets/mockup3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gonzalochale/litefolio/HEAD/public/assets/mockup3.png -------------------------------------------------------------------------------- /public/assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gonzalochale/litefolio/HEAD/public/assets/preview.png -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /public/logos/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "astro/config"; 2 | import tailwind from "@astrojs/tailwind"; 3 | 4 | // https://astro.build/config 5 | export default defineConfig({ 6 | devToolbar: { 7 | enabled: false, 8 | }, 9 | integrations: [tailwind()], 10 | }); 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "@/*": [ 7 | "src/*" 8 | ], 9 | "@cv": [ 10 | "./cv.json" 11 | ] 12 | }, 13 | "jsx": "react-jsx", 14 | "jsxImportSource": "react" 15 | } 16 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | 4 | # generated types 5 | .astro/ 6 | 7 | # dependencies 8 | node_modules/ 9 | 10 | # logs 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | 23 | # jetbrains setting folder 24 | .idea/ 25 | .vercel 26 | -------------------------------------------------------------------------------- /public/logos/css.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/logos/html5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "astro-portfolio-template", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro check && astro build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@astrojs/check": "^0.8.1", 14 | "@astrojs/tailwind": "^5.1.0", 15 | "astro": "^4.11.5", 16 | "astro-seo": "^0.8.4", 17 | "tailwindcss": "^3.4.4", 18 | "typescript": "^5.5.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /public/logos/astro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/tailwindcss.svg: -------------------------------------------------------------------------------- 1 | 8 | 10 | 11 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Header from "@/components/Header.astro"; 3 | import Hero from "@/components/Hero.astro"; 4 | import Layout from "@/layouts/Layout.astro"; 5 | import Stack from "@/components/Stack.astro"; 6 | import Projects from "@/components/Projects.astro"; 7 | import About from "@/components/About.astro"; 8 | import Footer from "@/components/Footer.astro"; 9 | --- 10 | 11 | 12 |
15 |
16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2024 Gonzalo Chalé 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /public/logos/supabase.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /public/logos/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/Header.astro: -------------------------------------------------------------------------------- 1 | --- 2 | /* Icon provided by Radix Icons 3 | * https://www.radix-ui.com/icons 4 | */ 5 | --- 6 | 7 |
8 | 14 | Use this template 15 | 28 | 29 |
30 | -------------------------------------------------------------------------------- /public/logos/aws.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/logos/openai_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/typescript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/About.astro: -------------------------------------------------------------------------------- 1 |
4 |
7 |
10 |
11 |
12 |
13 |

16 | More about me 17 |

18 |

21 | I'm a Systems Engineer from Cancún, México. I love building things for 22 | the web and sharing my knowledge with others. 23 |

24 |
25 | 31 | Connect with me 32 |
35 |
36 | 37 |
38 |
39 |
40 |
41 | -------------------------------------------------------------------------------- /tailwind.config.mjs: -------------------------------------------------------------------------------- 1 | const { 2 | default: flattenColorPalette, 3 | } = require("tailwindcss/lib/util/flattenColorPalette"); 4 | 5 | /** @type {import('tailwindcss').Config} */ 6 | export default { 7 | content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], 8 | theme: { 9 | extend: { 10 | animation: { 11 | "slide-logos": "slide-logos 30s linear infinite", 12 | "vertical-slide": "vertical-slide 30s linear infinite forwards", 13 | }, 14 | keyframes: { 15 | "slide-logos": { 16 | to: { transform: "translateX(calc(-50% - 2rem))" }, 17 | }, 18 | "vertical-slide": { 19 | to: { transform: "translateY(calc(-50% - 2rem))" }, 20 | }, 21 | aurora: { 22 | from: { 23 | backgroundPosition: "50% 50%, 50% 50%", 24 | }, 25 | to: { 26 | backgroundPosition: "350% 50%, 350% 50%", 27 | }, 28 | }, 29 | }, 30 | colors: { 31 | primary: "hsl(var(--primary))", 32 | secondary: "hsl(var(--secondary))", 33 | background: "hsl(var(--background))", 34 | accent: "hsl(var(--accent))", 35 | foreground: "hsl(var(--foreground))", 36 | "muted-foreground": "hsl(var(--muted-foreground))", 37 | border: "hsl(var(--border))", 38 | "dark-border": "hsl(var(--dark-border))", 39 | card: "hsl(var(--card))", 40 | "dark-card": "hsl(var(--dark-card))", 41 | }, 42 | }, 43 | }, 44 | plugins: [addVariablesForColors], 45 | }; 46 | 47 | function addVariablesForColors({ addBase, theme }) { 48 | let allColors = flattenColorPalette(theme("colors")); 49 | let newVars = Object.fromEntries( 50 | Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) 51 | ); 52 | 53 | addBase({ 54 | ":root": newVars, 55 | }); 56 | } 57 | -------------------------------------------------------------------------------- /src/components/Hero.astro: -------------------------------------------------------------------------------- 1 |
4 |
5 |

8 | Always building things for the web. 9 |

10 |

13 | This is a simple portfolio template built with Astro and Tailwind CSS. 14 |

15 |
16 |
17 | 23 | Connect with me 24 |
27 |
28 | 29 |
30 |
31 | 32 | 61 | -------------------------------------------------------------------------------- /src/components/Stack.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Image from "astro/components/Image.astro"; 3 | 4 | /* 5 | Logos were provided by "svgl" free and open source icons library. 6 | Link: https://svgl.app/ 7 | */ 8 | const logos = [ 9 | { src: "/logos/astro.svg", alt: "AstroJS Logo" }, 10 | { src: "/logos/react.svg", alt: "ReactJS Logo" }, 11 | { src: "/logos/next.svg", alt: "NextJS" }, 12 | { src: "/logos/vercel.svg", alt: "Vercel Logo" }, 13 | { src: "/logos/tailwindcss.svg", alt: "TailwindCSS Logo" }, 14 | { src: "/logos/typescript.svg", alt: "TypeScript Logo" }, 15 | { src: "/logos/aws.svg", alt: "AWS Logo" }, 16 | { src: "/logos/supabase.svg", alt: "Supabase Logo" }, 17 | { src: "/logos/openai_dark.svg", alt: "OpenAI Logo" }, 18 | ]; 19 | --- 20 | 21 |
24 |

27 | Top Technologies I Use Everyday 28 |

29 |

32 | Best tools to deliver the best results. 33 |

34 |
37 |
38 | { 39 | logos.concat(logos).map((logo) => ( 40 |
41 | {logo.alt} 49 |
50 | )) 51 | } 52 |
53 |
54 |
55 | 56 | 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Litefolio - Astro Portfolio Starter Template 2 | 3 | This is a free portfolio starter template built with Astro and Tailwind CSS. 4 | 5 | ## Live Demo 6 | 7 | **[litefolio.vercel.app](https://litefolio.vercel.app)** 8 | 9 | ## Preview 10 | 11 | ![Astro Portfolio Template by Gonzalo Chalé](public/assets/preview.png) 12 | 13 | ## Deploy 14 | 15 | Easily deploy the project with the button below. It will clone the repository to your GitHub account and create a new deployment on your Vercel dashboard. 16 | 17 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fgonzalochale%2Flitefolio) 18 | 19 | ## Installation 20 | 21 | If you are reading this on github, you can click on the "Use this template" button above to create a new repository from astroship to your account. Then you can do a `git clone` to clone it to your local system. 22 | 23 | Alternatively, you can clone the project directly from this repo to your local system. 24 | 25 | ### 1. Clone the repo 26 | 27 | ```bash 28 | git clone git@github.com:gonzalochale/litefolio.git myPortfolio 29 | # or 30 | git clone git@github.com:gonzalochale/litefolio.git . 31 | ``` 32 | 33 | The `.` will clone it to the current directory so make sure you are inside your project folder first. 34 | 35 | ### 2. Install Dependencies 36 | 37 | ```bash 38 | npm install 39 | # or 40 | yarn install 41 | # or (recommended) 42 | pnpm install 43 | ``` 44 | 45 | ### 3. Start development Server 46 | 47 | ```bash 48 | npm run dev 49 | # or 50 | yarn dev 51 | # or (recommended) 52 | pnpm dev 53 | ``` 54 | 55 | ### Preview & Build 56 | 57 | ```bash 58 | npm run preview 59 | npm run build 60 | # or 61 | yarn preview 62 | yarn build 63 | # or (recommended) 64 | pnpm preview 65 | pnpm build 66 | ``` 67 | 68 | We recommend using [pnpm](https://pnpm.io/) to save disk space on your computer. 69 | 70 | ### Other Commands 71 | 72 | ```bash 73 | pnpm astro ... 74 | pnpm astro add 75 | pnpm astro --help 76 | ``` 77 | 78 | ## Project Structure 79 | 80 | Inside of your Astro project, you'll see the following folders and files: 81 | 82 | ``` bash 83 | / 84 | ├── public/ 85 | │ └── ... 86 | ├── src/ 87 | │ ├── components/ 88 | │ │ └── ... 89 | │ ├── layouts/ 90 | │ │ └── ... 91 | │ └── pages/ 92 | │ └── ... 93 | └── package.json 94 | ``` 95 | 96 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. 97 | 98 | Any static assets, like images, can be placed in the `public/` directory. 99 | 100 | ## TailwindCSS 101 | 102 | TailwindCSS is already configured in this repo, so you can start using it without any installation. 103 | 104 | ## Contributing 105 | 106 | Contributions are welcome! Please open an issue or submit a pull request for any bugs, improvements, or new features. 107 | 108 | ## Credits 109 | 110 | We would like to express our gratitude to the following open-source projects and their contributors: 111 | 112 | - **SVG Icons**: Thank you to [SVGL](https://www.svgl.app) and [Radix Icons](https://www.radix-ui.com/icons) for providing the high-quality SVG icons used in this project. 113 | 114 | Your contributions to the open-source community are invaluable and greatly appreciated. Thank you for making this project possible! 115 | -------------------------------------------------------------------------------- /public/logos/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { SEO } from "astro-seo"; 3 | 4 | interface Props { 5 | title: string; 6 | } 7 | 8 | const { title } = Astro.props; 9 | --- 10 | 11 | 12 | 13 | 14 | 60 | 61 | 65 | 66 | 67 | 68 | {title} 69 | 70 | 73 | 74 | 75 | 76 | 77 | 120 | -------------------------------------------------------------------------------- /public/logos/title.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /cv.json: -------------------------------------------------------------------------------- 1 | { 2 | "basics": { 3 | "name": "Gonzalo Chalé", 4 | "label": "Systems Engineer", 5 | "image": "https://github.com/gonzalochale.png", 6 | "summary": "This is a starter template web portfolio. It is designed to be a starting point to showcase your work and help you stand out from the crowd. Perfect for developers, designers, and other professionals.", 7 | "location": { 8 | "city": "Cancún", 9 | "countryCode": "MX", 10 | "country": "México" 11 | } 12 | }, 13 | "connect": { 14 | "sectionLabel": "Experience", 15 | "socials": [ 16 | { 17 | "network": "X (Formerly Twitter)", 18 | "label": "X (Formerly Twitter)", 19 | "username": "gonzalochale", 20 | "url": "https://x.com/gonzalochale" 21 | }, 22 | { 23 | "network": "GitHub", 24 | "label": "GitHub", 25 | "username": "gonzalochale", 26 | "url": "https://github.com/gonzalochale" 27 | }, 28 | { 29 | "network": "LinkedIn", 30 | "label": "LinkedIn", 31 | "username": "gonzalochale", 32 | "url": "https://www.linkedin.com/in/gonzalochale/" 33 | }, 34 | { 35 | "network": "YouTube", 36 | "label": "YouTube", 37 | "username": "chalegonzalo", 38 | "url": "https://www.youtube.com/@chalegonzalo" 39 | } 40 | ] 41 | }, 42 | "experience": { 43 | "sectionLabel": "Work experience", 44 | "jobs": [ 45 | { 46 | "company": "Acme", 47 | "position": "Software Engineer", 48 | "startDate": "2020-01-01", 49 | "endDate": "2024-07-31", 50 | "summary": "I worked on the Acme team, where I helped build the Y feature. I was responsible for Z, which involved A, B, and C.", 51 | "highlights": [ 52 | "Developed a new feature for the Acme platform", 53 | "Worked on the Y project, which involved A, B, and C", 54 | "Collaborated with the Z team to improve the X platform" 55 | ] 56 | }, 57 | { 58 | "company": "Y (Formerly X)", 59 | "position": "Software Engineer", 60 | "startDate": "2018-01-01", 61 | "endDate": "2019-12-31", 62 | "summary": "I worked on the Y team, where I helped build the Z feature. I was responsible for A, which involved B, C, and D.", 63 | "highlights": [ 64 | "Developed a new feature for the Y platform", 65 | "Worked on the Z project, which involved B, C, and D", 66 | "Collaborated with the A team to improve the Y platform" 67 | ] 68 | } 69 | ] 70 | }, 71 | "stack": { 72 | "sectionLabel": "My stack", 73 | "logos": [ 74 | { "src": "/logos/astro.svg", "alt": "AstroJS Logo" }, 75 | { "src": "/logos/vercel.svg", "alt": "Vercel Logo" }, 76 | { "src": "/logos/tailwindcss.svg", "alt": "TailwindCSS Logo" }, 77 | { "src": "/logos/typescript.svg", "alt": "TypeScript Logo" }, 78 | { "src": "/logos/css.svg", "alt": "CSS Logo" }, 79 | { "src": "/logos/html5.svg", "alt": "HTML Logo" }, 80 | { "src": "/logos/astro.svg", "alt": "AstroJS Logo" }, 81 | { "src": "/logos/vercel.svg", "alt": "Vercel Logo" }, 82 | { "src": "/logos/tailwindcss.svg", "alt": "TailwindCSS Logo" }, 83 | { "src": "/logos/typescript.svg", "alt": "TypeScript Logo" }, 84 | { "src": "/logos/css.svg", "alt": "CSS Logo" }, 85 | { "src": "/logos/html5.svg", "alt": "HTML Logo" } 86 | ] 87 | }, 88 | "personalProjects": { 89 | "sectionLabel": "Personal projects", 90 | "projects": [ 91 | { 92 | "name": "LiteFolio", 93 | "description": "This is a starter template web portfolio. It is designed to be a starting point to showcase your work and help you stand out from the crowd. Perfect for developers, designers, and other professionals.", 94 | "imageUrl": "/assets/project.png", 95 | "projectSocials": [ 96 | { 97 | "network": "GitHub", 98 | "label": "GitHub", 99 | "url": "https://github.com/gonzalochale/litefolio" 100 | }, 101 | { 102 | "network": "Demo", 103 | "label": "Demo", 104 | "url": "https://litefolio.vercel.app/" 105 | } 106 | ] 107 | }, 108 | { 109 | "name": "LiteFolio", 110 | "description": "This is a starter template web portfolio. It is designed to be a starting point to showcase your work and help you stand out from the crowd. Perfect for developers, designers, and other professionals.", 111 | "imageUrl": "/assets/project.png", 112 | "projectSocials": [ 113 | { 114 | "network": "GitHub", 115 | "label": "GitHub", 116 | "url": "https://github.com/gonzalochale/litefolio" 117 | }, 118 | { 119 | "network": "Demo", 120 | "label": "Demo", 121 | "url": "https://litefolio.vercel.app/" 122 | } 123 | ] 124 | }, 125 | { 126 | "name": "LiteFolio", 127 | "description": "This is a starter template web portfolio. It is designed to be a starting point to showcase your work and help you stand out from the crowd. Perfect for developers, designers, and other professionals.", 128 | "imageUrl": "/assets/project.png", 129 | "projectSocials": [ 130 | { 131 | "network": "GitHub", 132 | "label": "GitHub", 133 | "url": "https://github.com/gonzalochale/litefolio" 134 | }, 135 | { 136 | "network": "Demo", 137 | "label": "Demo", 138 | "url": "https://litefolio.vercel.app/" 139 | } 140 | ] 141 | } 142 | ] 143 | } 144 | } -------------------------------------------------------------------------------- /src/components/Footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const socials = [ 3 | { 4 | network: "X (Formerly Twitter)", 5 | label: "X (Formerly Twitter)", 6 | username: "gonzalochale", 7 | url: "https://x.com/gonzalochale", 8 | }, 9 | { 10 | network: "GitHub", 11 | label: "GitHub", 12 | username: "gonzalochale", 13 | url: "https://github.com/gonzalochale", 14 | }, 15 | { 16 | network: "LinkedIn", 17 | label: "LinkedIn", 18 | username: "gonzalochale", 19 | url: "https://www.linkedin.com/in/gonzalochale/", 20 | }, 21 | { 22 | network: "YouTube", 23 | label: "YouTube", 24 | username: "chalegonzalo", 25 | url: "https://www.youtube.com/@chalegonzalo", 26 | }, 27 | ]; 28 | 29 | /* 30 | Icon provided by Radix Icons 31 | https://www.radix-ui.com/icons 32 | */ 33 | 34 | /* 35 | If you want to change the footer title you need to create a new svg file with the new title and replace the current one withot the width and height attributes to make it responsive. 36 | */ 37 | --- 38 | 39 | 87 | -------------------------------------------------------------------------------- /src/components/Projects.astro: -------------------------------------------------------------------------------- 1 | --- 2 | /* 3 | Mockup images are provided by shots.so 4 | Link: https://shots.so/ 5 | */ 6 | 7 | const testimonials = [ 8 | { 9 | name: "Alice Smith", 10 | testimonial: "Your work is truly outstanding!", 11 | src: "/", 12 | alt: "Logo", 13 | }, 14 | { 15 | name: "Michael Johnson", 16 | testimonial: "Exceptional quality and attention to detail.", 17 | src: "/", 18 | alt: "Logo", 19 | }, 20 | { 21 | name: "Emily Davis", 22 | testimonial: "Incredible results!", 23 | src: "/", 24 | alt: "Logo", 25 | }, 26 | { 27 | name: "Chris Lee", 28 | testimonial: "Your creativity and skill are unmatched.", 29 | src: "/", 30 | alt: "Logo", 31 | }, 32 | { 33 | name: "Sophia Brown", 34 | testimonial: "Impressive work and great service.", 35 | src: "/", 36 | alt: "Logo", 37 | }, 38 | ]; 39 | 40 | import Image from "astro/components/Image.astro"; 41 | --- 42 | 43 |
46 |

49 | Every project is a new challenge to overcome. 50 |

51 |

54 | Design, Code, Learn, Repeat. 55 |

56 |
57 |
60 |
61 |

64 | You Project Here 65 |

66 |

69 | Your project description here. 70 |

71 |
72 |
73 | Mockup Project 81 |
82 |
83 |
86 |
89 | 92 | Building in public 93 | 94 |
95 |
98 | 101 | Web Development 102 | 103 |
104 |
107 | 110 | Design 111 | 112 |
113 |
116 | 119 | Open Source 120 | 121 |
122 |
123 |
126 |
129 |
132 | { 133 | testimonials.concat(testimonials).map((testimonial) => ( 134 |
135 |
136 | {/* {testimonial.alt} */} 144 | 145 |

{testimonial.name}

146 |
147 |

148 | {testimonial.testimonial} 149 |

150 |
151 | )) 152 | } 153 |
154 |
155 |
156 |
159 |
160 |

163 | You Project Here 164 |

165 |

168 | Your project description here. 169 |

170 |
171 |
172 | Mockup Project 180 |
181 |
182 |
185 |
186 |

189 | You Project Here 190 |

191 |

194 | Your project description here. 195 |

196 |
197 |
198 | Mockup Project 206 |
207 |
208 | 240 |
241 |
244 |
245 |
246 | 247 | 252 | --------------------------------------------------------------------------------