Merge pull request #2 from danny-burrows/portfolio

Portfolio Improvements

public/style/global.css

@@ -62,15 +62,11 @@ body {
 
 @media (max-width: 650px) {
   body {
-    padding-top: 2rem;
     padding-right: 2rem;
     padding-left: 2rem;
   }
 }
 
-
-
-
 h2 {
   font-weight: 500;
   font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);

src/components/AboutMe.astro

@@ -53,15 +53,17 @@ code:not(.tree) {
 
 <article>
     <section>
-        <h2>Hello, I'm Danny.</h2>
+        <h2>Hi, I'm Danny!</h2>
         <p>
             I'm studying Computer Science at the <a href="https://york.ac.uk">University of York</a> and I'm the Technical Director at <a href="https://class7.consulting">Class 7 Consulting</a>.
         </p>
         <p>
-            I also do freelance work, building full stack web applications, IT solutions and promotional websites for businesses. 
-            My clients include startups and established companies in industries such as finance, insurance and 
-            retail.
+            I'm passionate about engineering bespoke solutions to real-world problems.
+
+            I build full-stack web applications, IT solutions, and promotional websites for businesses across the UK.
+
+            My clients include startups and established companies in industries such as finance, insurance and retail.
         </p>
-        <h3>Technologies I'm experienced in...</h3> 
+        <h3>Technologies I'm experienced in:</h3> 
     </section>
 </article>

src/components/portfolio/Portfolio.astro

@@ -24,43 +24,103 @@ import PortfolioItem from './PortfolioItem.jsx'
 }
 </style>
 
-<h2>Projects & Jobs</h2>
+<h2>Professional Info</h2>
 <div class="container">
 
     <PortfolioItem 
-        ids="thng-2" 
         title="Class 7" 
-        content="Website & Full stack web application." 
+        content="Technical Director & Software Consultant." 
         link="https://class7.consulting" 
-        imgUrl="/assets/class7.png" 
+        imgUrl="/assets/portfolio/Class 7.png" 
     client:load/>
 
+    <!-- Perhaps this should be a page on class7.consulting... -->
     <PortfolioItem 
-        ids="thng-1" 
-        title="CMDUI" 
-        content="A GUI Framework in CMD." 
-        link="https://github.com/danny-burrows/CMDUI" 
-        imgUrl="/assets/cmdui.png" 
+        title="Loki" 
+        content="A marine underwriting system for the 21st century." 
+        link="#"
+        imgUrl="/assets/portfolio/Loki.png" 
+    client:load/>
+
+    <PortfolioItem 
+        title="SHINC" 
+        content="Website services, hosting and domain management." 
+        link="https://shinc-underwriting.com/"
+        imgUrl="/assets/portfolio/SHINC.png" 
+    client:load/>
+
+    <PortfolioItem 
+        title="JTC" 
+        content="Software consulting, website design, and techinical lead." 
+        link="https://jacktradescards.com" 
+        imgUrl="/assets/portfolio/JackTradesCards.png" 
+    client:load/>
+
+    <PortfolioItem 
+        title="Box Of Frogs" 
+        content="Software consulting & algorithmic development." 
+        link="#" 
+        imgUrl="/assets/portfolio/Box Of Frogs.png" 
+    client:load />
+
+    <PortfolioItem 
+        title="Contact Me!" 
+        content="If you've got something for me do get in touch." 
+        link="#"
+        imgUrl="/assets/portfolio/+.svg" 
+    client:load/>
+
+    <PortfolioItem client:load/>
+    <PortfolioItem client:load/>
+    <PortfolioItem client:load/>
+</div>
+
+<h2>Personal</h2>
+<div class="container">
+
+    <PortfolioItem 
+        title="Rotate Screen" 
+        content="Open source python project with 500+ monthly downloads." 
+        link="https://github.com/danny-burrows/rotate-screen" 
+        imgUrl="/assets/portfolio/Rotate Screen.png" 
+    client:load />
+
+    <PortfolioItem 
+        title="img_to_txt"
+        content="Utility that converts images into ASCII or ANSI text. " 
+        link="https://github.com/danny-burrows/img_to_txt" 
+        imgUrl="/assets/portfolio/img_to_txt.png" 
     client:load />
 
     <PortfolioItem 
-        ids="thng-3" 
         title="jorOnline" 
         content="A chat app with a custom websocket server." 
         link="https://github.com/danny-burrows/jorOnline"
-        imgUrl="/assets/joronline.png" 
+        imgUrl="/assets/portfolio/jorOnline.png" 
     client:load/>
 
     <PortfolioItem 
-        ids="thng-4" 
-    client:load/>
+        title="CMDUI" 
+        content="A GUI framework for Windows CMD in Python." 
+        link="https://github.com/danny-burrows/CMDUI" 
+        imgUrl="/assets/portfolio/CMDUI.png" 
+    client:load />
 
     <PortfolioItem 
-        ids="thng-5" 
+        title="Cmacs" 
+        content="Emacs-inspired text editor in C." 
+        link="#"
+        imgUrl="/assets/portfolio/Cmacs.png"
     client:load/>
 
     <PortfolioItem 
-        ids="thng-6" 
+        title="Want more?" 
+        content="Click here to see my GitHub for more details!" 
+        link="https://github.com/danny-burrows"
+        imgUrl="/assets/portfolio/next.svg"
     client:load/>
 
+    <PortfolioItem client:load/>
+    <PortfolioItem client:load/>
+    <PortfolioItem client:load/>
 </div>

src/components/portfolio/PortfolioItem.jsx

@@ -1,27 +1,35 @@
 import React from 'react';
 import styles from './PortfolioItem.module.css'
 
-
 const PortfolioItem = (props) =>  {
+    const portfolio_item_ref = React.useRef(null);
 
     React.useEffect(() => {
-        const port_item = document.getElementById(props.ids);
+        if (props.title) {
+            portfolio_item_ref.current.style.setProperty('aspect-ratio', `9 / 5`);
+        }
+
+        // TODO: Axe this.
+        if (props.title == "Loki") {
+            portfolio_item_ref.current.style.setProperty('outline', `solid #b0b0b0 2px`);
+        }
+
         if (props.imgUrl) {
             const tst = new Image();
 
             tst.onload = () => {
-                port_item.style.setProperty('--img-url', `url("${props.imgUrl}")`);
-                port_item.style.setProperty('--op2', "100");
+                portfolio_item_ref.current.style.setProperty('--img-url', `url("${props.imgUrl}")`);
+                portfolio_item_ref.current.style.setProperty('--op2', "100");
             };
-            
+
             tst.src = props.imgUrl;
         } else {
-            port_item.style.setProperty('--op2', "100");
+            portfolio_item_ref.current.style.setProperty('--op2', "100");
         }
     }, []);
 
     return (
-        <a href={props.link} id={props.ids} className={styles.item}>
+        <a ref={portfolio_item_ref} href={props.link} className={styles.item}>
             <h2 className={styles.title}>{props.title}</h2>
             <p className={styles.content}>{props.content}</p>
         </a>

src/components/portfolio/PortfolioItem.module.css

@@ -3,9 +3,12 @@
     text-decoration: none;
 
     /* These are explicitly specified to allow for transition */
-    height: 100%;
+    /* height: 100%; */
     max-height: 100%;
 
+    width: 100%;
+    /* aspect-ratio: 9 / 5; */
+
     --op2: 0;
     --img-url: linear-gradient(var(--background-color-light), var(--background-color));
 
@@ -58,16 +61,19 @@
     opacity: 120%;
 }
 
+.item > h2 {
+    font-size: x-large;
+}
 .content {
     font-size: 1.3ch;
 }
 
 @media screen and (max-width: 768px) {
 
     .item {
-        height: 7ch;
-        max-height: 7ch;
-        /* padding: 3px 10px;   */
+        height: 10ch;
+        max-height: 10ch;
+        padding: 2px 2px;  
     }
     .item > h2 {
         font-size: medium;
@@ -76,4 +82,11 @@
         font-size: 1ch;
     }
 
+}
+
+@media screen and (max-width: 550px) {
+    .item {
+        height: 7ch;
+        max-height: 7ch;
+    }
 }

src/components/slider/AstroSliderItem.astro

@@ -14,10 +14,11 @@ i {
   color: var(--text-color);
   font-size: 70px;
   z-index: 100;
+  margin-right: 20px;
 }
 
 svg {
-  width: 160px;
+  width: 70px;
   height: 70px;
 }
 </style>
@@ -36,4 +37,5 @@ svg {
       <title>Astro</title>
       <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" class="astro-RnEq1mMV"></path><path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" class="astro-RnEq1mMV"></path>
     </svg>
+    <span>Astro</span>
 </div>

src/components/slider/Slider.astro

@@ -49,27 +49,27 @@ import AstroSliderObj from './AstroSliderItem.astro'
 <div class="slider">
     <div class="slide-track"> 
         <AstroSliderObj />
-        <SliderObj icon="devicon-nextjs-original" />
-        <SliderObj icon="devicon-react-original" />
-        <SliderObj icon="devicon-javascript-plain" />
-        <SliderObj icon="devicon-typescript-plain" />
-        <SliderObj icon="devicon-mongodb-plain" />
-        <SliderObj icon="devicon-graphql-plain" />
-        <SliderObj icon="devicon-python-plain" />
-        <SliderObj icon="devicon-flask-original" />
-        <SliderObj icon="devicon-html5-plain" />
-        <SliderObj icon="devicon-css3-plain" />
-        <SliderObj icon="devicon-bootstrap-plain" />
-        <SliderObj icon="devicon-git-plain" />
-        <SliderObj icon="devicon-nodejs-plain" />
-        <SliderObj icon="devicon-c-plain" />
-        <SliderObj icon="devicon-rust-plain" />
-        <SliderObj icon="devicon-raspberrypi-line" />
-        <SliderObj icon="devicon-java-plain" />
-        <SliderObj icon="devicon-php-plain" />
-        <SliderObj icon="devicon-composer-line" />
-        <SliderObj icon="devicon-jupyter-plain" />
-        <SliderObj icon="devicon-figma-plain" />
-        <SliderObj icon="devicon-trello-plain" />
+        <SliderObj icon="devicon-nextjs-original" text="NextJS" />
+        <SliderObj icon="devicon-react-original" text="React" />
+        <SliderObj icon="devicon-javascript-plain" text="Javascript  " />
+        <SliderObj icon="devicon-typescript-plain" text="Typescript" />
+        <SliderObj icon="devicon-mongodb-plain" text="MongoDB" />
+        <SliderObj icon="devicon-graphql-plain" text="GraphQL" />
+        <SliderObj icon="devicon-python-plain" text="Python" />
+        <SliderObj icon="devicon-flask-original" text="Flask" />
+        <SliderObj icon="devicon-html5-plain" text="HTML5" />
+        <SliderObj icon="devicon-css3-plain" text="CSS3" />
+        <SliderObj icon="devicon-bootstrap-plain" text="Bootstrap" />
+        <SliderObj icon="devicon-git-plain" text="Git" />
+        <SliderObj icon="devicon-nodejs-plain" text="NodeJS" />
+        <SliderObj icon="devicon-c-plain" text="ANSI C" />
+        <SliderObj icon="devicon-rust-plain" text="Rust" />
+        <SliderObj icon="devicon-raspberrypi-line" text="Raspberry Pi" />
+        <SliderObj icon="devicon-java-plain" text="Java" />
+        <SliderObj icon="devicon-php-plain" text="PHP" />
+        <SliderObj icon="devicon-composer-line" text="Composer" />
+        <SliderObj icon="devicon-jupyter-plain" text="Jupyter" />
+        <SliderObj icon="devicon-figma-plain" text="Figma" />
+        <SliderObj icon="devicon-trello-plain" text="Trello" />
     </div>
 </div>

src/components/slider/SliderItem.astro

@@ -1,5 +1,5 @@
 ---
-const { icon = 'devicon-javascript-plain' } = Astro.props;
+const { icon = 'devicon-javascript-plain', text = '' } = Astro.props;
 ---
 
 <style>
@@ -13,6 +13,7 @@ i {
   display: flex;
   justify-content: center;
   width: 160px;
+  margin-right: 20px;
 }
 .slide > i {
   color: var(--text-color);
@@ -23,4 +24,5 @@ i {
 
 <div class="slide">
     <i class={icon}></i>
+    <span>{text}</span>
 </div>