16 |

17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/pages/project/two.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from "../../layouts/Layout.astro"; 3 | 4 | import HeaderSmall from "../../components/HeaderSmall.astro"; 5 | 6 | import Table from "../../components/Table.astro"; 7 | const title = "Project 2"; 8 | const subtitle = "Project 2 info"; 9 | --- 10 | 11 | 12 |

13 | 14 |

15 |

16 |

17 |

18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/components/Card.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | title: string; 4 | body: string; 5 | } 6 | 7 | const { title, body } = Astro.props; 8 | --- 9 | 10 |

13 |

16 | {title} 17 |

18 |

{body}

19 |

20 | -------------------------------------------------------------------------------- /src/pages/project/one.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from "../../layouts/Layout.astro" 3 | 4 | import HeaderSmall from "../../components/HeaderSmall.astro"; 5 | 6 | import Gallery from "../../components/Gallery.astro"; 7 | const title = "Project 1"; 8 | const subtitle = "Project 1 info"; 9 | --- 10 | 11 | 12 |

13 | 14 |

15 |

16 |

17 | 18 |

19 |

20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /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 build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@astrojs/tailwind": "^5.1.1", 14 | "astro": "^4.15.9", 15 | "flowbite": "^1.8.1", 16 | "tailwindcss": "^3.3.3" 17 | }, 18 | "devDependencies": { 19 | "prettier": "^3.0.3", 20 | "prettier-plugin-astro": "^0.12.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/pages/contact.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from "../layouts/Layout.astro"; 3 | 4 | import HeaderSmall from "../components/HeaderSmall.astro"; 5 | import Form from "../components/Form.astro"; 6 | const title = "Contact"; 7 | const subtitle = "Contact me using the form below. Or find me online!"; 8 | --- 9 | 10 | 11 |

12 | 13 |

14 |

15 |

16 | 17 |

18 |

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/components/HeaderSmall.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | title: string; 4 | subtitle: string; 5 | } 6 | 7 | const { title, subtitle } = Astro.props; 8 | 9 | import data from "../data/site.json"; 10 | --- 11 | 12 |

13 |

14 |

17 | {title} 18 |

19 |

20 | {subtitle} 21 |

22 |

23 |

24 | -------------------------------------------------------------------------------- /src/components/Blockquote.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | text: string; 4 | } 5 | 6 | const { text } = Astro.props; 7 | --- 8 | 9 |

10 | 13 |
{text}
14 |

15 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /public/sun.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Social.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import data from "../data/site.json"; 3 | import Heading from "../components/Heading.astro"; 4 | 5 | const heading = "Find me online!" 6 | --- 7 | 8 |

9 | 10 |

17 | 23 | {item.title} 24 | 25 |

30 |

31 | -------------------------------------------------------------------------------- /src/components/Tooltip.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | button: string; 4 | tooltip: string; 5 | } 6 | 7 | const { button, tooltip } = Astro.props; 8 | --- 9 | 10 | 16 | 24 | -------------------------------------------------------------------------------- /src/components/Rating.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | rating: number; 4 | } 5 | 6 | const { rating } = Astro.props; 7 | --- 8 | 9 |

10 | { 11 | Array.from({ length: rating }).map((_) => ( 12 | 22 | )) 23 | } 24 |

25 | -------------------------------------------------------------------------------- /src/components/Video.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | youtube: string; 4 | } 5 | 6 | const { youtube } = Astro.props; 7 | --- 8 | 9 |

10 | 16 |

17 | 18 | 36 | -------------------------------------------------------------------------------- /public/icons/bug.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/GalleryFeatured.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Image } from "astro:assets"; 3 | import image1 from "../assets/cta-dashboard-mockup.svg"; 4 | --- 5 | 6 |

7 |

8 |

9 |

10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 | -------------------------------------------------------------------------------- /src/pages/project/three.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from "../../layouts/Layout.astro"; 3 | 4 | import HeaderSmall from "../../components/HeaderSmall.astro"; 5 | 6 | import DeviceMockups from "../../components/DeviceMockups.astro"; 7 | const title = "Project 3"; 8 | const subtitle = "Project 3 info"; 9 | --- 10 | 11 | 12 |

13 | 14 |

15 |

16 |

17 |

18 | 22 |

23 |

Some info here...

24 |

25 |

26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/Header.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import data from "../data/site.json"; 3 | 4 | import Button from "../components/Button.astro"; 5 | import ButtonAlt from "../components/ButtonAlt.astro"; 6 | const title = "Nice to see you!" 7 | --- 8 | 9 |

10 |

11 |

12 |

15 | {title} 16 |

17 |

18 | {data.siteDescription} 19 |

20 |

21 |

24 |

25 |

26 |

27 | -------------------------------------------------------------------------------- /public/icons/award.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/SocialProof.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const info = [ 3 | { 4 | title: "69M+", 5 | description: "developers", 6 | }, 7 | { 8 | title: "1B+", 9 | description: "contributors", 10 | }, 11 | { 12 | title: "4M+", 13 | description: "organizations", 14 | }, 15 | ]; 16 | --- 17 | 18 |

19 |

20 |

27 | {item.title} 28 |: 30 | {item.description} 31 |

36 |

37 |

38 | -------------------------------------------------------------------------------- /src/components/Form.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Button from '../components/Button.astro'; 3 | --- 4 | 5 |

6 | Your email 7 | 8 |

9 |

10 | Your Message 11 | 12 |

13 |

28 | 31 | { 32 | heading.map((item) => ( 33 | 36 | )) 37 | } 38 | 39 | 40 | { 41 | data.map((item) => ( 42 | 43 | 49 | 50 | 51 | 52 | 53 | )) 54 | } 55 | 56 |

34 \| {item} 35 \|
47 \| {item.name} 48 \|	{item.color}	{item.category}	{item.price}

57 |

58 | -------------------------------------------------------------------------------- /src/components/VideoAlt.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | youtube: string; 4 | } 5 | 6 | const { youtube } = Astro.props; 7 | --- 8 | 9 |

10 | 17 |

20 | 26 |

27 |

28 | 29 | 55 | -------------------------------------------------------------------------------- /src/components/About.astro: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | import data from '../data/site.json' 4 | --- 5 |

8 |

11 |

12 |

17 |

18 |

19 |

24 |

25 |

26 |

27 |

{data.owner}

28 | 29 |

30 | {data.about} 31 |

32 |

33 |

34 |

35 |

36 |

2.5 k Followers

37 |

38 |

39 |

40 |

2.0 k Following

41 |

42 |

43 |

44 |

45 |

46 | -------------------------------------------------------------------------------- /src/pages/projects.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const title = "Projects"; 3 | const subtitle = "Some Projects"; 4 | 5 | import Layout from "../layouts/Layout.astro"; 6 | 7 | import HeaderSmall from "../components/HeaderSmall.astro"; 8 | import ProjectCard from "../components/ProjectCards.astro"; 9 | import data from "../data/site.json"; 10 | 11 | type Props = { 12 | projectTitle: string; 13 | href: string; 14 | body: string; 15 | type?: string; 16 | repo?: string; 17 | }; 18 | --- 19 | 20 | 21 |

22 | 23 |

24 |

25 |

26 |

27 | { 28 | data.projects.map( 29 | ( 30 | value: { 31 | projectTitle: string; 32 | href: string; 33 | about: string; 34 | repo?: string; 35 | type?: string; 36 | }, 37 | index: number 38 | ) => { 39 | return ( 40 | 47 | ); 48 | } 49 | ) 50 | } 51 |

52 |

53 |

54 |

55 |

56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/components/CTA.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // import the Image component and the image 3 | import { Image } from 'astro:assets'; 4 | import darkImage from "../assets/cta-dashboard-mockup-dark.svg"; 5 | import lightImage from "../assets/cta-dashboard-mockup.svg"; 6 | const title = "I'm a developer that enjoys building things" 7 | const body = "I have over 6 years professional experience. I have collaborated with a diverse range of clients, from start-ups to larger companies. My areas of expertise include building sites with visually appealing styles, constructing layouts and components based on designs, and utilizing the latest web development technologies. If you believe I can assist your business, please feel free to contact me. I am based in Upstate NY." 8 | --- 9 |

10 |

11 | 12 | A description of my image.

13 | 15 |

16 |

{title}

17 |

{body}

18 | 19 |

20 |

21 |

-------------------------------------------------------------------------------- /src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | title: string; 4 | } 5 | 6 | const { title } = Astro.props; 7 | import { ViewTransitions } from "astro:transitions"; 8 | import Nav from "../components/Nav.astro"; 9 | import Footer from "../components/Footer.astro"; 10 | 11 | import data from "../data/site.json"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | {title} 24 | 32 | 33 | 34 |

35 |

41 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /src/components/ButtonGroup.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | text1: string; 4 | href1: string; 5 | text2: string; 6 | href2: string; 7 | external?: boolean; 8 | } 9 | 10 | const { text1, href1, text2, href2, external } = Astro.props; 11 | --- 12 | 13 |

14 | 18 | {text1} 19 | 20 | 24 | {text2} 25 | { 26 | external && ( 27 | 39 | ) 40 | } 41 | 42 |

43 | -------------------------------------------------------------------------------- /src/components/IndicatorCount.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | button: string; 4 | count: number; 5 | href: string; 6 | } 7 | 8 | const { button, count, href } = Astro.props; 9 | --- 10 | 11 | 15 | 29 | 30 | {button} 31 | 32 | { 33 | count > 0 && ( 34 |

35 | {count} 36 |

37 | ) 38 | } 39 | 40 | { 41 | count > 10 && ( 42 |

43 | {count} 44 |

45 | ) 46 | } 47 | 48 | { 49 | count > 99 && ( 50 |

51 | 99+ 52 |

53 | ) 54 | } 55 | 56 | -------------------------------------------------------------------------------- /src/components/FeatureList.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Heading from "./Heading.astro"; 3 | 4 | const heading = "Some things I can help you with"; 5 | 6 | const sections = [ 7 | "Custom Static Site", 8 | "WordPress CMS", 9 | "SEO", 10 | "Analytics", 11 | "Content Creation", 12 | "Custom React Components", 13 | ]; 14 | const sectionsText = [ 15 | "I can build you a custom static site using Astro, Next, or Jekyll. Static sites are fast, secure, and easy to maintain.", 16 | "Do you want to add content like blogs, landing pages, or custom sections? I can help set up a WordPress site for you.", 17 | "SEO is important for your site to be found. I can help you with SEO best practices and tools to help you rank higher.", 18 | "Using analytics tools like Google Analytics, I can help you track your site's performance and make improvements.", 19 | "I've been using Adobe products for over 10 years. I can help you create content for your site, social media, and even custom YouTube videos.", 20 | "Need something more custom for an app? I can help you build custom React components for your project.", 21 | ]; 22 | --- 23 | 24 |

25 |

26 | 27 |

30 | { 31 | sections.map((section) => { 32 | return ( 33 |

34 |

35 |

36 | {sections[sections.indexOf(section)]} 37 |

38 |

39 | {sectionsText[sections.indexOf(section)]} 40 |

41 |

42 |

43 | ); 44 | }) 45 | } 46 |

47 |

48 |

49 | -------------------------------------------------------------------------------- /src/components/Gallery.astro: -------------------------------------------------------------------------------- 1 | 2 |

3 |

4 |

5 |

6 |

7 |

8 |

9 |

10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 |

35 |

36 |

37 |

38 |

39 |

40 | -------------------------------------------------------------------------------- /src/components/BreadCrumbs.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | title: string; 4 | parent:string; 5 | parentLink:string; 6 | } 7 | 8 | const { title, parent, parentLink } = Astro.props; 9 | --- 10 | 11 | 39 | -------------------------------------------------------------------------------- /src/components/Banner.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | text: string; 4 | } 5 | 6 | const { text } = Astro.props; 7 | --- 8 | 9 | 61 | -------------------------------------------------------------------------------- /src/components/Tabs.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const tabs = [ 3 | { 4 | tabTitle: "Profile", 5 | tabContent: 6 | "This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.", 7 | }, 8 | { 9 | tabTitle: "Dashboard", 10 | tabContent: 11 | "This is some placeholder content the Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.", 12 | }, 13 | { 14 | tabTitle: "Settings", 15 | tabContent: 16 | "This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.", 17 | }, 18 | ]; 19 | --- 20 | 21 |

22 |

31 | 42 |

46 |

47 |

48 | { 49 | tabs.map((tab, index) => ( 50 | 58 | )) 59 | } 60 |

61 | -------------------------------------------------------------------------------- /src/components/GalleryMasonry.astro: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 |

6 |

7 |

8 |

9 |

10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 |

35 |

36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 |

48 |

49 |

50 |

51 | -------------------------------------------------------------------------------- /src/components/ProductCategories.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const sectionTitle = "Shop by category!"; 3 | const linkTitle = "Something"; 4 | const linkLocation = "/something"; 5 | 6 | const cards = [ 7 | { 8 | icon: "./icons/bug.svg", 9 | title: "Computer & Office", 10 | link: "link1", 11 | }, 12 | { 13 | icon: "./icons/archive.svg", 14 | title: "Phones & Accessories", 15 | link: "link2", 16 | }, 17 | { 18 | icon: "./icons/award.svg", 19 | title: "Consumer Electronics", 20 | link: "link3", 21 | }, 22 | { 23 | icon: "./icons/bell.svg", 24 | title: "Watches", 25 | link: "link4", 26 | } 27 | ]; 28 | --- 29 | 30 |

31 |

32 |

33 |

36 | {sectionTitle} 37 |

38 | 39 | 44 | {linkTitle} 45 | 61 | 62 |

63 | 64 |

65 | { 66 | cards.map((card) => ( 67 | 71 | 72 |

73 | 74 | {card.title} 75 | 76 | 77 | )) 78 | } 79 |

80 |

81 |

82 | -------------------------------------------------------------------------------- /src/components/Timeline.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Heading from "./Heading.astro"; 3 | 4 | const heading = "What I've been up to"; 5 | const dates = ["June 2017", "November 2017", "April 2020"]; 6 | const info = [ 7 | "Web Development and Design Assistant (Anaren Inc.)", 8 | "Frontend Web Developer (Atmosphere IoT Corp.)", 9 | "Freelance Web Developer (Shadow Stack LLC)", 10 | ]; 11 | const details = [ 12 | "I assisted in relaunching the corporate website for the space and defense engineering company. This includes landing pages promoting business markets. The site features pages on business values and career development. The corporate site hosts 700+ products that incorporate documentation, attributes, and more for each product in a data table.", 13 | "Built and maintained a completely custom software documentation site with Jekyll. Built and maintained a completely custom company website with Wordpress. Built front-end widgets for our IoT software platform with Handlebars and custom css. Maintained social media presence. Marketing tasks using Zoho Campaigns. Custom email templates sent with Zoho and Sendgrid. Project and getting started videos using Adobe Premiere. Analytic and metric tracking using: Klipfolio, Google Analytics, Google Tag Manager, Android Play console, Apple App Store Connect, and a custom Node app to provide usage metrics from our software. Participated in sprint reviews and planning with both Jira and Asana. ", 14 | "Freelance Web Developer for static and WordPress sites, web applications with React, sales oriented tasks, consulting on the latest and best tools in the industry, and much more.", 15 | ]; 16 | --- 17 | 18 | 19 |

20 |

25 |
26 | 27 | {date} 28 | 29 |
30 | {info[dates.indexOf(date)]} 31 |
32 |
33 | {details[dates.indexOf(date)]} 34 |
35 |

40 |

41 | -------------------------------------------------------------------------------- /src/data/site.json: -------------------------------------------------------------------------------- 1 | { 2 | "owner": "John Smith", 3 | "siteName": "John Smith's Portfolio", 4 | "siteDescription": "John Smith's Portfolio for potential employers", 5 | "about": "I'm a web developer from Anytown, USA. I like to build things with HTML, CSS, and JavaScript.", 6 | "contact": { 7 | "email": "bob@aol.com", 8 | "phone": "555-555-5555", 9 | "address": "1234 Main St. Anytown, USA 12345" 10 | }, 11 | "pages": [ 12 | { 13 | "title": "Home", 14 | "href": "/" 15 | }, 16 | { 17 | "title": "Projects", 18 | "href": "/projects" 19 | }, 20 | { 21 | "title": "Contact", 22 | "href": "/contact" 23 | } 24 | ], 25 | "social": [ 26 | { 27 | "title": "GitHub", 28 | "href": "https://github.com/leabs" 29 | }, 30 | { 31 | "title": "YouTube", 32 | "href": "https://www.youtube.com/@shadowstack" 33 | }, 34 | { 35 | "title": "LinkedIn", 36 | "href": "https://www.linkedin.com/in/stevenleabo/" 37 | }, 38 | { 39 | "title": "CodePen", 40 | "href": "https://codepen.io/shadowstack/pens/popular" 41 | } 42 | ], 43 | "projects": [ 44 | { 45 | "projectTitle": "Project 1", 46 | "href": "project/one", 47 | "about": "Database of books and reviews from users complete with auth and comments and so much more!!!", 48 | "type": "Python, Django, HTML, CSS", 49 | "repo": "https://github.com", 50 | "image": "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-dashboard-mockup.svg" 51 | }, 52 | { 53 | "projectTitle": "Project 2", 54 | "href": "project/two", 55 | "about": "Video dashboard using JavaScript that allows user to build and share a layout of videos from YouTube.", 56 | "repo": "https://github.com", 57 | "type": "JavaScript, HTML, CSS", 58 | "image": "../assets/screen2.png", 59 | "featured": true 60 | }, 61 | { 62 | "projectTitle": "Project 3", 63 | "href": "project/three", 64 | "about": "Some info about this project here, please add something here for this project ok here.", 65 | "type": "PHP, MySQL, HTML, CSS", 66 | "repo": "https://github.com", 67 | "image": "../assets/screen2.png" 68 | }, 69 | { 70 | "projectTitle": "Project 4", 71 | "href": "project/four", 72 | "about": "Some info about project 4 I'm not sure haha ok see ya", 73 | "type": "WordPress", 74 | "repo": "https://github.com" 75 | } 76 | ] 77 | } 78 | -------------------------------------------------------------------------------- /src/components/FAQ.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const title = "Frequency asked questions"; 3 | const faqs = [ 4 | { 5 | title: 'What do you mean by "Figma assets"?', 6 | description: 7 | "You will have access to download the full Figma project including all of the pages, the components, responsive pages, and also the icons, illustrations, and images included in the screens.", 8 | }, 9 | { 10 | title: 'What does "lifetime access" exactly mean?', 11 | description: 12 | "Once you have purchased either the design, code, or both packages, you will have access to all of the future updates based on the roadmap, free of charge.", 13 | }, 14 | { 15 | title: "How does support work?", 16 | description: 17 | "We're aware of the importance of well qualified support, that is why we decided that support will only be provided by the authors that actually worked on this project.\n\nFeel free to [contact us](#) and we'll help you out as soon as we can.", 18 | }, 19 | ]; 20 | --- 21 | 22 |

23 |

24 |

27 | {title} 28 |

29 |

32 |

33 | { 34 | faqs.map((question) => ( 35 |

36 |

37 | 49 | {question.title} 50 |

51 |

52 | {question.description} 53 |

54 |

55 | )) 56 | } 57 |

58 |

59 |

60 |

61 | -------------------------------------------------------------------------------- /src/components/FeaturedProjects.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const title = "Featured Projects"; 3 | const subtitle = "Some of the recent projects I've worked on."; 4 | 5 | import data from "../data/site.json"; 6 | --- 7 | 8 |

9 |

10 |

11 |

14 | {title} 15 |

16 |

17 | {subtitle} 18 |

19 |

20 |

21 | 22 | { 23 | data.projects.map((project) => { 24 | if (project.featured == true) { 25 |

26 |

27 | 28 | 36 | {data.projects[0].type} 37 | 38 |

39 |

40 | {data.projects[0].projectTitle} 41 |

42 |

43 | {data.projects[0].about} 44 |

45 |

46 |

47 | 51 | Read more 52 | 64 | 65 |

66 |

; 67 | } 68 | }) 69 | } 70 | 71 |

72 |

73 |

74 | -------------------------------------------------------------------------------- /src/components/Drawer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const drawerButton = "Click to Open" 3 | const title = "Drawer Title" 4 | const body = "Hey here is some content for the drawer. You can put anything you want here." 5 | const buttonOneLabel = "Learn More" 6 | const buttonOneLink = "https://www.google.com" 7 | const buttonTwoLabel = "Get Access" 8 | const buttonTwoLink = "https://www.msn.com" 9 | --- 10 | 11 | 12 | 13 | 14 |

15 | 18 |

19 | 20 | 21 |

22 |

{title}

25 | 31 | 32 |

{body}

33 |

34 | {buttonOneLabel} 35 | {buttonTwoLabel} 38 |

39 |

40 | -------------------------------------------------------------------------------- /src/components/Modal.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const button = "Modal Button Text"; 3 | const title = "Modal Title"; 4 | const content = "Modal Content"; 5 | const accept = "Accept"; 6 | const decline = "Decline"; 7 | --- 8 | 9 |

10 | 18 |

19 | 20 | 21 | 84 | -------------------------------------------------------------------------------- /src/components/Team.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const title = "Our Team"; 3 | const description = "Meet the team behind the scenes at the 2020 Hackathon."; 4 | 5 | const team = [ 6 | { 7 | name: "Bonnie Green", 8 | title: "CEO & Web Developer", 9 | bio: "Bonnie drives the technical strategy of the flowbite platform and brand.", 10 | github: "https://www.github.com/bonnie", 11 | image: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" 12 | }, 13 | { 14 | name: "Donnie Green", 15 | title: "CEO & Web Developer", 16 | bio: "Donnie drives the technical strategy of the flowbite platform and brand.", 17 | github: "https://www.github.com/bonnie", 18 | image: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" 19 | }, 20 | { 21 | name: "Johhny Green", 22 | title: "CEO & Web Developer", 23 | bio: "Johnny drives the technical strategy of the flowbite platform and brand.", 24 | github: "https://www.github.com/bonnie", 25 | image: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" 26 | }, 27 | { 28 | name: "Connie Green", 29 | title: "CEO & Web Developer", 30 | bio: "Connie drives the technical strategy of the flowbite platform and brand.", 31 | github: "https://www.github.com/bonnie", 32 | image: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" 33 | }, 34 | ]; 35 | --- 36 | 37 |

38 |

39 |

40 |

43 | {title} 44 |

45 |

48 | {description} 49 |

50 |

51 |

52 | { 53 | team.map((member) => ( 54 |

55 |

60 | 61 |

62 |

63 | {member.name} 64 |

65 | 66 | {member.title} 67 | 68 |

69 | {member.bio} 70 |

71 |

73 | 77 | 85 | 86 |

88 |

89 |

90 | )) 91 | } 92 |

93 |

94 |

95 | -------------------------------------------------------------------------------- /src/components/CustomImageScroll.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Image } from "astro:assets"; 3 | 4 | import thumb1 from "../assets/githubapi.png"; 5 | import thumb2 from "../assets/githubapi.png"; 6 | import thumb3 from "../assets/githubapi.png"; 7 | import thumb4 from "../assets/githubapi.png"; 8 | 9 | const cards = [ 10 | { 11 | title: "Priority support", 12 | imagealt: "Priority support", 13 | image: thumb1, 14 | href: "https://google.com", 15 | }, 16 | { 17 | title: "Priority support", 18 | imagealt: "Priority support", 19 | image: thumb2, 20 | href: "https://google.com", 21 | }, 22 | { 23 | title: "Priority support", 24 | imagealt: "Priority support", 25 | image: thumb3, 26 | href: "https://google.com", 27 | }, 28 | { 29 | title: "Priority support", 30 | imagealt: "Priority support", 31 | image: thumb4, 32 | href: "https://google.com", 33 | }, 34 | { 35 | title: "Priority support", 36 | imagealt: "Priority support", 37 | image: thumb1, 38 | href: "https://google.com", 39 | }, 40 | { 41 | title: "Priority support", 42 | imagealt: "Priority support", 43 | image: thumb2, 44 | href: "https://google.com", 45 | }, 46 | { 47 | title: "Priority support", 48 | imagealt: "Priority support", 49 | image: thumb3, 50 | href: "https://google.com", 51 | }, 52 | { 53 | title: "Priority support", 54 | imagealt: "Priority support", 55 | image: thumb4, 56 | href: "https://google.com", 57 | }, 58 | 59 | ]; 60 | --- 61 | 62 |

63 |

64 | 65 |

66 |

67 |

68 |

69 |

70 |

71 |

72 |

73 |

74 |

75 |

76 |

77 | 78 |

81 | 82 | { 83 | cards.map((card) => ( 84 | 88 |

{card.title}

97 |

98 | 99 | )) 100 | } 101 | 102 | 103 |

104 |

105 |

106 | -------------------------------------------------------------------------------- /src/components/Nav.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import data from "../data/site.json"; 3 | import DarkModeToggle from "./DarkModeToggle.astro"; 4 | --- 5 | 6 |

10 |

13 | 14 | {data.siteName} 18 | 19 | 20 | 44 |

45 |

52 | 57 | {page.title} 58 | 59 |
64 | 65 |

67 |

68 |

69 |

70 | 71 | 79 | 80 | 129 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Astro Tailwind Flowbite Template 2 | 3 | This is a website template that uses the latest version of Astro along with Tailwind and Flowbite UI components to create a static website for various smaller projects. I'm hoping to use this as a foundation for small projects in the future, like building friends' or small businesses' fast and simple static sites. 4 | 5 | Walk through video: 6 | 7 | [![IMAGE_ALT](https://img.youtube.com/vi/FBFbW2TNRL8/0.jpg)](https://www.youtube.com/watch?v=FBFbW2TNRL8) 8 | 9 | This uses all the great features of Astro like View Transitions API support, automatic asset optimization, better build output, and more. 10 | 11 | This is a work in progress, so please feel free to send me a pull request for any improvements you make. Look at the contributing section below for more information. 12 | 13 | ## Getting Started 14 | 15 | - Clone or fork this repo. 16 | - Run `npm install` to install all the dependencies. 17 | - Run `npm run dev` to start the dev server. 18 | - You can then view the site at [http://localhost:4321/](http://localhost:4321/). 19 | 20 | ## Changing Site Contents 21 | 22 | Most of the site data lives in `src/data/site.json`. You can change the site title, description, social media links, and more there. Make sure to use a JSON linter in case you make any mistakes! 23 | 24 | ## Adding Pages 25 | 26 | Add pages in the `src/pages` directory. Create a new file named `pagename.astro` and import the Layout component and some variables into your new page like so: 27 | 28 | ```html 29 | --- 30 | import Layout from "../layouts/Layout.astro"; 31 | import HeaderSmall from "../components/HeaderSmall.astro"; 32 | 33 | const title = "Contact"; 34 | const subtitle = "Contact me"; 35 | --- 36 | 37 | 38 |

39 | 40 |

41 |

42 |

CONTENT HERE

43 |

44 | 45 | ``` 46 | 47 | **Also note:** you'll need to add the page to `src/data/site.json` in the `pages` array for the page to show up in the navigation, but you don't have to if you don't want it in the nav. 48 | 49 | ## Component Library 50 | 51 | I'm using the Flowbite UI component library, which uses Tailwind CSS. You can find components [here](https://flowbite.com/docs/components/accordion/). If you'd like to add components, simply add them to the `src/components` directory and import them into your pages. 52 | 53 | ## Site Logo 54 | 55 | Replace the image in `src/assets/logo.png` with your own logo. If it's not square, you'll need to adjust the `width` and `height` in the `src/components/Nav.astro` file on line 55. 56 | 57 | ## Site Favicon 58 | 59 | Replace the image in `public/favicon.svg` with your own favicon. 60 | 61 | ## Site Colors 62 | 63 | Colors for primary, secondary, and accent are set in the `tailwind.config.cjs` file. You can change them there to whatever you'd like. A Tailwind palette or even a hex or RGB value will work. 64 | 65 | ## Deployment 66 | 67 | The easiest way to deploy a site like this is by using a service like Vercel, Cloudflare, or Netlify. Simply set up a free account on one of them, authorize your GitHub account, and grant access to all or selected repositories. From there, it should be as simple as setting up a new project in the dashboard; these services should handle the rest. 68 | 69 | ## Contributing 70 | 71 | If you'd like to contribute to this project, please feel free to send me a pull request. I'm always looking for ways to improve this template. If it's for a bug fix, please create an issue first so we can discuss it, the same with a feature add. This will give me more understanding when reviewing the PR. I want to keep this project neat and fast, so please make sure to follow the guidelines below. 72 | 73 | ## Guidelines 74 | 75 | - Please use the [Prettier](https://prettier.io/) code formatter to keep the code clean and consistent. 76 | - Please use [Tailwind](https://tailwindcss.com/) classes for styling. 77 | - Please use [Astro](https://astro.build/) components for HTML. 78 | - Please use [Flowbite UI](https://flowbite.com/) components for HTML. 79 | - If you're submitting a custom component (not in the current Flowbite UI library), please prepend `Custom` to the component name, e.g., `src/components/CustomImageScroll.astro` 80 | 81 | ## License 82 | 83 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details 84 | -------------------------------------------------------------------------------- /src/components/DarkModeToggle.astro: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | 4 | --- 5 | 11 | 12 | 44 | -------------------------------------------------------------------------------- /src/components/Carousel.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Image } from "astro:assets"; 3 | import image1 from "../assets/cta-dashboard-mockup-dark.svg"; 4 | import image2 from "../assets/cta-dashboard-mockup-dark.svg"; 5 | import image3 from "../assets/cta-dashboard-mockup-dark.svg"; 6 | import image4 from "../assets/cta-dashboard-mockup-dark.svg"; 7 | --- 8 | 9 |

10 | 11 |

12 | 13 | 22 | 23 | 30 | 31 | 38 | 39 | 46 |

47 | 48 |

51 | 57 | 63 | 69 | 75 | 81 |

82 | 83 | 108 | 133 |

134 | -------------------------------------------------------------------------------- /src/components/Pricing.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Button from "./Button.astro"; 3 | const title = "Some title for pricing"; 4 | const subtitle = "Some subtitle for pricing"; 5 | 6 | const pricing = [ 7 | { 8 | name: "Starter", 9 | price: "$29", 10 | description: "Best option for personal use & for your next project.", 11 | features: [ 12 | { 13 | name: "Individual configuration", 14 | icon: "heroicon-o-check-circle", 15 | }, 16 | { 17 | name: "No setup, or hidden fees", 18 | icon: "heroicon-o-check-circle", 19 | }, 20 | { 21 | name: "Team size: 1 developer", 22 | icon: "heroicon-o-check-circle", 23 | }, 24 | { 25 | name: "Premium support: 6 months", 26 | icon: "heroicon-o-check-circle", 27 | }, 28 | { 29 | name: "Free updates: 6 months", 30 | icon: "heroicon-o-check-circle", 31 | }, 32 | ], 33 | cta: "Get started", 34 | ctaLink: "https://www.google.com", 35 | }, 36 | { 37 | name: "Company", 38 | price: "$99", 39 | description: "Relevant for multiple users, extended & premium support.", 40 | features: [ 41 | { 42 | name: "Individual configuration", 43 | icon: "heroicon-o-check-circle", 44 | }, 45 | { 46 | name: "No setup, or hidden fees", 47 | icon: "heroicon-o-check-circle", 48 | }, 49 | { 50 | name: "Team size: 10 developers", 51 | icon: "heroicon-o-check-circle", 52 | }, 53 | { 54 | name: "Premium support: 24 months", 55 | icon: "heroicon-o-check-circle", 56 | }, 57 | { 58 | name: "Free updates: 24 months", 59 | icon: "heroicon-o-check-circle", 60 | }, 61 | ], 62 | cta: "Get started", 63 | ctaLink: "https://www.google.com", 64 | }, 65 | { 66 | name: "Enterprise", 67 | price: "$499", 68 | description: 69 | "Best for large scale uses and extended redistribution rights.", 70 | features: [ 71 | { 72 | name: "Individual configuration", 73 | icon: "heroicon-o-check-circle", 74 | }, 75 | { 76 | name: "No setup, or hidden fees", 77 | icon: "heroicon-o-check-circle", 78 | }, 79 | { 80 | name: "Team size: 100+ developers", 81 | icon: "heroicon-o-check-circle", 82 | }, 83 | { 84 | name: "Premium support: 36 months", 85 | icon: "heroicon-o-check-circle", 86 | }, 87 | { 88 | name: "Free updates: 36 months", 89 | icon: "heroicon-o-check-circle", 90 | }, 91 | ], 92 | cta: "Get started", 93 | ctaLink: "https://www.google.com", 94 | }, 95 | ]; 96 | --- 97 | 98 |

99 |

100 |

101 |

104 | {title} 105 |

106 |

107 | {subtitle} 108 |

109 |

110 |

113 | { 114 | pricing.map((plan) => ( 115 |

116 |

{plan.name}

117 |

118 | {plan.description} 119 |

120 |

121 | {plan.price} 122 | /month 123 |

124 | 125 |

128 | 140 | {feature.name} 141 |

144 |

146 | )) 147 | } 148 |

149 |

150 |

151 | -------------------------------------------------------------------------------- /src/pages/components.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const title = "Components"; 3 | const subtitle = 4 | "Component overview. Some properties for this are inline (like heading, button, etc) while others have properties in the component file (table, modal, etc)."; 5 | 6 | import Layout from "../layouts/Layout.astro"; 7 | 8 | //Added 9/25/2023, HeaderSmall is the small hero banner header, while Heading renders an h2 tag 9 | import HeaderSmall from "../components/HeaderSmall.astro"; 10 | import Heading from "../components/Heading.astro"; 11 | 12 | //Added 9/25/2023 13 | import Alert from "../components/Alert.astro"; 14 | import Avatar from "../components/Avatar.astro"; 15 | import Badge from "../components/Badge.astro"; 16 | import Breadcrumbs from "../components/BreadCrumbs.astro"; 17 | import Button from "../components/Button.astro"; 18 | import ButtonGroup from "../components/ButtonGroup.astro"; 19 | import Card from "../components/Card.astro"; 20 | import DeviceMockups from "../components/DeviceMockups.astro"; 21 | import Form from "../components/Form.astro"; 22 | import Gallery from "../components/Gallery.astro"; 23 | import Jumbotron from "../components/Jumbotron.astro"; 24 | import Table from "../components/Table.astro"; 25 | import Timeline from "../components/Timeline.astro"; 26 | 27 | //Added 10/8/23 28 | import VisualImageHeading from "../components/VisualImageHeading.astro"; 29 | import Team from "../components/Team.astro"; 30 | import Pricing from "../components/Pricing.astro"; 31 | import FAQ from "../components/FAQ.astro"; 32 | import CustomerLogos from "../components/CustomerLogos.astro"; 33 | 34 | //Added 10/30/23 35 | import Blockquote from "../components/Blockquote.astro"; 36 | import Tooltip from "../components/Tooltip.astro"; 37 | import Tabs from "../components/Tabs.astro"; 38 | import Rating from "../components/Rating.astro"; 39 | import Modal from "../components/Modal.astro"; 40 | import IndicatorCount from "../components/IndicatorCount.astro"; 41 | 42 | //Added 11/25/23 43 | import Carousel from "../components/Carousel.astro"; 44 | import Banner from "../components/Banner.astro"; 45 | import Drawer from "../components/Drawer.astro"; 46 | import GalleryMasonry from "../components/GalleryMasonry.astro"; 47 | import GalleryFeatured from "../components/GalleryFeatured.astro"; 48 | import Kbd from "../components/Kbd.astro"; 49 | import Video from "../components/Video.astro"; 50 | import VideoAlt from "../components/VideoAlt.astro"; 51 | 52 | //Added 1/3/24 53 | import CustomImageScroll from "../components/CustomImageScroll.astro"; 54 | 55 | //Added 6/27/24 56 | import ProductCategories from "../components/ProductCategories.astro"; 57 | --- 58 | 59 | 60 |

61 | 62 |

63 |

64 |

65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |

13 | {heading} 14 |

16 | {title} 17 |

17 | {title} 18 |

15 | {title} 16 |

16 | {title} 17 |

30 | {projectTitle} 31 |

20 | {title} 21 |

{data.owner}

{title}

36 | {sections[sections.indexOf(section)]} 37 |

36 | {sectionTitle} 37 |

30 | {info[dates.indexOf(date)]} 31 |

27 | {title} 28 |

37 | 49 | {question.title} 50 |

14 | {title} 15 |

40 | {data.projects[0].projectTitle} 41 |

{title}

43 | {title} 44 |

63 | {member.name} 64 |

{card.title}

104 | {title} 105 |

{plan.name}

{title}

13 | {heading} 14 |

16 | {title} 17 |

17 | {title} 18 |

15 | {title} 16 |

16 | {title} 17 |

30 | {projectTitle} 31 |

20 | {title} 21 |

{data.owner}

{title}

36 | {sections[sections.indexOf(section)]} 37 |

36 | {sectionTitle} 37 |

30 | {info[dates.indexOf(date)]} 31 |

27 | {title} 28 |

37 | 43 | 48 | 49 | {question.title} 50 |

14 | {title} 15 |

40 | {data.projects[0].projectTitle} 41 |

23 | 24 | {title}

34 | {title} 35 |

43 | {title} 44 |

63 | {member.name} 64 |

{card.title}

104 | {title} 105 |

{plan.name}

{title}

37 | 49 | {question.title} 50 |

{title}